In der Bahn, an der Supermarktkasse, im Wartezimmer: Unsere Smartphones sind auf der Suche nach Informationen, Produkten oder Unterhaltung im Dauereinsatz. Damit mobile User unabhängig von Zeit und Ort schnell und komfortabel auf Webinhalte zugreifen können, sollten diese für mobile Geräte optimiert sein. 

Aber nicht nur die User profitieren von einer mobile friendly Website: Auch Google nutzt das mobile first design als wichtigen Rankingfaktor. Entsprechende Optimierungen können demnach zu Steigerungen in Traffic, Conversion und schlussendlich Umsatz führen.  

In unserem Blogartikel erfahren Sie nicht nur, weshalb Responsive Webdesign so wichtig ist, sondern bekommen mit unserer Checkliste die perfekte Grundlage in die Hand, um Ihre Website mobile friendly zu gestalten.

Inhaltsverzeichnis:

Was bedeutet „mobile friendly“ und weshalb ist es so wichtig?
Kostenlose Tools für die perfekte Website
Unsere mobile friendly Checkliste

Was bedeutet “mobile friendly” und weshalb ist es so wichtig?

Unter dem Begriff “mobile friendly” (dt. “mobilfreundlich”) versteht man die Optimierung von Webinhalten für mobile Endgeräte. Ziel dieser Verbesserungen ist es, dass Websites auch auf Smartphones mühelos bedien- und konsumierbar sind. Die Gründe hierfür liegen wortwörtlich auf der Hand: Smartphone-Bildschirme sind um ein Vielfaches kleiner als Desktop-PCs und die Bedienung und Navigation erfolgt per Touchscreen. Um also auch unterwegs komfortabel surfen zu können, müssen Websites für diese erschwerten Voraussetzungen angepasst werden. 

 

Wie wichtig mobile friendly Websites sind, zeigt die Statistik: Inzwischen erfolgen mehr als die Hälfte aller Website-Zugriffe über mobile Endgeräte. Aus diesem Grund verfolgen Website-Entwickler:innen und -betreiber:innen den Ansatz “mobile first design”. 

Neben einer verbesserten User-Experience ist das responsive Webdesign auch aus SEO-Sicht von größter Wichtigkeit: Seit 2021 berücksichtigt Google zuerst die mobile Version einer Website für die organischen Rankings. Dies führte – und führt nach wie vor – zu erheblichen Traffic-Einbußen, wenn die gecrawlte Website bestimmte Kriterien nicht erfüllt.

Kostenlose Tools für die perfekte mobile Website

Um mobile User eine optimale Experience bieten und Verbesserungen am responsive Webdesign vornehmen zu können, sollten Websites hinsichtlich ihrer Mobilfreundlichkeit getestet werden. Erste Anhaltspunkte, ob und wo Verbesserungsbedarf besteht, geben die drei Google Tools Mobile-Friendly Test, PageSpeed Insights und die Search Console.

Google Mobile-Friendly Test

Der Google Mobile-Friendly Test bietet zunächst die Möglichkeit, sich die jeweilige Website in mobiler Ansicht anzeigen zu lassen. Darüber hinaus erhält man eine umfassende Auflistung aller potenziellen Probleme, z.B. zu kleine Schriftgröße oder inkompatible Plug-ins. Um den kostenlosen Test zu nutzen, muss lediglich die URL der zu prüfenden Website eingegeben werden. Eine Anmeldung ist nicht erforderlich.

Google PageSpeed Insights

Nach Eingabe der zu prüfenden URL misst Google PageSpeed Insights die Leistungsfähigkeit der Seite bei mobiler und bei Desktop-Nutzung. Mithilfe eines Ampelsystems wird nun angezeigt, durch welche Maßnahmen bessere Resultate erzielt werden können. Zum Beispiel könnten nicht verwendete Java-Scripts minimiert oder Bildformate angepasst werden. Auch hierfür ist keine Anmeldung erforderlich und das Tool ist kostenlos.

Google Search Console

Die Google Search Console ist wohl eines der wichtigsten und hilfreichsten Tools, um eine Website für mobile Geräte zu optimieren und ein umfassendes mobile first design zu erzielen. Der kostenlose Dienst ermöglicht es, Suchanfragen, Indexierung, Klickraten und mehr für eine oder mehrere Websites abzurufen. Um die Search Console zu nutzen, wird ein Google-Konto sowie die Bestätigung der Website-Inhaberschaft benötigt.

Online Shopping

Unsere mobile friendly Checkliste verrät, wie’s geht

1. Usability Check

Zunächst sollte überprüft werden, ob alle Elemente, die für Navigation und Aktion nötig sind, gut sichtbar und leicht zu bedienen sind. Hierzu zählen zum Beispiel die Navigationsleiste, Buttons oder Benachrichtigungen. Die Schaltflächen sollten groß genug sein und vor allem nicht zu nah aneinander liegen. 

2. Bilder optimieren

Bilder und Grafiken sollten auf mobilen Websites nur eingesetzt werden, wenn sie User einen wirklichen Mehrwert bieten. Auf diese Weise können unnötiges langes Scrollen und damit eine erhöhte Absprungrate verhindert werden. Darüber hinaus sollten die Bildgröße angepasst und sinnvolle Alt-Tags eingespielt werden, da Bilder unterwegs schlechter laden. 

3. Text verbessern

Bei Textinhalten sollte auf Schriftgröße, -art und -platzierung geachtet werden, um eine gute Lesbarkeit auf kleinen Bildschirmen zu erzielen. Ebenso wie beim Bildmaterial sollte auch hier auch die Relevanz der Inhalte hinterfragt werden, um Frust auf Seiten der Nutzer:innen zu vermeiden.  

Aber Achtung bei “abgespeckten Inhalten”: Grundsätzlich sollten die Inhalte der mobilen Version identisch mit der der Desktop-Version sein. Natürlich müssen einige Anpassungen vorgenommen werden, jedoch ranken “abgespeckte Versionen” schlechter und wirken verwirrend auf die Besucher:innen! 

4. Popups und Interstitials anpassen

Um schnellere Ladezeiten zu erzielen, sollten Popups und Interstitials möglichst reduziert werden. Wichtig ist, dass sie auf die Bedürfnisse mobile User ausgelegt sind: Der Text sollte gut lesbar sein und die Schaltfläche zum Schließen leicht auffind- und bedienbar. 

5. Nicht abrufbare Inhalte überprüfen

Falls die Website Animationen oder Videoeinbettungen enthält, sollte der  HTML-5 Standard genutzt werden – so empfiehlt es Google. Im Gegensatz zu beispielsweise JavaScrip oder Flash wird dieser nämlich von allen Geräten und Browsern unterstützt, wodurch nicht abrufbare Inhalte vermieden werden können. 

6. Snippets optimieren

Auch bei den Snippets gilt es, den kleinen Bildschirm eines Smartphones mitzudenken. Der Meta-Titel sollte maximal 59 Zeichen lang sein, bei der Meta Description sollten 122 Zeichen nicht überschritten werden.

7. Googlebot zulassen

Damit die mobile Seite korrekt indexiert wird, müssen JavaScript, -CSS und Bilddateien vom Googlebot gecrawlt werden können. Mithilfe des robots.txt-Testtool über die Google Search Console kann überprüft werden, ob die Seite für den Googlebot zugänglich ist. 

 

Auch wenn die vielen Möglichkeiten eine Website für mobile Geräte zu optimieren erst einmal überwältigend wirken: Sie lassen sich relativ schnell umsetzen und machen sich im wahrsten Sinne des Wortes bezahlt! Denn eine Website, die auf die mobile Nutzung ausgelegt ist oder sie zumindest mitdenkt, rankt besser, steigert ihre Conversion-Rates und schlussendlich damit auch den Umsatz.

Falls Sie Fragen zum mobilen Potenzial oder Status Quo Ihrer Website haben, zögern Sie nicht, einen unverbindlichen Beratungstermin mit unseren E-Commerce-Expert:innen zu vereinbaren. Gemeinsam finden wir heraus, wie wir Ihre Website mobile friendly gestalten und für eine bessere Performance sorgen können.