Mobile Webseiten – Warum sie so wichtig sind

Einer dieser technologischen Trends ist der Mobile First Index. Mit dieser Bevorzugung von mobilen Webseiten richtet Google sein Augenmerk auf Webseiten, die mobil optimiert sind. Der Hintergrund: Um Webseiten für den mobilen Einsatz zu rüsten, fehlen häufig Inhalte auf den für mobile Endgeräte optimierten Webseiten. Da die meisten Anfragen bereits auf mobiler Ebene erfolgen, richtet Google seinen Fokus auf entsprechende Webseiten. Jeder User soll auf einem seiner mobilen Endgeräte dasselbe wie auf einem PC oder Mac sehen. Unter mobilen Endgeräten versteht man beispielsweise Smartphones und Tablets.

Mobile Webseiten nehmen einen immer größeren Stellenwert ein – nicht nur bei Google, sondern vor allem auch bei Nutzern, die täglich im Internet unterwegs sind. Das Nutzerverhalten hat sich in Richtung „mobil“ weiterentwickelt. Immer mehr Nutzer greifen auf Endgeräte wie Smartphones oder Tablets zurück. Das Smartphone ist der ständige Begleiter. Mobiles Internet ist deutlich gefragter als die Suche über den Desktop. Da ist es wichtig, dass Webentwickler Seiten erschaffen, die auf das jeweilige Endgerät und die Bildschirmgröße angepasst sind. Mobile Webseiten müssen ein Responsive Design aufweisen. Die Ansicht muss also auf unterschiedlichen Bildschirmen gleichermaßen gut funktionieren. Für mobiles Internet muss daher eine Webseite zur Verfügung stehen, bei der die Loading Time möglichst kurz ist. Mit den Inhalten muss sorgsam umgegangen werden, sodass die Website Performance nicht darunter leidet. Das Ziel ist eine Webseite, die für Mobilgeräte optimiert ist und auf diversen Endgeräten gleichermaßen korrekt angezeigt wird.

Eine mobile Webseite sollte mit denselben Inhalten wie die Desktop Variante aufwarten. Die Kunst liegt in der Verpackung. Eine korrekte Darstellung aller mobilen Inhalte sowie die Nutzerfreundlichkeit liegen an oberster Stelle. Die mobile Webseite wird dabei genauso attraktiv dargestellt wie das PC Pendant. Eine Webseite, die für Mobilgeräte angepasst ist, bietet zudem eine kurze Page Load Time. Nur dadurch ist gewährleistet, dass die Seite auch während mobiler Aktivitäten schnell lädt. Ist dies nicht der Fall, erhöht sich aller Voraussicht nach die Absprungrate. Bietet die Webseite uneingeschränkten Zugriff für verschiedene Endgeräte, ist das ein Indikator für ein gutes Design. Und eine wichtige Voraussetzung für eine gute User Experience.

Ein wichtiger Aspekt bei der Entwicklung mobiler oder responsive Webseiten ist das Webdesign. Mithilfe von Prototyping Software lässt sich ein auf die Wünsche des Designers und die User Bedürfnisse zugeschnittenes Webdesign bewerkstelligen, das auch den zukünftigen Nutzern zugute kommt.

Um das Webdesign voranzubringen, sind allerdings weitere Elemente erforderlich. Entsprechende Hilfsmittel finden sich in Form von Media Queries wieder. Diese sorgen für responsive Webdesign und lassen sich entweder direkt in ein Template einbinden oder in einer separaten Stylesheet Datei abspeichern. Übersichtlicher ist es, wenn die Media Queries nicht direkt in der HTML beziehungsweise PHP Datei untergebracht sind, sondern stattdessen eine entsprechende Stylesheet Datei zum Einsatz kommt.

Um die Ladezeit einer Webseite zu messen, gibt es verschiedene Dienste. Diese zeigen auf, wie schnell eine Seite geladen wird. Eine Liste von ausgewählten Diensten findest Du hier:

Diese Webseiten zeigen an, wie schnell eine Seite geladen und auf verschiedenen Browsern angezeigt wird. Einige der Daten lassen sich ideal zur PageSpeed Optimierung einsetzen. Um herauszufinden, wie Deine Webseite auf verschiedenen Geräten angezeigt wird, empfehlen sich folgende Webseiten:

Responsive Check Center
Google: Test für Mobilgeräte

Eine Webseite, die für mobile Endgeräte optimiert ist und auf allen Geräten mit identischen Inhalten aufwartet, eignet sich ebenfalls zur Neukundengewinnung. Eine mobil optimierte Webseite macht einen guten und sicheren Eindruck und trägt enorm zur Customer Journey sowie Nutzerfreundlichkeit bei. Auch hier ist der Einsatz mobiler Webseiten enorm wichtig.

Das Mobile First Prinzip ist schnell erklärt: Bei der Indexierung schaut sich Google mobile Webseiten zuerst an. Das heißt, fehlen auf der mobilen Seite möglicherweise Inhalte, die auf PC Browsern vorhanden sind, könnte sich dies negativ auf das Google Ranking auswirken. Dadurch ist eine geringere Positionierung der kompletten Seite in den organischen Suchergebnissen wahrscheinlich. Eine gute mobile Webseite erhöht das Webseiten Ranking allerdings kaum. Dazu gehören andere wichtige Elemente wie das On Page und Off Page SEO. Mobile Webseiten sollten demnach so angepasst sein, dass diese ihrem PC Pendant entsprechen.

Neben den gebräuchlichen responsive Webseiten trifft man auch heute noch auf eigenständige mobile Webseiten. Diese verfügen in der Regel über eine Subdomain, die häufig mit https://m.domain.com in Erscheinung treten. Dabei handelt es sich um mobile Webseiten, die ein anderes Prinzip nutzen. Im Gegensatz zu responsive Webseiten, nutzen diese Seiten ein eigenständiges Design sowie eine separate URL. Erkennt das System ein Smartphone oder andere mobile Endgeräte, so stellt der Server automatisch die auf diese Endgeräte programmierte Webseite zur Verfügung. Es findet demnach beim Anklicken solch einer Seite eine Weiterleitung statt.

Die Nachteile solch mobiler Webseite liegen auf der Hand: Es reicht nicht aus, hier und da etwas CSS Code anzupassen. Responsive Webseiten warten dahingegen mit einem Webdesign auf, das CSS Code sowie CSS Media Queries nutzt. Dadurch lassen sich Änderungen schnell und effizient vornehmen. Eine eigene Subdomain muss es dabei nicht geben. Die Queries schalten sich sofort dazu, sobald eine bestimmte Auflösung Verwendung findet. Bei Geräten mit einer Auflösung von 600 Pixeln kommen dann die Anpassungen zum Einsatz, die für diesen Media Querie festgestellt wurden.

Eine moderne Webseite, die für Mobilgeräte optimiert ist, sollte darüber hinaus auf die Originalseite verweisen. Gibt es zwei URLs, über die dieselben Inhalte abrufbar sind, könnte Google dies als Duplicate Content identifizieren und abstrafen. Um diesem Problem vorzubeugen, ist der Einsatz von kanonischen URLs (Canonical URL) zwingend erforderlich. Mithilfe des Tags und der Elemente rel=“canonical“ und rel=“alternate“ erkennen Suchmaschinen doppelte oder identische Webseiten. Sie strafen die Page nicht wegen Verletzung aufgrund von Duplicate Content ab. Inhalte sollten nämlich einzigartig und einmalig sein.

Annotationen

Die damals gängige Praxis, mobile Websiten auf einer Subdomain zu hosten, ist nur noch selten anzutreffen. Stattdessen setzen professionelle Webentwickler auf ein modernes Webdesign, das sich CSS Media Queries zunutze macht. Diese Media Queries sind Teil des Webdesigns und lassen sich durch Dateien mit der Endung .css in die Webseite integrieren.

Da sich die CSS Dateien in der Regel an einem zentralen Ort befinden, kann der Webmaster schnell darauf zugreifen. Die entsprechenden Anpassungen der Media Queries erfolgen dann leichter. Dadurch ist ein schneller Workflow gewährleistet und bietet einen essentiellen Vorteil gegenüber mobiler Webseiten, die auf eine andere Lösung setzen.

Durch CSS Media Queries lassen sich Inhalte individuell für jede Bildschirmgröße steuern. Damit bieten diese Queries bei diversen Bildschirmen ein Bild, das an die jeweilige Auflösung angepasst und korrekt dargestellt wird. Je nach Seiteninhalt lädt diese Seite dann zügig. Teil des Webdesign sollte zudem sein, auf die Größe der verschiedenen Elemente zu achten, damit die Ladezeiten gering bleiben. Dadurch und durch den Einsatz von Caching erscheint der Seiteninhalt beim Anklicken schnell. Mobiles Internet bedarf demnach einer intensiven Pflege. Nur dadurch ist gewährleistet, dass die Seiten auch in Zukunft für mobile Webseiten gerüstet bleiben.

Neben den üblichen SEO Maßnahmen, zu denen auch On page SEO gehört, zählt zu den Maßnahmen im Online Marketing auch das Off Site SEO. Eine mobile Webseite, die auf eine separate URL setzt, hat hierbei Nachteile. Der Desktop Nutzer hat nämlich nur den Link zur mobilen Webseite. Beim Anklicken auf diesen Link, leitet das System oftmals auf die mobile Webseite und nicht auf die Desktop Seite. Das Ergebnis ist eine Webseite, die möglicherweise bei diversen Endgeräten nicht korrekt dargestellt wird.

Hoffentlich hat Dir dieser Beitrag weitergeholfen. Falls Du immer noch Fragen hast, nimm gerne Kontakt mit uns auf. Responsive Design für mobile Webseiten kannst Du auch in unserer GRATIS Sichtbarkeitsanalyse besprechen. Aber Du bekommst auch viele weitere praktische Optimierungstipps.