Mobile First: So optimieren Sie mobile Webseiten

Wie WirtschaftsWoche Online berichtet, nimmt der Anteil der Internetnutzer, die über Mobilgeräte surfen, immer weiter zu. 2018 machte ihr Anteil schon über 60 Prozent aus, Tendenz weiter steigend. Die Großen der Branche reagierten bereits auf diese Entwicklung. Google etwa implementierte mit seinem Mobile-First-Index im selben Jahr ein neues Ranking-Prinzip, das mobile Versionen von Websites zu seinem Bewertungsgegenstand macht. Damit entscheidet ab jetzt die Nutzerfreundlichkeit Ihrer mobilen Website über Ihren Platz in Googles Suchmaschinen-Ranking. Spätestens jetzt sollten Sie also Ihre Website für die mobile Nutzung optimieren, um den SEO-Super-GAU zu vermeiden. Was dabei zu beachten ist und wie es überhaupt dazu kam, stellen wir Ihnen im Folgenden vor.

Mobiltauglichkeit: Smartphone und Tablet geben den Takt vor

Von überall auf der Welt greifen Nutzer über Mobilgeräte auf das Internet zu. Selbst wenn sie es gar nicht müssten! Wie Google berichtet, erfolgen 77 Prozent der Suchanfragen über Mobilgeräte von zu Hause oder dem Arbeitsplatz aus – eine überraschende Zahl, da sich an diesen Orten in der Regel auch stationäre Computer befinden. Doch Smartphones und Tablets sind das Mittel der Wahl. Die „Mobile Usability“ (Mobiltauglichkeit) beschäftigt sich aufgrund der hohen Zugriffszahlen mit der Frage, wie gut eine Website von einem Mobilgerät genutzt werden kann.

Was früher ein eher zweitrangiges Thema war, ist seit knapp fünf Jahren in aller Munde: Webseiten müssen für mobile Endgeräte fit gemacht werden. Google führte schon 2015 das Mobile-Friendly Update ein, das die Mobiltauglichkeit („Mobile Usability“ oder „Mobile Friendliness“) zum Ranking-Faktor machte.

„Mobile-Friendly“ oder „Mobilegeddon“?

Der so veränderte Algorithmus setzte unvorbereiteten Webseiten hart zu: Waren diese nicht im Vorfeld für die mobile Nutzung optimiert worden, fielen sie im Ranking drastisch ab. Entsprechend wurde Googles Update auch als „Mobilegeddon“ betitelt. Einige Websites beklagten, im Zuge dessen rund zehn Prozent ihres Datentransfers verloren zu haben.

Im September 2018 dann drehte Google seinen Index auf links: Ausgangspunkt für die Bewertung ist nun nicht länger die Desktop-Version einer Seite, sondern die mobile Variante. Um auf dieses Mobile-First-Crawling zu reagieren, sollte es höchste Priorität haben, Webseiten für die Nutzung mit Mobilgeräten zu optimieren. Die Alternative sind herbe Verluste im Ranking.

UX Design ist Teil der Mobile-Optimierung

Die Optimierung hilft auch in Hinblick auf die „User Experience“ (UX, Nutzererlebnis). Sie hilft, Nutzer zufriedenstellen und möglichst lange auf der Seite zu halten. Denn genervte Nutzer sorgen für hohe Absprungraten, weniger Traffic und eine schlechte Gesamt-Performance einer Webseite. Sind die Nutzer hingegen glücklich über Darstellung und Bedienbarkeit der Seite, gibt es hohe Punktwerte bei der UX.

Paradigmenwechsel: Von der Desktop-Version zu Mobile First 

Nicht nur Google, sondern auch Webentwickler konzentrierten sich in der Vergangenheit besonders auf die Tauglichkeit ihrer Seite für Desktop-Nutzer. Webdesigns und -Layouts wurden im Hinblick auf die stationäre Nutzung konzipiert. Es war damals üblich, die mobile Version der eigentlichen Webseite dem Code nachträglich hinzuzufügen.

In Anbetracht der Entwicklungen bei der Nutzung von Mobilgeräten haben die Prioritäten jedoch mittlerweile die Plätze getauscht: Die Optimierung für Mobilgeräte hat bei der Entwicklung nun Vorrang.

Responsive Design als Instrument der Mobil-Optimierung

Schon früh sorgte der Boom mobiler Geräte für Schwierigkeiten: Seiten, die für Desktop-Bildschirme konzipiert waren, wurden auf den winzigen Smartphone-Screens zu Zwergen in der Performance. Abgeschnittene Bilder, lange Ladezeiten und ständiges Heran-Zoomen sorgten für ein schlechtes Nutzerlebnis. Um den veränderten Ansprüchen gerecht zu werden, entwickelte sich das sogenannte „Responsive Design“. Mit flexiblen Grids und CSS3 Media Queries passt es das Layout einer Internetseite zuverlässig an das jeweilige Ausgabemedium an. Es ist daher ein Weg, Websites für die Nutzung mit Mobilgeräten zu optimieren. Wie genau Sie dies einrichten, können Sie direkt bei Google nachlesen. Aber Achtung, dies erfordert Coding-Kenntnisse.

Mobile First vs. Responsive Webdesign

Strenggenommen bedeutet Mobile First im Webdesign, dass Elemente direkt anhand der Gegebenheiten eines Smartphones festgelegt werden. Vom Responsive Design im klassischen Sinne unterscheidet es sich daher in seinem Ausgangspunkt – auch wenn beide Ansätze dasselbe Ziel der Mobil-Optimierung verfolgen. Nur eben auf anderen Wegen. 

Bei Mobile First werden Inhalte von Beginn an auf die Nutzung von Smartphones aus optimiert. Der Smartphone-Bildschirm ist die Fläche, auf der das Layout zum ersten Mal Form annimmt. Inhalte werden radikal zusammengekürzt, denn nur das Wichtigste hat Platz auf dem kleinen Bildschirm.

Ausbau von Websites durch „Progressive Enhancement“

Durch Progressive Enhancement (zu Deutsch: progressive Verbesserung) kann man eine Website im Laufe der Zeit komplexer gestalten. Programme wie der Modernizr bieten die Möglichkeit, auszulesen, über welchen Browser auf die Seite zugegriffen wird. Entsprechend der Browserfeatures werden dann der Seite mehr Funktionen hinzugefügt bzw. es werden Funktionen deaktiviert.

Die Gretchenfrage: Wie erstellt man eine mobile Website?

Wer eine Website entsprechend des Mobile-First-Paradigmas gestalten will, sollte sich aufs Wesentliche beschränken. Funktionalität hat oberste Priorität. Um reibungslose Abläufe zu gewährleisten, sollten Sie daher Inhalte rigoros aussortieren. Das wirkt nicht nur übersichtlicher, sondern katapultiert Sie im Suchmaschinenranking nach oben.

Denn seit dem Google Speed Update von 2018 ist die Seitenladezeit auf Mobilgeräten ein offizieller Ranking-Faktor. Tipp: Google bietet für die Mobil-Optimierung von Websites sogar einen Leitfaden an und gibt mit einem SEO-Überblick Hilfestellungen zum Thema Auffindbarkeit bei mobilen Websites.

Generell gilt: Überlegen Sie, was wirklich wichtig ist und in den Vordergrund muss. Welche Elemente müssen unbedingt funktionieren? Auf große Bilder etwa sollte verzichtet werden. Dadurch ersparen Sie den Nutzern lange Ladezeiten und nutzen den begrenzten Platz besser aus. Bei der Konzeption bietet es sich an, Inhalte direkt auf die Bildschirmgröße auszulegen: Dafür eignen sich spezielle Raster von Websites im Smartphone-Format, die anschließend für größere Bildschirm-Formate umgerechnet werden.

Mobilfreundlichkeit ist im Web zum Thema Nummer eins geworden. Wer sich zeitnah anpasst, wird von großen Suchmaschinen wie Google und Bing durch die Chance auf hohe Plätze im Ranking belohnt. Einen Schritt weiter gehen Nutzer, die sich Mobile First auch bei der Webseitenkonzeption auf die Fahnen schreiben: Ihr Layout beginnt im Smartphone-Format und kann von dort aus wachsen.

Headerbild: RossHelen / iStock / Getty Images Plus