Webdesign für Mobile Endgeräte

Ist Mobile First die Strategie der Zukunft?

Werden Webseiten bald nur noch für Mobile Geräte optimiert sein?
Hannes mit Verschränkten Armen und Lächelnd.

Hannes Haderer
Webdesigner

08. Februar 2021

Uhr Symbol
3 Minuten

Allgemein

Webseiten werden meistens für große Bildschirme gebaut. Für die mobile Ansicht reicht es dann nur noch für eine verkleinerte Version.

Doch das ist eigentlich nicht mehr zeitgemäß. Bereits heute kommen nahezu 50% der Webseitenaufrufe von mobilen Endgeräten. 

Eine neue Ära beginnt, und sie heißt: Mobile First.


Ein Zeichen dafür setzt nun Google: Desktop Only Websites fallen ab März 2021 aus dem Google Index. 
Was bedeutet das? Webseiten, die nicht auf Smartphones funktionieren, werden schlicht nicht mehr in Google gefunden. 


Aber keine Sorge: Webseiten, die für Desktop kreiert wurden und dann für mobile Endgeräte abgespeckt angezeigt werden, haben nichts zu befürchten - und dies ist schon jahrelang Standard.

Dennoch ist es einmal ein Anlass über die Mobile First Entwicklung nachzudenken. 


Was bedeutet Mobile First? 

Du wirst es ahnen, anders als normal wird eine Mobile First Webseite primär für mobile Endgeräte erstellt. Und eine aufgeblähte Version davon sieht man dann am Desktop. 

Meine Meinung sollte man hier einen gesunden Zwischenweg finden. Außer natürlich du weißt, dass deine Zielgruppe ausschließlich über Mobile kommuniziert. 

Anstelle deine Webseite für Mobile nur etwas abzuspecken und die Bilder kleiner zu machen, können wir uns erstmal ansehen, was man überhaupt unter Mobile Friendly versteht: 

  • Die Webseite sollte sich sofort an die kleinere Bildschirmgröße anpassen, man sollte nicht zoomen müssen, um Texte lesen zu können.
  • Die Webseite sollte leicht sein (im Sinne der Datenmenge), mobil wird deine Webseite meistens über 3G abgerufen - diese bringt meist nicht die Leistung wie die WLAN-Anbindung zuhause. Die Webseite soll also auch mobil schnell abgerufen werden. 
  • Links sollten leicht lesbar und anklickbar sein. Mobile Geräte bedienen wir meistens über einen Touchscreen - Buttons sollten dementsprechend größer sein, um sie leicht klicken zu können. Zudem gibt es bei mobilen Endgeräten keinen Hover-Effekt -> dadurch sollten Links sofort als Link identifiziert und direkt geklickt werden können.


Burger Menü

Wichtig ist auch, dass sich die Klickbarkeit von Elementen verändert. Das Smartphone wird normal mit einer Hand gehalten und mit dem Daumen bedient. 

Schon seit Jahren hat es sich so ergeben, dass die Navigation in einem Burger-Menü links oben zu finden ist.

Diese zwei Umstände passen aber eigentlich gar nicht zusammen. 


Eine Lösung dafür würde ein Menü auf der Unterseite bieten - Das spießt sich aber mit der Gewohnheit der User, ohne zu überlegen, rechts oben das Menü öffnen zu wollen. Hier muss dann wohl jeder selbst entscheiden, was er für besser empfindet. Natürlich muss auch dies wieder in Betracht der jeweiligen Zielgruppe entschieden werden. 


Bilder optimieren

Eine weitere Idee, um ein besseres Surferlebnis auf mobilen Endgeräten zu schaffen, ist, Bilder nicht kleiner zu machen, sondern von Kante zu Kante zu designen. So muss der Besucher der Webseite nicht zoomen, um Bilder gut sehen zu können.

Es kommt drauf an

Zusammengefasst lässt sich sagen, wenn sich deine Webseite Responsive auf die jeweiligen Bildschirmgrößen automatisch anpasst, bist du am richtigen Weg. Optimierungen können dann wie bei allen Dingen bis ins Detail gemacht werden. Die Ideen sind hier auch wieder grenzenlos und wir werden in Zukunft mit Sicherheit noch einige tolle Umsetzungen von großartigen Designern sehen. 

Wichtig zu sagen ist aber auch, es hängt stark von der Zielgruppe ab und wie sich dies im Internet verhält. Erst danach kann man hier eine Entscheidung treffen.

Es ist auf jeden Fall sinnvoll, mal wieder seine eigene Webseite am Handy zu öffnen und ein paar Dinge zu hinterfragen. 


Freuen wir uns auf eine Mobile Friendly Zukunft :) 

Es wird Zeit, dein Unternehmen auf das nächste Level zu heben.

Kennenlerngespräch vereinbaren