Mobile Friendly: Tipps für Deine erfolgreiche mobile Website

Warum Mobile Friendly-Optimierung wichtig ist

2013 waren lediglich knapp 16 Prozent der Nutzer im Netz mit ihrem Smartphone unterwegs. 2018 war bereits mehr als die Hälfte aller Internetnutzer mit dem Handy im Web – innerhalb von 5 Jahren also mehr als eine Verdreifachung der Zeit, die User mit ihrem Smartphone online sind. Die Zahlen bedeuten natürlich nicht, dass die Nutzer ausschließlich das Smartphone verwenden. Doch es ist das bevorzugte Gerät für die Internetnutzung, neben Desktop-PC, Notebook, Spielekonsole oder Smart-TV.

Du könntest jetzt behaupten, dass es unerheblich ist, wie die Menschen im Internet unterwegs sind, solange sie auf deine Website kommen. Tatsächlich gelten jedoch für die mobile Internetnutzung andere Voraussetzungen als für das Surfen mit dem PC. Das ist auch nicht verwunderlich: Nutzer haben weder Tastatur noch Maus und einen deutlich kleineren Bildschirm. Je nach Region ist die Internetverbindung mit dem Smartphone im mobilen Internet deutlich langsamer als über Breitband.

Das alles führt dazu, dass mobile Internetnutzer kurze Ladezeiten und eine einfache Bedienung schätzen. Mobile Optimierung bedeutet somit primär UX- und Content-Optimierung kombiniert mit technischer Optimierung.

Mobile Websites sind nicht nur für zufriedene Nutzer wichtig, sondern auch für Google. Spätestens seit dem 21. April 2015 zeigt Google, wie wichtig die mobile Optimierung von Websites ist. Denn seither ist „mobile friendly“ ein Rankingfaktor. Schon ein Jahr später hat Google sein „Mobile Update“ aka “Mobilegeddon”) nochmals optimiert. Der Page Speed wurde schließlich 2018 zu einem Rankingfaktor für mobile Webseiten. Im gleichen Jahr startete Google schließlich sein „Mobile-First-Indexing“. Die mobile Version einer Website wird seither bevorzugt indexiert.

Deine Nutzer und Google zeigen Dir also, wieso Deine Website mobile friendly sein sollte. Und wir zeigen Dir jetzt, worauf es dabei ankommt.

Ist meine Website schon mobile friendly?

Auf dem Markt gibt es inzwischen zahlreiche kostenlose und kostenpflichtige Werkzeuge und Software-Tools, die Dir bei der Analyse zum mobile-friendly-Check Deiner Website behilflich sein können. Eine kostenlose Website-Analyse kann beispielsweise bei Ryte durchgeführt werden. Wenn man das Tool kostenpflichtig nutzt, können zudem noch tiefgreifendere Analysen mit der Single Page Analyse durchgeführt werden.

Abbildung 1: Ausschnitt der Mobile Insights aus der Ryte Single Page Analyse

Wenn Du Dir nicht sicher bist, ob Deine Internetseite mobile friendly ist, führst Du den Mobile-Friendly-Check von Google durch.

Abbildung 2: Mobile-Friendly-Test mit Google

Grundlagen für Deine mobile Website

Für die mobile-friendly-Optimierung kommen in der Praxis meist drei Varianten zur Anwendung.

1. Responsive Webdesign (RWD)

Diese Variante ist eine eine State of the Art Technik für mobile Webseiten. Der HTML-Code ist sowohl für die Desktop-Seite als auch für Smartphones derselbe. Per CSS werden die Inhalte sowie das Layout der mobilen Seite an den Bildschirm des Endgeräts angepasst.

Die Vorteile: Der Aufwand für die Seitenpflege ist gering, da Du nur eine Version pflegen musst. Es gibt außerdem nur eine URL, die für alle Arten von mobilen Geräten wie Smartphones oder Tablets geeignet ist, was wiederum Ressourcen beim Crawling durch den Googlebot spart. Es ist keine Weiterleitung erforderlich, um zu einer optimierten Ansicht für das jeweilige Gerät zu gelangen. Dadurch fallen die Ladezeiten deutlich geringer aus. Außerdem ist eine solche Weiterleitung meist fehleranfällig und kann sich negativ auf die Nutzerfreundlichkeit der Webseite auswirken.

Die Nachteile: Du kannst die mobile Seite nicht individualisieren oder speziell von der Desktop-Version abheben.

Abbildung 3: Beispiel für Responsive Webdesign

2. Dynamic Serving

Bei dieser Variante werden mobile Webseiten mit einem auf den User-Agent zugeschnittenen Code (HTML und CSS) ausgeliefert. Die URL bleibt gleich, unabhängig davon, ob Du die Website mit dem Smartphone oder Rechner aufrufst.

Die Vorteile: Es gibt nur eine URL für alle Geräte und Du kannst die Spezifikationen für das entsprechende Ausgabegerät auf der Basis des User-Agents sehr genau festlegen.

Die Nachteile: Durch die Ausgabe von Code-Varianten musst Du mehr Seitenpflege betreiben und vor allem bei Änderungen viele Details beachten.

3. Mobile-optimierte Subdomain

In diesem Fall erhält die mobile Seite eine eigene URL, die der URL einer Desktop-Version entspricht. Die Inhalte können auf der mobilen Website wie auf der Desktop-URL die gleichen sein, müssen es aber nicht. Üblicherweise werden zwei verschiedene HTML-Codes ausgegeben. Auf der Desktop-Variante und der mobilen Seiten werden rel=alternate-Tags eingefügt, um auf die jeweils andere Version zu verweisen.

Die Vorteile: Du kannst die mobile Seite perfekt auf das Ausgabegeräte optimieren.

Die Nachteile: Der Programmier- und Pflegeaufwand ist deutlich höher als bei den vorhergehenden Möglichkeiten. Du musst praktisch zwei Seiten pflegen.

Google selbst empfiehlt Responsive Webdesign als Lösung für Mobile SEO. Die Vorteile gegenüber den beiden anderen Optionen haben wir Dir noch einmal zusammengestellt:

• geringerer Pflegeaufwand

• eine URL für alle Geräte

• sehr flexibel, da die Website grundsätzlich für viele verschiedene Ausgabegeräte geeignet ist

• Gefahr von fehlerhafter Konfiguration geringer

• URLs lassen sich einfacher teilen

• der Googlebot spart Ressourcen

So zeigst Du Google, dass Deine Seite mobile friendly ist

Beim Crawlen kann der Googlebot erkennen, ob Deine Website mobile friendly ist:

Alternativen zur mobilen Website: PWA, AMP & Apps

Neben der bevorzugten Variante des responsive Webdesigns kommen natürlich noch weitere Optionen in Frage.

Du kannst für die mobile Optimierung auch Progressive Web Apps (PWA) oder Accelerated Mobile Pages (AMP) einsetzen. Diese Seiten sind von Grund auf mobile friendly und bieten verschiedene Vorteile.

AMP kommen ebenso wie PWA mit einem sehr schlanken Quellcode aus. Während AMP vor allem durch Schnelligkeit überzeugen, bieten PWA Funktionen wie native Apps. Sie können zum Beispiel als Icon wie eine App auf dem Handyscreen abgelegt werden. Einen Step-by-Step-Guide zu AMP findest du hier.

Beide Varianten haben jedoch den Nachteil, dass sie sich nicht in hohem Maße und vergleichbar mit responsiven Websites individualisieren lassen.

Apps sind in der Regel flexibler, da sie auf die verschiedenen Betriebssysteme der einzelnen Endgeräte ausgerichtet sind und können daher auch auf eine Menge Features des entsprechenden Gerätes zurückgreifen. Zu beachten ist jedoch, dass für die Entwicklung einer App sowohl mehr interne Ressourcen als auch Kosten eingeplant werden müssen.

Wir werden in weiteren Guides auf diese Formen der mobile Optimierung sowie auf App Indexing eingehen. An dieser Stelle seien diese Varianten der Vollständigkeit halber nur kurz erwähnt.

Page Speed Optimierung für mobile friendly Websites

Um die dann den mobilen Page Speed zu verbessern, gibt es verschiedene Anhaltspunkte:

• Entferne JavaScript oder CSS, welches das Rendern blockiert.

• Nutze Browser-Caching. Dabei werden konstante Elemente wie z.B. CSS für das Layout im Cache des Browsers zwischengespeichert. Sie müssen dann nicht bei jedem erneuten Seitenaufruf oder Weiterklicken auf der Seite neu geladen werden.

• Komprimiere Deine Bilder. Wie Du [Bilder komprimieren kannst, zeigen wir Dir hier](http://</li> <p>).

• Entferne überflüssigen HTML-Code. Das können zum Beispiel Kommentare sein, die nicht mehr benötigt werden.

Content- und Layout-Tipps für Deine mobile-friendly Seite

Der größte Unterschied zwischen dem Aufruf einer Website mit dem Smartphone oder dem Desktop besteht in den unterschiedlichen Bildschirmgrößen und der damit verbundenen Bedienung der Seite.

Deshalb solltest Du bei der mobilen Optimierung darauf achten:

1. Biete dem User die Inhalte an, die auch wirklich benötigt werden. Stelle Dir also die Frage, ob es auf der Website Inhalte gibt, auf die du verzichten oder die Du einfacher darstellen kannst. Verwende dabei kurze Sätze. Wichtig dabei: Desktop = Smartphone – die Websites sollten dieselben Inhalte aufweisen.

2. Platziere Touch-Elemente nicht zu dicht nebeneinander: Deine Nutzer werden die mobile Website über den Touchscreen mit den Fingern bedienen. Ist der Platz zwischen einzelnen Bedienelementen zu klein, ist die Seite schwer zu nutzen, weil ein Finger zum Beispiel zwei Elemente auf einmal trifft.

Tipp: Empfehlenswert ist ein Abstand von mindestens fünf Millimetern zwischen Touch-Elementen. Jedes Element sollte dabei mindestens sieben Millimeter hoch sein.

3. Formatiere Eingabeformulare am besten mit relativen Größen: Eingabefelder für Adressen oder andere Daten sollten sich dem Bildschirm anpassen. So verhinderst Du zum Beispiel, dass Nutzer seitwärts scrollen müssen, um ein Formular auf dem Handy auszufüllen.Die Eingabefelder sollten auf einem mobilen Gerät möglichst groß und übersichtlich gestaltet werden, damit es dem Nutzer leicht fällt, Eingaben zu machen und er so schneller ans Ziel kommt.

4. Verwende so wenig verschiedene Schriftarten wie möglich: Je einheitlicher das Schriftbild ist, desto besser können Texte auch auf kleinen Bildschirmen gelesen werden.

5. Achte auf eine ausreichende Schriftgröße: Google selbst empfiehlt Schriftgröße 16 als Basis. Diese wird in CSS-Pixeln definiert. Die Definition der CSS-Klasse für die Schriftgröße kann so aussehen:

body {font-size: 16px;}

Möchtest Du weitere Schriftgrößen verwenden, können diese dann in Relation zur Basis angegeben werden:

.small {

font-size: 12px; /* 75% of the baseline */

}

Wenn Du eine responsive mobile Website verwendest, bist Du ohnehin im Vorteil. Denn durch den viewport-Tag werden Pixel unabhängig vom jeweiligen Ausgabegerät dargestellt.

Häufige Fehlerquellen bei der Optimierung für mobile-friendly

1. Blockierte JavaScript-, CSS- und Bilddateien:

JavaScript-, CSS- und Bilddateien sind für den Googlebot nicht indexierbar: Werden wichtige Dateien von der robots.txt blockiert, kann der Googlebot Deine Website nicht korrekt crawlen und somit auch nicht korrekt indexieren. Deshalb solltest Du das Crawling von allen Dateien zuzulassen, die für das Rendering der Webseite nötig sind. Mit Ryte kannst Du die robots.txt kostenlos testen.

2. Nicht abrufbare Inhalte:

Manche Webdesigner verwenden immer noch Flash. Diese Inhalte können von Smartphones jedoch nicht wiedergegeben werden.

3. Fehlerhafte Weiterleitungen:

Weiterleitungen funktionieren nicht: Das gilt vor allem dann, wenn Du eine mobile URL verwendest. Häufig vergessen Webmaster im Quellcode den Verweis auf die mobile Version per rel=alternate.

4. Irrelevante interne Weiterleitungen:

Auch interne Links sollten regelmäßig überprüft werden und der Webseitenbetreiber sollte darauf achten, ob sie auf die korrekten Seiten verweisen. Häufig wird hier der Fehler gemacht, Links zu integrieren, die auf eine irrelevante Seite verweisen, also zum Beispiel Links auf mobilen Seiten, die auf die Startseite der Desktop-Webseite verweisen.

5. Die verwendeten Bilder sind zu groß: Wenn Du vergessen hast, die Bilder Deiner Website zu komprimieren, wirkt sich das negativ auf die Ladezeit Deiner mobilen Website aus.

6. Du hast den viewport-Tag vergessen:
In diesem Fall müssen Nutzer horizontal scrollen, um Inhalte erfassen zu können. Dadurch wird die Usability enorm beeinträchtigt.

Einen umfangreichen Guide zur mobilen Optimierung kannst Du hier als E-Book herunterladen.

Mobile friendly ist nur ein Teil der Suchmaschinenoptimierung

Auch wenn Du jetzt einen kompletten Mobile SEO Guide durchgelesen hast, solltest Du immer bedenken, dass die mobile Optimierung nur ein Teil Deiner SEO-Maßnahmen ist. Denn unabhängig von der Darstellung der mobilen Website auf Smartphones oder Tablets zählen für Nutzer und Google weiterhin einzigartige Inhalte mit Mehrwert. Trotz oder gerade mit mobile SEO im Kopf solltest Du deshalb mindestens ebenso viel Zeit in großartige Inhalte investieren, um damit Top-Rankings zu erzielen und Deine Nutzer zu begeistern.