Mobile First: 8 Tipps, wie du deine Website mobile optimierst

von einem Gastautoren

zuletzt aktualisiert am 11. Februar 2021

Die Anzahl der Smartphone-Nutzer steigt jährlich immer weiter an. Mittlerweile besitzen weit über 50% der Bevölkerung in Deutschland ein Smartphone und integrieren dieses in ihre täglichen Routinen. Das macht sich nicht zuletzt auch im Internet-Nutzerverhalten sichtbar. Dabei surfen User längst nicht mehr nur unterwegs am Handy, sondern zunehmend auch von Zuhause aus. Eine mobile optimierte Website ist daher in der heutigen Zeit ein absolutes Muss. Erfahre hier, wie du mit nur 8 Tipps deine Website für Mobile-User fit machst.

Was ist mobile Optimierung?

Die mobile Optimierung zielt darauf ab, dass Webinhalte auf Mobilgeräten benutzerfreundlich aufbereitet werden und sich so dem veränderten Nutzerverhalten anpassen. Dafür stehen prinzipiell drei unterschiedliche Möglichkeiten zur Verfügung.

  • Responsive Webdesign: 

Webinhalte passen sich automatisch dem jeweiligen Endgerät an, ohne dass unterschiedliche Versionen der Website gepflegt werden müssen.

  • Eigene mobile Webseite: 

Zusätzlich zur Desktop-Variante wird eine zweite Version der Website gebaut, die auf mobile Geräte ausgerichtet wird.

  • App:

Eine eigens für mobile Endgeräte entwickelte App soll den Nutzern passenden Content bereitstellen.

Warum ist mobile Optimierung so wichtig?

Während immer weniger User über Desktop-Geräte auf das Internet zugreifen, werden Mobile-User immer mehr – damit wird das Handy zum bevorzugten Gerät für die Internetnutzung. User, die über das Smartphone auf deine Website zugreifen, verfügen grundsätzlich über andere Voraussetzungen. Sie haben einen kleineren Bildschirm, navigieren per Touchscreen u.v.m. Daraus ergeben sich ganz andere Anforderungen an deine Website – doch dazu später mehr.

Die mobile Optimierung ist aber nicht nur aus User-Sicht relevant. Auch der Suchmaschinen-Gigant Google stellt sich auf die Seite der mobilen Endgeräte. Mittlerweile ist „mobile-friendly“ für Google nicht mehr nur einer von zahlreichen Rankingfaktoren. Seit 2018 indexiert Google bevorzugt die mobile Version einer Website, wobei dies bisher nur etwa 70% aller Websites betrifft. Ab Ende März 2021 plant Google jedoch komplett auf Mobile-First-Indexing umzustellen.

Um diesen Gegebenheiten gerecht zu werden, sollte es dein Ziel sein, eine mobile optimierte Website zu erstellen. Im Idealfall stimmst du deine Inhalte von Beginn an schon auf die Nutzung von mobilen Endgeräten ab und optimierst sie nicht erst im Nachhinein. Im Folgenden verraten wir dir 8 Tipps für deine mobile Website.

Tipp #1: Responsive Webdesign verwenden

Wie eingangs erwähnt, gibt es zahlreiche Möglichkeiten, eine Website aus technischer Sicht auf mobile Endgeräte zu optimieren. Responsive Webdesign ist dabei heutzutage die Standard-Lösung und die von Google selbst empfohlene Variante.

Hierbei bleiben HTML-Code und CSS immer gleich und das Responsive Webdesign passt Inhalte und Layout automatisch an die unterschiedlichen Endgeräte an. Somit kannst du sicherstellen, dass auf jedem Gerät eine gleichbleibende Benutzerfreundlichkeit gegeben ist.

Mobile First - Responsive Design

Ein weiterer großer Vorteil von Responsive Webdesign ist der geringe Wartungsaufwand. Da alle Versionen einer Seite über die gleiche URL laufen, musst du immer nur eine Version der Seite pflegen. Somit entfällt das lästige Warten unterschiedlicher Inhalte für die diversen Endgeräte.

Auch aus SEO-Sicht ist Responsive Webdesign zu empfehlen, da sich so Probleme mit Duplicate Content und Linkjuice-Verteilung umgehen lassen. Zudem geht man möglichen Fehlern, die bei der Umleitung der Desktop-Seite auf die mobile URL ansonsten oft entstehen, von Vornherein aus dem Weg.

Tipp #2Bedürfnisse und Gewohnheiten der User mit einbeziehen

Damit du deine Website mobile optimiert gestalten kannst, ist es wichtig, den Kontext zu verstehen, in welchem die User auf deine Inhalte zugreifen. Auch wenn viele Menschen mittlerweile das Smartphone ebenfalls zum Surfen von Zuhause aus verwenden, steigt der durchschnittliche Mobile-Nutzer immer noch unterwegs in das Internet ein. Er will also schnell und unkompliziert die gewünschten Informationen erhalten.

Daraus ergeben sich folgende Rahmenbedingungen:

  • Das Mobilfunknetz hat meist weniger Bandbreite
  • Der User navigiert mit dem Finger und nicht mit einer Maus
  • Mobile Geräte bieten eine eingeschränkte Displaygröße
  • Das Display ist für gewöhnlich vertikal ausgerichtet
  • Die Sitzungsdauer ist eher kurz

Auf mobilen Geräten ist es daher einmal mehr wichtig, Navigationswege so kurz wie möglich zu gestalten. Muss der User mehrere Male klicken, bis er zur gewünschten Seite gelangt, ist er schnell genervt und verlässt die Website womöglich wieder. Um dieses Problem zu umgehen, bietet es sich an, die wichtigsten Seiten im Menü zu verlinken und dem User eine Filter- und/oder Suchfunktion anzubieten. So stellst du sicher, dass jeder schnellstmöglich zu den gesuchten Informationen gelangt.

Tipp #3Darstellungsbereich an mobile Endgeräte anpassen

Aufgrund der veränderten Displaygröße spielen Layout und Formatierung bei der mobile Optimierung eine besonders große Rolle. Zunächst einmal ist es wichtig, dass du einen geeigneten Darstellungsbereich festlegst. Ist dieser nicht richtig oder gar nicht festgelegt, muss der User horizontal scrollen, um alle Inhalte lesen zu können.

Möchtest du eine mobile optimierte Website erstellen, musst du daher einen geeigneten Darstellungsbereich mit den entsprechenden Meta-Tags konfigurieren. Verwende zudem keinen Darstellungsbereich mit fixer Breite, denn dann kann die Seite nicht optimal an die unterschiedlichen Displaygrößen angepasst werden.

Der Darstellungsbereich wirkt sich nicht zuletzt auch auf die Schriftgröße aus. Ist dieser nicht richtig eingestellt, wird die Seitengröße auf mobilen Geräten nicht verringert und die Schrift somit zu klein ausgegeben. Prinzipiell ist die Schriftgröße so einzustellen, dass der Text selbst auf einem kleinen Display noch gut lesbar ist – der User sollte nicht heranzoomen müssen, um die Inhalte lesen zu können. Die Empfehlung liegt bei einer Schriftgröße von mindestens 16 Pixel.

Tipp #4Touch-Elemente und Bilder richtig anordnen

Damit der User einfach auf deiner Seite navigieren kann, gilt es die Anordnung sowie die Größe der Touch-Elemente zu berücksichtigen. Elemente wie Buttons, Links und Co. müssen weit genug auseinander stehen, sodass per Klick nicht aus Versehen eine andere Seite geöffnet wird. Stelle außerdem sicher, dass die Touch-Elemente groß genug sind, sodass sie mit dem Finger klickbar sind – die Empfehlung beläuft sich hierbei auf 44 Pixel.

Gehe überdies vorsichtig mit Bildern um. Auf dem Desktop mögen sie zwar schön aussehen und den Text auflockern, am Smartphone kann dadurch jedoch schnell eine Bilderflut entstehen. Fotos und Grafiken sollten niemals den Text in irgendeiner Weise verdrängen oder schwer lesbar machen. Hinterfrage deshalb immer, ob nun wirklich ein Bild notwendig ist und es einen Mehrwert für den User bietet oder nicht.

Tipp #5Interstitials und andere störende Werbung vermeiden

Interstitials sind großflächige Werbeanzeigen, die meist zu Beginn eines Seitenaufrufes geöffnet werden. Sie werden ausgelöst, sobald ein Nutzer eine Website aufruft oder auf einen bestimmten Link oder Bereich auf der Website klickt. Der User muss diese entweder selbst schließen oder einen gewissen Zeitraum abwarten, bis sie wieder von selbst verschwinden.

Für Werbezwecke mögen Interstitials vielleicht gut sein, aus User-Sicht sind sie jedoch als negativ zu beurteilen, denn sie blockieren Teile oder sogar den gesamten Inhalt. Sind diese schlecht implementiert, schafft der User es kaum, sie zu schließen und verlässt frustriert die Website. Greife daher lieber zu einem Banner im Headerbereich, der deinen Usern nicht den Blick auf wichtige Inhalte verwehrt.

Tipp #6Ladezeiten minimieren

In Sachen Ladezeit zählt sowohl auf Desktop als auch auf Mobilgeräten jede Sekunde. Bei letzterem ist dieses Problem sogar noch einmal verschärft. Denn bereits nach 3 Sekunden erhöht sich laut Angaben von Google die Absprungrate enorm. Hinzu kommt ein oftmals schlechteres Internet auf vielen Handys – ein weiterer Grund, die mobile Version deiner Website möglichst „schlank“ zu halten.

Doch wie lassen sich die Ladezeiten minimieren? Hier ein paar Tipps, um unnötige Ladezeiten zu vermeiden:

  • Entferne Javascript oder CSS, die das Rendern blockieren
  • Verwende Browser-Caching.
  • Komprimiere Bilder noch stärker
  • Entferne überflüssigen HTML-Code
  • Vermeide zusätzliche Animationen, Tondateien etc.
  • Verwende Lazy Loading
Mobile First - Loading Bar

Nutze überdies GooglePageSpeed Insights, um die Ladezeit deiner mobilen Website zu testen. Dort findest du heraus, wo mögliche Probleme liegen. Das Tool gibt dir außerdem wertvolle Empfehlungen, wie du die Ladezeit deiner Seite optimieren kannst.

Tipp #7Seite crawlbar machen

Deine Website muss nicht nur für den User benutzerfreundlich gestaltet sein, sondern ebenfalls für den Googlebot crawlbar sein. Das bedeutet, all deine Inhalte sollten für Google auslesbar, auswertbar und ggf. indexierbar sein.

Stelle daher zuallererst einmal sicher, dass die Inhalte auf Desktop sowie Mobile übereinstimmen. Verwende die gleichen Meta-Robots-Tags und strukturierten Daten auf allen Geräten. Wähle Videoformate, die auf den diversen Geräten abgespielt werden können und nicht an bestimmte Software-Anbieter oder Lizenzen gebunden sind.

Achte außerdem darauf, dass Lazy-Loading-Inhalte für den Google-Bot sichtbar sind. Diese dürfen also nicht erst nach einer Nutzerinteraktion sichtbar werden, ansonsten kann Google sie nicht crawlen. Am besten vermeidest du Lazy-Loading für wichtige Inhalt komplett.

TIPP

Verwende in der Google Search Console das URL-Prüftool und finde so heraus, ob es Probleme mit der Crawlbarkeit und Indexierung gibt.

Tipp #8Mobile Test machen

Du hast es geschafft und deine Website ist endlich mobil optimiert? Dann solltest du jetzt testen, ob alles funktioniert und du nichts übersehen hast. Diverse Tools geben dir die Möglichkeit, herauszufinden, ob deine Seite mobile-friendly ist oder nicht. Du kannst sie entweder dazu verwenden, einen abschließenden Check zu machen, oder aber um erste Ideen für die mobile Optimierung zu sammeln.

Google bietet selbst einen solchen Mobile-Friendly-Test an. Alles was du dafür tun musst, ist die URL deiner Website im Eingabefeld oben einzutragen und die Analyse zu starten. Das Tool informiert dich anschließend über Probleme, wie etwa lange Ladezeiten, Verfügbarkeitsprobleme etc.

Auch die Google Search Console gibt Auskunft über die Nutzerfreundlichkeit deiner Website unter dem Punkt „Nutzerfreundlichkeit auf Mobilgeräten“. Dort findest du etwaige Fehlermeldungen, falls es Probleme mit der mobilen Darstellung gibt. Dabei werden folgende Fehler erkannt:

  • inkompatible Plug-ins
  • Darstellungsbereich nicht festgelegt
  • Darstellungsbereich nicht für Gerätebreite festgelegt
  • Inhalt breiter als Bildschirm
  • Text ist zu klein zum Lesen
  • Anklickbare Elemente liegen zu dicht beieinander

FAZIT: Mobile-Friendly-Website gewusst wie


Ein sich stets veränderndes Nutzerverhalten sowie die Arbeitsweise von Google machen es notwendig, dass du deine Website für mobile Endgeräte optimierst – spätestens jetzt solltest du das wissen. Indem du Layout und Formatierung sowie technische Aspekte deiner Website an die Rahmenbedingungen der mobilen Internetuser anpasst, stellst du sicher, dass dein neuer Onlineauftritt auf allen Geräten benutzerfreundlich ist. Mit diesen 8 Tipps steht deinem Online-Erfolg also nichts mehr im Weg!

Mobile First - Mobile Friendly

Möchtest du mich unterstützen?

Gerne stelle ich dir diese Inhalte auf der Online Marketing Site kostenfrei zur Verfügung.
Ich verlange dafür kein Geld und erwarte auch keine Spenden. Aber ich freue mich sehr, wenn du mich dabei unterstützt, meine Inhalte zu verbreiten.

So kannst du mich unterstützen:

Verlinke diesen Beitrag auf deiner Website / deinem Blog

Teile diesen Beitrag auf deinen Social Media Profilen

Mobil First - Gastautor Vincenzo Carbone

 Vincenzo Carbone

Gastautor

Vincenzo ist Chief Administrative Officer (CAO) bei Hoststar – Hosting Provider mit Sitz in der Schweiz.

Das Unternehmen bietet Kunden leistungsstarke Hosting-Lösungen und legt alles daran, dass Websites so schnell und sicher wie möglich laufen.

Dabei steht immer der Kunde im Mittelpunkt.

Hinterlasse einen Kommentar:


{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}