preloadImage preloadImage
[28.05.2020] COVID-19: #WirBleibenZuhause, sind aber trotz Coronavirus weiterhin wie gewohnt für Sie da! OK
Diese Webseite verwendet Cookies zur Verbesserung des Angebots und für Marketingzwecke. Durch die Nutzung unserer Seiten erklären Sie sich damit einverstanden. Mehr erfahren. OK
UNTERNEHMEN APP ENTWICKLUNG WEBENTWICKLUNG SOFTWAREENTWICKLUNG BLOCKCHAIN REFERENZEN BLOG JOBS KONTAKT

Website für Mobilgeräte optimieren – Mobile First

Website für Mobilgeräte optimieren – Mobile First

Die Beliebtheit von mobilen Endgeräten, also Smartphones und Tablets nimmt seit Jahren zu. In der heutigen schnelllebigen Zeit sind sie daher nicht mehr wegzudenken. Inzwischen werden mehr Suchanfragen über Mobilgeräte als über den Desktops ausgeführt. Eine mobil optimierte Webseite ist daher ein Muss! Google hat längst darauf reagiert: Mit dem Mobile First Index hat Google ein neues Ranking-Prinzip implementiert, das mobile Versionen von Websites zu einem Bewertungsgegenstand macht. Damit entscheidet die Nutzerfreundlichkeit Ihrer mobilen Website über Ihren Platz in Googles Suchmaschinen-Ranking. Vor allem jetzt sollte Ihnen klar sein, wieso es so wichtig ist eine mobile Webseite zu besitzen. Was dabei zu beachten ist und welche Optimierungsmöglichkeiten es für mobile Websites gibt, stellen wir Ihnen im Folgenden vor.

Mobile First Index

Google bewerte bei der Mobile First-Indexierung die Suchergebnisse anhand der Informationen, die auf der mobilen Version Ihrer Webseite gefunden werden. Das bedeutet, für das Ranking werden ausschließlich die Inhalte auf Ihrer mobilen Website berücksichtigt. Zuvor wurde für den Index die Inhalte der Desktopversion verwendet. Da die Nutzung aber immer mehr bei Mobilgeräten für eine Google-Suche liegt, crawlt und indexiert der Googlebot Seiten mit dem Smartphone-Agent. Informationen, die der "mobile" Crawler dabei nicht angezeigt bekommen hat, werden auch nicht beim Ranking berücksichtigt und können sich negativ auf das Google Ranking auswirken. Unabhängig davon, ob diese Informationen in der Desktop-Version verfügbar sind. Mobile Endgeräte werden also immer wichtiger, demnach auch mobiles Internet. Aufgrund dessen muss bei der Erstellung von mobilen Websites, auf eine geringe Ladezeit geachtet werden. Auch die inhaltlichen Formate müssen an die kleineren Bildschirmgrößen angepasst werden. Um die mobile Version Ihrer Webseite aufzubauen, gibt es unterschiedliche Möglichkeiten. Hier stellen wir Ihnen die Wichtigsten vor:

Unterschiedliche URLs für Desktop und Mobile

Hier werden die Mobile- sowie die Desktop Version der Website auf verschiedenen URLs bereitgestellt. Es wird versucht, den User-Agent des Nutzers zu erkennen, um diesen dann auf die entsprechende Version weiterzuleiten. Damit Google die beiden URLs nicht als Duplicate Content identifiziert und abstraft, muss eine Verbindung zu den identischen Webseiten geschaffen werden. Mittels der Elemente rel="canonical" und rel="alternate" wird der Bezug zwischen den beiden URLs hergestellt. Inhalte von Webseiten sollten einzigartig und einmalig sein.

Dynamic Serving

Bei der dynamischen Bereitstellung greifen alle Geräte auf die gleichen URLs zurück. Je nachdem welcher User-Agent erkannt wird, bekommen Sie jedoch unterschiedliche Quellcodevarianten (HTML und CSS) ausgeliefert. Dies ist abhängig davon, was der Server über den Browser des Besuchers herausfinden kann. Ein wichtiges Element bei dieser Herangehensweise ist der Vary-HTTP-Header. Dieser entscheidet welchen Quellcode er ausgibt und dann die Ressourcen an das Endgerät weiterleitet. Der angeforderte Content wird also mithilfe des Vary-Headers an den User-Agent des jeweiligen Endgerätes angepasst.

Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) ist ein Open-Source-Framework, dass die Ladegeschwindigkeit von Websites auf Mobilgeräten beschleunigt. Charakteristisch für das Framework sind reduzierte JavaScript- und CSS-Elemente sowie das Laden von Content-Elementen über ein Content Delivery Netzwerk. Dies hat den Vorteil, dass die Seite unabhängig von Nutzerstandort schnell aufgebaut werden kann. Der Schlüssel von AMP liegt primär in der Reduktion der Daten, die für die Seite geladen werden müssen.

Responsive Design

Das Responsive Design stellt unabhängig von verwendeten Endgeräten den gleichen HTML-Code bereit und variiert mittels CSS die Darstellung der Inhalte in Abhängigkeit von der Bildschirmgröße. Das bedeutet, dass sich das Layout einer Internetseite automatisch auf das Ausgabemedium anpasst und ein gutes Nutzererlebnis sicherstellt. Kern des Responsive Designs ist die Verwendung von flexiblen Gestaltungsrastern (Grids) und flexiblen Inhalten. Dabei wird mit relativen Pixelwerten anstelle von fixen Pixelwerten gearbeitet. Ein weiteres wesentliches Element ist das Viewport-Meta-Tag, welches dem Browser mitteilt, wie die Abmessungen und Skalierungen entsprechend der Breite des Geräts angepasst werden sollen. Dies ermöglicht, dass die Anzeigeflächen automatisch prozentual angeglichen werden.

Fazit

Zusammenfassend empfehlen wir das Responsive Design für die Optimierung Ihrer mobilen Webseite. Das Responsive Design ist die gängigste und flexibelste Methode Ihre mobile Webseite zu optimieren. Sie erleichtert dem Nutzer die Desktop- sowie Mobil-Inhalte über die gleiche URL zu teilen und zu verlinken. Es müssen nicht tausende von Layouts erstellt werden für die Vielzahl von unterschiedlichen Bildschirmgrößen. Das Responsive Design passt sich dem Ausgabemedium automatisch an. Für den Betreiber der Website reduziert sich der Wartungsaufwand. Die Pflege der unterschiedlicher Seiten (Desktop und Mobil) entfällt, da sie nicht doppelt vorgenommen werden muss. Die Google Algorithmen lassen sich den Indexierungseigenschaften präzise zuordnen. Es ist nicht erforderlich zu signalisieren, dass eine Desktop sowie eine Mobile Version vorhanden ist. Die Ladezeit mit Responsive Design ist geringer, da keine Weiterleitung notwendig ist, um auf eine für das jeweilige Gerät optimierte Ansicht zu gelangen. Zudem sind User-Agents basierende Weiterleitungen fehleranfälliger, was die Nutzerfreundlichkeit von Responsive Design unterstreicht. Wenn Sie Unterstützung bei der Optimierung Ihrer mobilen Webseite benötigen – Wir helfen gerne. Schreiben Sie uns dafür eine E-Mail, oder rufen Sie uns gleich persönlich an. Ihr FKT42-Team!

02.04.2020
Weitere Beiträge aus unserem Blog
Proof of Concept – Geld sparen und Umsetzbarkeit prüfen
Proof of Concept – Geld sparen und Umsetzbarkeit prüfen
Mit dem Proof of Concept die Umsetzbarkeit von Apps prüfen ✓ Was man bei der Erstellung eines PoC beachten sollte.
28.05.2020
Wann entwickle ich meine App und wie finde ich den richtigen Zeitpunkt?
Wann entwickle ich meine App und wie finde ich den richtigen Zeitpunkt?
Wann ist der richtige Zeitpunkt für die Entwicklung der eigenen App? ✓ Was Gründer beachten sollten & wann eine App Sinn macht.
20.05.2020
Aktuelle Webdesign Trends 2020 – Wir zeigen was in ist!
Aktuelle Webdesign Trends 2020 – Wir zeigen was in ist!
Webdesign Trends 2020 – Immer auf dem neusten Stand ✓ Wir verraten welchen Trends Sie folgen sollten.
14.05.2020
FKT42 GmbH • Münsterstraße 5 • 59065 Hamm • Mail: info@fkt42.de • Tel.: +49 (0)2381 92 92 799