Bereits 2015 hat Google Mobile Friendly als Rankingfaktor eingeführt, da schon damals ein Großteil der Menschen mit ihrem Smartphone das World Wide Web durchkämmte. Im Jahr 2020 wurden laut Statista rund 80% aller Suchen über ein mobiles Endgerät gestellt.
Das Problem: Nicht alle Websites waren bereits für mobile Bildschirmauflösungen optimiert, sodass das Ergebnis der Suche nicht immer gute Ergebnisse auswarf. Mit der Einführung des neuen Suchalgorithmus (Mobile First Index) und der kompletten Umstellung der Indexierung im März 2021 hat Google dieses Problem lösen können.
Durch die Umstellung passen sich die Suchergebnisse unserem sich stetig verändernden Konsumverhalten an. Die Suchmaschine stellt sich somit auf unsere Bedürfnisse und Anforderungen ein. Ein netter Nebeneffekt für Google ist, dass das Crawling von zwei Bots auf einen Bot heruntergefahren wird, was vor allem Rechenleistung und somit auch Strom spart. Seitenbetreiber werden somit gezwungen, das Design mobilfreundlich zu machen, denn die, die es nicht sind, werden aus dem Index verschwinden – ein vorangetriebener Darwinismus im SEO-Universum. Schlussendlich verdient Google nur dann Geld, wenn das Erlebnis bei der Suche auch stimmig ist und Menschen Google als Suchmaschine nutzen.
Mobile Friendly, Mobile First oder Mobile Only – Was ist was?
Die im Raum schwebenden Begriffe beschreiben die Mobiltauglichkeit für unterschiedliche Ausgabegeräte und Bildschirmauflösung. Es soll jedem Internetnutzer die Möglichkeit gegeben werden, Deine Website mit einem Mobilgerät zu erleben.
Mobile First
Technisch betrachtet bedeutet “mobile-first indexing”, dass Google ausschließlich den mobilen Googlebot zum Crawlen und Indexieren Deiner Seite verwenden wird. Inhalte, die nicht mobil gelesen werden können, werden vom Suchalgorithmus nicht beachtet und haben somit keine Bedeutung mehr.
Mobile Friendly
Die Mobilfreundlichkeit einer Website hat der Betreiber immer selbst in der Hand. Hierbei spielen Design und Programmierung die entscheidende Rolle dabei, wie sich Deine Seite auf mobilen Endgeräten verhält. Je intuitiver und verständlicher Deine Seite ist, desto mobilfreundlicher ist sie. Bedenke, dass ein Großteil aller Suchanfragen mobil gestellt wird, dies ein Rankingfaktor ist und Google ausschließlich über den Smartphone Bot crawlt. Es führt also kein Weg an Mobile Friendly vorbei, wenn Du weiterhin von der Indexierung durch Google profitieren möchtest.
Mobile Only
Der Begriff Mobile Only ist vor allem durch einen Tweet von John Mueller geprägt:
„I'm thinking we should just rename it to mobile-only indexing to make it clearer.”
Persönlich finde ich das Wording Only besser als First, denn Mobile First würde im Umkehrschluss immer implizieren, dass eine Desktopvariante als Fallback genutzt werden kann, was definitiv nicht der Fall ist.
Wie kann eine Mobile Friendly Website aufgebaut sein?
Mobile Friendly bedeutet nicht, dass Deine Website ausschließlich für mobile Ausgabegeräte optimiert ist, sondern vielmehr eine durchweg funktionierende und lesbare Seite für alle Darstellungsgrößen.
Um das zu erreichen, stehen Dir 3 Methoden zur Verfügung, wobei nur Responsive Design als Best-Practice gilt:
Responsive Design
Responsives Webdesign gehört zu den am häufigsten verwendeten Varianten. Dabei werden über CSS die Inhalte entsprechend der jeweiligen Darstellungsbereiche modifiziert. Werden auf großen Ausgabegeräten wie Desktop-PCs beispielsweise 6 Bilder nebeneinander angezeigt, so reduziert sich die Zahl auf 1 Bild je Reihe auf mobilen Bildschirmen. Es handelt sich um denselben HTML-Code. Diese Methode wird von Google bevorzugt, da der Ansatz sehr leicht zu implementieren ist.
Dynamic Serving
Je nachdem, welcher Gerätetyp auf eine URL zugreift, werden unterschiedliche Inhalte angezeigt. Die dynamische Bereitstellung von Inhalten ist technisch sehr aufwendig und lohnt sich erst bei sehr komplexen Projekten.
Desktop und Mobile URL
Abhängig vom Endgerät werden Internetnutzer auf unterschiedliche URLs weitergeleitet. Kommt der Smartphone Bot auf Deine Seite wird er beispielsweise auf m.meineurl.de weitergeleitet. Das m in der Subdomain steht hier für mobile. Heute ist diese Methode eher als obsolet zu betrachten und kein Best-Practice mehr.
Mobile User Experience und Optimierung für Suchmaschinen
Logischerweise ist der Platz für Content und Design auf Mobilgeräten beschränkter als auf einem Desktop-PC. Wenn Du also einen Blog-Artikel mit mehreren tausend Wörtern veröffentlichst, sieht dieser auf einem Desktop-PC aufgeräumt aus, aber auf Mobilgeräten eher erschlagend. Für Langform-Inhalte gilt somit, dass Du besser kürzere Abschnitte nutzt und diese mit Medien und Grafiken auflockerst. Die unteren Punkte helfen Dir bei der Optimierung.
Schriftgröße
Google empfiehlt eine Fließtextgröße (Bodytext) von mind. 16px. Somit stellst Du sicher, dass Deine Inhalte auch ohne Zoomen lesbar sind.
Schriftarten
Je mehr Schriftarten und Schriftschnitte Du verwendest, desto länger wird zum Laden Deiner Seite benötigt. In der Regel ist es ausreichend, wenn Überschriften und Bodytexte aus zwei unterschiedlichen Schriftarten bestehen, um den Kontrast zu erhöhen. Dies erleichtert das Identifizieren und verbessert den Lesefluss. Für den Bodytext benötigst Du dann nur einen Schnitt mit Bold und Italic.
Struktur von Überschriften
Eine gegliederte Struktur ist enorm wichtig. Sie hilft dabei Texte und Inhalte besser zu verstehen. Visuell müssen sich Überschriften voneinander unterscheiden, damit eine Gewichtung zu erkennen ist. Eine H1 sollte wesentlich größer sein als eine H4. Wenn Du die Hierarchie von Überschriften und Fließtexten über Größen definieren möchtest, kann ich Dir Type-Scale für einen schnellen Überblick empfehlen. Hier skaliert man – vom Fließtext ausgehend – die nächstgrößere Schrift immer mit dem Faktor 1.25.
Richtige Abstände
Damit Deine User beim Lesen nicht zwischen den Zeilen hin und her rutschen, muss der Abstand entsprechend groß sein. Die W3C empfiehlt 150% der verwendeten Schriftgröße als Zeilenabstand. Das räumt ausreichend Spiel zwischen den Zeilen ein. Twitter Bootstrap nutzt beispielsweise 142% und medium.com 157% für den Bodytext. Bei einem Bodytext von 16px wäre der Zeilenabstand 24px (16*1.5=24).
Inhalte
Nicht nur Texte, sondern auch andere Elemente müssen beim Runterskalieren von Desktop auf Mobile angepasst werden. Dabei kannst Du auf vertikales und horizontales Scrolling zurückgreifen oder Inhalte zum Gliedern in Tabs verbauen. Dies erleichtert das Erfassen von Inhalten auf kleineren Bildschirmen.
Buttons und Link
Links in Texten werden meist durch einen Unterstrich und eine Signalfarbe (häufig blau hervorgehoben).
Bei Buttons spielt die Größe und der Abstand eine enorm wichtige Rolle in der Usability. Liegen die Flächen zu dicht zusammen, läufst Du Gefahr, dass der richtige Button nicht geklickt wird. Ist die Größe des Buttons zu klein, braucht man ggf. mehr Anläufe, um diesen zu treffen. Bei beiden Beispielen ist eine negative Nutzererfahrung vorprogrammiert, welche Auswirkungen auf die Benutzung Deiner Website hat.
Als Grundlage dient das Paul Fitts’ Gesetz: Je kleiner ein Objekt ist, desto schwieriger ist es, dieses zu treffen.
Formulare
Gleiches gilt bei Formularen. Wenn die auszufüllenden Felder zu eng beisammen liegen, erschwert dies das Ausfüllen. Auch dem Feedback (Micro Interactions) nach dem Ausfüllen sollte ausreichend Platz eingeräumt werden. Weiß ein User nicht, dass er einen Fehler bei der Eingabe gemacht hat, wird er diesen nicht korrigieren können.
Kontraste
Jeder Mensch kann temporär eingeschränkt sein. Stell Dir vor, dass Du mit Deinem iPhone bei schönem Wetter draußen im Park sitzt und die Sonne auf Dein Display scheint. Durch die starke Spiegelung sind Inhalte – sofern der Kontrast nicht hoch genug ist – nicht mehr lesbar.
7 Prinzipien guter Usability für mehr Mobiltauglichkeit
Eine gute Usability erreichst Du beim Befolgen der 7 Prinzipien des Universal Designs. Die Idee dahinter stammt aus dem letzten Jahrhundert und soll ein größtmögliches Spektrum an Nutzern mit unterschiedlichen Eigenschaften abdecken.
1. Breite Nutzbarkeit
Eine Website soll so gestaltet sein, dass sie von möglichst vielen Menschen gleich wahrgenommen werden kann – unabhängig von demografischen oder körperlichen Merkmalen. Vom Aufbau her würde man oben eine Navigationsleiste erwarten, direkt darunter den sich ändernden Content und zum Schluss den Footer. Diese Struktur ist von den meisten Menschen so erlernt und würde eine breite Nutzbarkeit garantieren.
2. Flexible Nutzbarkeit
Gemessen an Deiner bevorzugten Zielgruppe, muss die Website eine Großzahl individueller Vorlieben abdecken. Im User Interface Design würde ein Mac-User den OK-Button eher rechts neben dem Abbrechen-Button erwarten und ein Windows-User umgekehrt.
3. Intuitive Nutzbarkeit
Im Fokus steht die intuitive Anwendbarkeit, egal wie webaffin ein Mensch ist oder nicht. Deine Seite sollte leicht zu verstehen sein – auch bei Übermüdung.
4. Sensorische Wahrnehmung
Elemente auf Websites müssen durch Ihre Feedbackmechanik eine verständliche Nutzung garantieren. Dies kommt häufig bei Formularen zum Tragen, die Rückmeldung geben, falls ein Feld nicht korrekt ausgefüllt wurde. Um ein haptisches Feedback zu imitieren, greift man gern auf Micro Interactions zurück. Wie Micro Interactions aussehen und funktionieren, findest Du beispielhaft dargestellt bei „Material Design.“
5. Fehlertoleranz
Risiken bei der Anwendung einer Website werden weitestgehend minimiert und dürfen keine negative Auswirkung haben. Wird im Checkout beim zufälligen Nach-Unten-Ziehen die Seite aktualisiert, sodass die eingetragenen Daten weg sind, hat dies negative Auswirkungen und die Frustration steigt.
6. Niedriger Aufwand
Wichtige Inhalte müssen ohne großen Aufwand schnell zu finden sein. Je größer die Umwege sind, desto höher der investierte Aufwand. Möchtest Du als Beispiel wissen, wie Du einen Artikel retournieren kannst, muss dies klar und schnell zu finden sein – unabhängig vom Endgerät.
7. Größe und Platz für Nutzung
Anatomisch betrachtet ist jeder Mensch einzigartig. Dies betrifft auch die Breite der Finger und sollte bei der Größe von Buttons unbedingt beachtet werden. Sind Deine Buttons zu klein, können Menschen mit breiteren Finger Deine Seite nur schwer bedienen.
Wie kann ich prüfen, ob meine Seite Mobile Friendly ist?
Um zu prüfen, ob Deine Website mobilfreundlich ist, kannst Du einfach das Google-eigene Testtool verwenden.
Der Mobile Friendly Test zeigt Dir nicht nur wie Google Deine Seite rendert, sondern auch ob der Smartphone User Agent Probleme hat und Teile Deiner Seite durch die robots.txt blockiert sind. Ein typischer Fehler bei der Optimierung für mobile Ausgabegeräte ist das Blockieren von JavaScript und CSS-Dateien. Das hat zur Folge, dass der Googlebot Deine Seite nicht korrekt lesen kann. Da dieser Test nur je eingegebene Seite zu betrachten ist, müsstest Du alle Seiten Deines Projektes hier testen.
Zu dem oberen Test-Tool gibt es noch die Möglichkeit, Deine Seite über Google Lighthouse zu testen. Dieser Test löste vor einiger Zeit Google Page Speed Insights ab und kommt – zumindest als Chrome Extension – mit einigen hilfreichen Hinweisen daher. Unter den Testings SEO und Accessibility werden Schriftgröße und Kontraste geprüft. Dabei orientiert sich der Test sehr stark an den Web Content Accessibility Guidelines (WCAG) der W3C.
Ein Usability-Test in Auftrag zu geben, ist in den meisten Fällen sehr kostspielig und eignet sich eher auf Applikationen oder Geräten, die per Bildschirm bedient werden. Alternativ kannst Du auch mit Freunden und Familie einen Usability-Test machen. Dieser kostet zwar mehr Nerven, bringt Dir aber trotzdem ein gutes Feedback.
Ob Deine Seite bereits vom Google Mobile-Friendly Update betroffen ist, kannst Du am besten mit Tools wie Sistrix herausfinden. Der dort angezeigte Sichtbarkeitsindex gibt Dir Aufschluss darüber, ob Deine Seite nach einem Update an Sichtbarkeit verloren hat. Mit Hilfe von SEO-Werkzeugen wie Ryte lassen sich zudem Seiten aus Sicht des Smartphone- Bots crawlen. Dort angezeigte Fehler sollten natürlich behoben werden.
Stolpersteine bei mobilfreundlichen Websites
Häufige Fehler bei der Entwicklung von Mobile Friendly Websites sind:
1. Blockierte JavaScript-, CSS- und Bilddateien
Der Googlebot muss all Deine Inhalte lesen dürfen. Nur so kann gewährleistet werden, dass Google Deine Website wie ein echter Besucher sieht.
2. Nicht abrufbare Inhalte
Darunter zählen beispielsweise Videos, die über Flash eingebunden sind. Flash selbst wird nicht mehr unterstützt und kann entsprechend nicht mehr interpretiert werden.
3. Fehlerhafte Weiterleitung
Wer noch mit Desktop und Mobile URLs arbeitet muss diese auch korrekt weiterleiten. So muss die URL beispiel.de/info auch korrekt auf m.beispiel.de/info weiterleiten und nicht auf die Startseite.
4. Keine Interstitials
Elemente, die den Inhalt Deiner Website verdecken, sind für Nutzer eher störend. Verzichte im besten Fall auf Overlays, sondern platziere Formulare und Newsletterfelder sinnvoll.
5. Page Speed
Zwar wird das Mobilfunknetz immer weiter ausgebaut und stetig verbessert, doch die Ladegeschwindigkeiten unter Voraussetzung von 3G und darunter sind nicht besonders gut. Achte darauf, dass Deine Inhalte schnell geladen werden, da Du sonst Gefahr läufst, dass Nutzer schnell von Deiner Seite abspringen. Mehr über PageSpeed findest Du im OMR Glossar.
6. Darstellungsbereich richtig festlegen
Selbst wenn Deine Seite durch CSS optimal definierte Breaks hat, damit sich Elemente je nach Bildschirmgröße anpassen, können lange Wörter wie Schifffahrtsgesellschaft hässlich umbrechen oder gar über den Bildschirmrand hinauslaufen. Verwende hierfür den bedingten Trennstrich mit ­
Zur Prüfung der einzelnen Darstellungsbereiche kannst Du auch die Entwicklertools von Chrome oder Firefox nutzen.
Résumé Mobiltauglichkeit
Das Smartphone hat in vielen Belangen den Desktop-PC abgelöst. Auch Google als größte Suchmaschine der Welt hat dies erkannt und sich auf die Bedürfnisse der Suchenden eingelassen. Mobile Friendly ist ein konsequent weiter gedachtes Prinzip, welche Anforderungen wir an eine Website stellen dürfen und müssen. Durch den Mobile First Index ist jeder Seitenbetreiber gezwungen, seine Seite für alle möglichen Ausgabegeräte zu optimieren. Für Webseitenbetreiber und Webdesigner ist die Mobiltauglichkeit ab sofort der Status Quo. Man darf dies jedoch nicht als auferlegte Doktrin von Google sehen. Vielmehr ist es ein wichtiger Schritt Richtung barrierefreies World Wide Web, wo jedem, unabhängig seiner individuellen Vorlieben, der Zugang zu Websites garantiert wird.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
