Der Ansatz „mobile first“ ist im Webdesign inzwischen gängige Praxis. Bereits seit einigen Jahren verzeichnen Suchmaschinen mehr Zugriffe auf Webseiten und mehr Suchanfragen über Mobilgeräte. Desktop-PCs rücken immer weiter in den Hintergrund. Online-Branche und Webdesigner reagieren auf diese Entwicklung und stellen mobilzentrierte Konzepte in den Fokus. Dies betrifft sowohl das Erscheinungsbild als auch die Performance und die Nutzererfahrung auf der Webseite.
Mobile First im Überblick: ein moderner Ansatz im Webdesign
Bereits vor sechs Jahren, im Jahr 2015, meldete Google, dass mehr Suchanfragen über mobile Endgeräte als über den klassischen PC erfolgen. Mit modernen mobilfokussierten Vorgehensweisen reagiert die Internet-Branche seither auf diesen Trend. Damit verbunden ist ein Wandel der Prinzipien im Webdesign. Mobile Endgeräte wie Smartphones und Tablets gewinnen immer mehr an Bedeutung und stellen andere Anforderungen an Darstellung und Performance als Desktop-Geräte. Der Mobile-First-Ansatz trägt diesen Kriterien Rechnung. Webdesigner passen Internetseiten an die neuen Herausforderungen an.
Dies betrifft nicht nur die Gestaltung, sondern auch die Navigation, die Usability und die Performance der Seiten. Der Mobile First Ansatz setzt im Sinne besserer Performance und kürzerer Ladezeiten in erster Linie auf eine schlanke Struktur, die auf das Wesentliche beschränkt ist.
Beim Mobile First Ansatz erfolgt zunächst eine Auslegung und Optimierung der Seite auf die mobile Darstellung. Erst im nächsten Schritt kommt es zur Erweiterung der Seite für die Darstellung an Desktop-Browsern. Vor dem Mobile First Ansatz war es üblich, dass Programmierer und Webdesigner zunächst den Fokus auf die Desktop-Seite legten. Erst danach wurde die Seite auf die mobile Nutzung angepasst. Im Zuge der Mobile First Strategie kommt es zu einer Umkehrung der Schwerpunkte in diesem Workflow. Die Priorität liegt nun auf der mobilen Darstellung. Dies hat auch und insbesondere Auswirkungen auf die Ausgestaltung der Navigation sowie der technischen Infrastruktur der Webseite.
Stellenwert und Relevanz des Mobile First Ansatzes
Die enorme Wichtigkeit der mobilen Optimierung der Webseite ergibt sich bereits aus den Nutzerzahlen. Längst ist mobile Internetnutzung der Hauptmarkt, während Desktop-Zugriffe seltener erfolgen. Der mobile Datenverkehr entspricht der Mehrheit. Zwar ist auch die Desktop-Nutzung nicht zu vernachlässigen, doch spricht der mobile Traffic für eine primär mobile Optimierung.
Die auf das wesentliche reduzierte, schlanke Struktur einer mobil optimierten Webseite ermöglicht jederzeit später eine Anpassung sowie den Einbau neuer Entwicklungen und Erweiterungen.
Neue Kriterien der Nutzerfreundlichkeit für Mobilgeräte
Eine mobile Internetseite ist mit anderen Ansprüchen an die Nutzerfreundlichkeit beziehungsweise Usability verbunden als die Desktop-Variante. Unabhängig von der Displaygröße oder dem mobilen Betriebssystem haben mobile Internet-User bestimmte Anforderungen an die Webseite. Diese werden spätestens seit dem Google mobile-Update auch in der Suchmaschinenoptimierung immer wichtiger. In den Suchergebnissen tauchen bei identischen Suchanfragen beim mobilen Zugriff andere Ergebnisse beziehungsweise andere Reihenfolgen in den SERPs auf als beim Desktop-Zugriff.
Zu den wesentlichen Kriterien der mobilen Suchergebnisse gehört der lokale Suchkontext. Über Smartphones suchen Nutzer beispielsweise häufiger gezielt nach Öffnungszeiten lokaler Geschäfte oder Restaurants. Ein weiterer zentraler Parameter des Mobile First Ansatzes ist der Fokus auf entsprechende Inhalte. Mobile First bedeutet auch Content First. Die Inhalte werden ebenso wie die Darstellung auf ein optimiertes mobiles Nutzererlebnis ausgerichtet. Dabei spielen insbesondere einfache Lesbarkeit sowie kurze und prägnante Inhalte eine Rolle. Auch übersichtliche Strukturen verbessern die mobile Darstellung und mit ihr das Ranking in den Suchergebnissen.
Schnelle Auffindbarkeit der Inhalte
Eine der wichtigsten Voraussetzungen ist es, dass Inhalte schnell auffindbar sind und für Nutzer bereitstehen. Nutzer, die mobil auf eine Seite zugreifen, zeigen nur dann eine hohe Akzeptanzrate und Verweildauer, wenn sie die gewünschten Inhalte gleich finden. Sind die Inhalte nicht mobiloptimiert, riskieren Sie daher eine hohe Absprungrate beziehungsweise Bounce Rate. Diese wirkt sich negativ auf das Ranking in den Suchergebnissen aus. Content First bedeutet jedoch nicht, dass Inhalte weniger reichhaltig ausfallen sollten. Weiterhin ist so genannter Rich Content gefragt.
Elemente wie Bilder, Grafiken und andere Komponenten sind weiterhin relevant. Doch sollen die Texte so gegliedert und aufbereitet sein, dass sie sich auch auf kleineren Displays konsumieren lassen. Medien, Bilder und Videos sind technisch so auszugestalten und aufzubereiten, dass sie einerseits schnell geladen werden können und andererseits auf mobilen Displays ein attraktives Erscheinungsbild haben.
Mobile friendly: wann ist eine Seite mobilfreundlich?
Wenn Sie den Ansatz Mobile First erfolgreich verfolgen, ergibt sich eine Seite, die von Suchmaschinen als mobilfreundlich erkannt werden. Der Begriff der Mobilfreundlichkeit ist insbesondere vor dem Hintergrund der SEO relevant. Ob Google und andere Suchmaschinen eine Seite als mobile friendly einstufen, können Sie anhand des Google Webmaster Tools testen. Anhand der URL der mobiloptimierten Seite testet dieses Werkzeug, ob der Google Crawler die Seite tatsächlich als mobile friendly erkennt und ob alle wesentlichen Parameter berücksichtigt sind.
Mobile friendly ist eine Seite, wenn die Inhalte (inklusive der Medien) kurze und schnelle Ladezeiten haben. Sie müssen zudem schnell vom Leser zu erfassen sein. Die Inhalte sollten sich an die Displaygröße und das Betriebssystem anpassen, also responsiv sein. Weiterhin müssen Links jederzeit lesbar und reibungslos anklickbar sein. Idealerweise führen auch die Links zu Seiten beziehungsweise Inhalten mit kurzen Ladezeiten.
Nicht mobilfreundlich ist eine Seite, wenn die Inhalte nicht korrekt dargestellt werden. Insbesondere zu kleine Schriftarten und ein unleserliches Erscheinungsbild gelten als mobile unfriendly. Weiterhin ist es nicht mobilfreundlich, wenn ungeeignete Software zum Einsatz kommt (beispielsweise Flash). Ein weiteres häufiges Phänomen nicht mobifreundlicher Seiten ist eine Linkstruktur, bei der die Links zu dicht nebeneinander stehen und sich daher kaum anklicken lassen. Weiterhin sind Inhalte oft zu breit für das Display, wenn der Ansatz Mobile First nicht verfolgt wurde.
Vorgehen des Webdesigners: Mobile First als Prinzip und Leitlinie
In einem ersten Schritt definiert der Webdesigner für Ihre Seite die wichtigsten Faktoren des Angebots. Dies betrifft einerseits Text, Medien und andere Inhalte. Aber auch Module, Elemente und Buttons sind hier zu berücksichtigen. Hierbei lautet der wesentliche Kerngedanke des Mobile First Ansatzes, sich auf das Wesentliche zu konzentrieren. Es soll nicht mehr Programmier- und Webdesign-Aufwand betrieben werden, als nötig.
Gleichzeitig ist beim Webdesign auf maximale Performance auf allen (mobilen) Endgeräten zu achten. Dazu tragen auch und insbesondere kurze Ladezeiten bei. Als Ergebnis genießen Nutzer einen schnelleren Zugriff auf die gewünschten Informationen.
Die Design-Entwürfe sind beim Mobile First Ansatz an die Anforderungen des Smartphone-Displays anzupassen. Auf große Elemente, Bilder und sonstige Objekte mit langer Ladezeit verzichtet der Webdesigner hierbei. Weiterhin wird der Webdesigner im Quellcode zahlreiche Kürzungen vornehmen.
Erst nachdem die optimale Lösung für die mobile Darstellung und Ausspielung designt wurde, kommt es zur Optimierung anderer Darstellungen. Nach dem Prinzip des progressive Enhancements (progressive Verbesserung) wird die Seite im nächsten Schritt skalierbar für eine größere Darstellung am Desktop. Dabei folgt die Umsetzung der Inhaltsdarstellung auf sämtlichen Geräten den Richtlinien des responsiven Webdesigns.