1. Mobile First: Darum ist es wichtig, die Mobile Version zu optimieren
Immer mehr Menschen nutzen ihr Smartphone zum Browsen im Internet. Doch einige Websites sind noch gar nicht für mobile User ausgelegt – die Seiten laden zu lange, Bilder werden nicht angezeigt oder die Schrift ist in der mobilen Ansicht kaum lesbar. Aber das kommt bei Usern nicht besonders gut an und führt meist dazu, dass sie deine Website verlassen.
All dies sind jedoch Dinge, die sich vermeiden lassen – und zwar durch die mobile Websiteoptimierung und das Konzept Mobile First. Was es genau damit auf sich hat und warum es so wichtig ist, deine Website für Benutzer mobile friendly zu gestalten, erklären wir dir im folgenden Artikel.
2. Was bedeutet Mobile First?
Mobile First ist ein Konzept für ein mobiloptimiertes Design von Websites. Dafür wird bei einer Website zuerst die mobile Version entwickelt und dann die Anpassung für den Desktop-Browser hinzugefügt.
Das heißt, erst wird eine reduzierte Version der Website mit einem einfacheren Coding Prozess kreiert und darauf aufbauend folgen die Erweiterungen per Media-Queries für größere Displays – es kommen mehr Layoutelemente und Funktionen dazu. Das Konzept dient der Reduzierung von Fehlerquellen bei der Websiteentwicklung und ermöglicht auf jedem Gerät das richtige Benutzererlebnis, was dir wiederum zufriedene User und mehr Klicks bringt!
3. Was ist das Problem bei dem bisherigen Ansatz?
Mit dem bisherigen Responsive Design läuft es andersrum, denn hier werden die Webinhalte an die Bildschirmgröße angepasst: Zuerst wird die Website für Desktop-Browser programmiert und entworfen. Erst dann kommt die mobile Version.
Der Nachteil ist, dass diese Anpassung nicht immer funktioniert und dadurch bestimmte Funktionen wegfallen, da die Website immer noch auf größere Bildschirme und schnellere Datenverbindungen ausgelegt ist. So haben User am Smartphone nicht das optimale Benutzererlebnis.
4. Relevanz der mobilen Optimierung für das Google-Ranking
Dass mobile Geräte immer wichtiger werden, macht sich auch bei Google bemerkbar. Der Anteil der mobilen Suchanfragen ist mittlerweile deutlich höher als über Desktop-Browser – und das wird beim Ranking berücksichtigt. Schon länger zählt die Mobile Friendliness (also wie gut Websites auf mobile Endgeräte angepasst sind) als Rankingfaktor bei Google. Inzwischen ist der Mobile First Index sogar der Hauptindex. Das heißt, nur Websites, die hier gut abschneiden, erhalten ein hohes Ranking.
Viele Webentwickler verfolgen diesen Ansatz noch nicht, weswegen Websites in der mobilen Ansicht oft überladen und unübersichtlich sind. Das Konzept soll dabei helfen, die Websites so zu optimieren, dass sie für User auf allen Geräten verfügbar sind und auch in der mobilen Ansicht schnell laden.
Expertentipp:
Die Mobile Optimierung umfasst Maßnahmen, welche die optimale Anzeige und Nutzung von Webinhalten auf mobilen Endgeräten gewährleisten. Dies trägt zu einer besseren Usability bei und ist auch für das SEO ein wichtiger Punkt. Denn je zugänglicher deine Website für alle User, desto höher dein Ranking!
5. Bedeutet das für Websites jetzt nur noch Mobile First?
Die kurze Antwort lautet: nein. Denn nicht alles ist für die mobile Ansicht gemacht. Manches ist konkret dafür angelegt, im Desktop-Browser angesehen zu werden und dies wird auch weiterhin so sein. Es bedeutet auch nicht, dass du deine Website komplett neu programmieren musst, nur weil du sie nicht nach dem mobilen Konzept entworfen hast.
Dennoch wird es immer wichtiger, dass Websites auf allen Geräten optimal funktionieren. Als Webdesigner sollte man deswegen stets seine Zielgruppe im Blick behalten und sich fragen: Wie viele mobile und wie viele Desktop-User habe ich? Und wie gut ist meine Website für die mobile Nutzung optimiert?
Dabei gibt es zwei Möglichkeiten der mobilen Optimierung: Entweder man verbleibt beim Responsive Design, bei dem nur eine Website gepflegt wird, welche dann an die kleinere Bildschirmgröße angepasst wird. Dies bedeutet zwar scheinbar weniger Aufwand, doch oft können nicht alle Webinhalte problemlos übertragen werden – und so kommt es zu Ladeschwierigkeiten.
Oder man erstellt neben der Desktop-Version eine separate mobile Seitenversion, bei der die Inhalte individuell gepflegt und auf die Bedürfnisse der User angepasst werden können. Dies ist zwar etwas aufwendiger, auf lange Sicht jedoch deutlich nachhaltiger.
Nachfolgend zeigen wir dir, wie du deine Website entsprechend optimieren kannst.
6. So kannst du deine Website in wenigen Schritten für mobile User optimieren
Damit deine Website optimal an mobile Endgeräte angepasst ist, sollte sie so übersichtlich und praktisch wie möglich gestaltet sein.
6.1 Übersichtliches Layout der Website
Da mobile Geräte im Vergleich zur Desktop-Version ein wesentlich kleineres Display haben, sollte der Platz sinnvoll genutzt werden – und die Inhalte sollten auf Anhieb lesbar sein.
Hierzu gehört, dass der Text in mehrere, kürzere Abschnitte gegliedert ist und sowohl die Textgröße als auch die Schriftart gut lesbar sind – Überschriften und Zwischenüberschriften helfen dabei. Außerdem sollte der Text eine überschaubare Länge haben und nicht zu viele Bilder beinhalten, denn dann wirkt die Seite schnell überladen.
6.2 Anpassung der Navigationselemente
Der User navigiert durch die Touch- und Spracheingabe, nicht durch die Maus wie am Desktop. Deswegen sollte bei der Navigation stets die Benutzerfreundlichkeit geprüft und sichergestellt werden. Dazu gehören auch eine passende Größe und ein sinnvoller Abstand der klickbaren Elemente, damit die User mit wenigen Klicks leicht zum Ziel kommen. Für die optimale Anzeige auf dem Smartphone und Tablet sollte der Darstellungsbereich zudem genau festgelegt werden.
6.3 Kurze Ladezeit und schneller Zugriff auf Informationen
Da es sich bei der mobilen Suche oft um eine schnelle Suche handelt und viele bei einer Ladezeit von über 3 Sekunden wegklicken, sollten deine Website-Inhalte schnell laden. Indem du Bilder und Videos optimierst und komprimierst, kannst du eine optimale Performance sicherstellen. Durch das Auslagern von CSS oder Java Skript kannst du die Ladegeschwindigkeit deiner Website ebenfalls erhöhen.
Auch Werbung wird auf dem Smartphone eher als störend empfunden, deswegen solltest du diese so weit wie möglich reduzieren. Denn hier gilt: weniger ist mehr. Sorge außerdem für eine gute Linkstruktur deiner Website. Backlinks sind z.B. bei der mobilen Version nicht so relevant, dafür Touch-Elemente umso mehr!
Expertentipp:
Um deine Website für mobile User praktisch zu gestalten, achte darauf, dass du deinen Content bei der mobilen Version auf das Wesentliche reduzierst und übersichtlich gliederst. Wenn du außerdem Multimedia einschränkst, lädt deine Seite schneller – so ist alles auf Anhieb lesbar.
7. Wie kann ich sicherstellen, dass meine Website mobile friendly ist?
Um zu überprüfen, dass deine Website auch wirklich für mobile Endgeräte optimiert ist, mach den mobile friendly Test! Dafür kannst du deine mobile Website bei einem Simulator aufrufen: Google bietet ein kostenloses Tool, bei dem du die Funktionalität deiner Website testen kannst und herausfindest, ob deine Website als mobile friendly gilt.
8. Fazit
Dass die mobile Optimierung deiner Website wichtiger denn je ist – auch besonders für dein Ranking – brauchen wir vermutlich nicht weiter auszuführen. Bei der Gestaltung der mobilen Version solltest du deswegen immer den Nutzungskontext beachten und die Anzeige und Funktionen an die User und deren Bedürfnisse anpassen. Das bedeutet, dass der Content und das Design der Website so optimiert und reduziert werden muss, dass eine optimale Usability gewährleistet wird. Konzentriere dich auf die wichtigsten Inhalte und Funktionen!
Beim Aufbau eines neuen Projektes oder einer neuen Website lohnt es sich, zuerst mit der mobilen Version anzufangen und sich dann auf größere Auflösungen mit mehr Funktionen und Informationen zu konzentrieren. Das Mobile First Konzept erleichtert es nicht nur den mobilen Usern, sondern macht es auch für Webdesigner einfacher, da sie mit dem kleinen, komplizierteren Teil anfangen und sich dann zu den größeren Auflösungen hocharbeiten können.
Wenn deine Website bereits entwickelt wurde, so sollte sie auf jeden Fall für die mobile Ansicht optimiert sein. Und dank des Mobile Friendly Tests bei Google lässt sich das ganz leicht überprüfen.