Responsive Webdesign –
Desktop oder Mobile first?
„Moment, das google ich mal kurz.“ Diesen Satz haben wir so oder so ähnlich wahrscheinlich alle schon gesagt. Egal, ob zuhause oder unterwegs, wir greifen dann gerne auf unser Smartphone, das Tablet oder den Laptop zurück und finden auf einer Website schnell die Antwort – vorausgesetzt, wir finden uns dort zurecht. Möglich macht das unter anderem das Responsive Webdesign. Dabei geht es darum, das Layout einer Website so zu gestalten, dass es auf allen möglichen Endgeräten benutzerfreundlich ist. Ob es dabei tatsächlich immer Mobile first heißen muss und ob die Desktop-Ansicht im Responsive Webdesign tatsächlich kaum noch eine Rolle spielt, erfahren Sie hier.
Mobile first und Desktop first – was heißt das eigentlich genau?
Dem Mobile first-Prinzip begegnet man mittlerweile überall, wo es um Webdesign geht. Dabei geht es darum, eine Website zuerst für das Smartphone zu optimieren und dann nach und nach für die größeren Viewports. Viele Webdesigner gehen sogar noch einen Schritt weiter und stellen sich nur noch die Frage, ob man vielleicht sogar besser ausschließlich auf die mobile Optimierung setzt
„Desktop first“ beschreibt das gleiche Prinzip, nur umgekehrt: Es wird zunächst für die Desktop-Ansicht optimiert und erst dann für die kleineren Viewports.
Mobile first – ein Prinzip mit vielen Vorteilen
Die Welt wird immer mobiler
Wir haben es schon kurz angesprochen: Wenn wir googlen, dann tun wir das immer häufiger von mobilen Endgeräten aus. Weltweit liegt der Anteil von Mobiltelefonen an allen Seitenaufrufen bei 55,04 %. Und auch in Europa findet mit 50,00 % die Hälfte aller Seitenaufrufe von Smartphones aus statt – Tendenz steigend. Je nach Website, Branche und Unternehmen kann eine mobile Optimierung also durchaus für mehr Seitenaufrufe sorgen.
Vor allem auch, weil Google als Suchmaschine seit 2021 das Mobile First Indexing bevorzugt und dadurch die Websites vor allem auf Basis ihrer mobilen Performance bewertet werden.
Es gibt keine Blaupause für die übergreifende Gestaltung von Websites. Im Detail liegt oft der kleine, aber feine Unterschied.
Wie ein optimales Mobile First Indexing gelingt? Ganz einfach:
1. Analyse von Google Crawling und möglicher Fehler
Ist meine Website mobile-friendly oder eher nicht? Die Google Search Console gibt Antwort darauf, wie es um die Nutzerfreundlichkeit der eigenen Website auf Mobilgeräten steht. Das Gute: Neben dieser Einschätzung werden auch Fehler aufgezeigt, die sich im Anschluss gezielt beheben lassen.
2. Gleich und gleich gesellt sich gerne.
Der zusätzliche Platz auf dem Desktop wird oft für mehr Inhalt genutzt. Das aber hat zur Folge, dass auf dem Smartphone ein anderer, gekürzter oder in Akkordeons versteckter Content auftaucht. Da diese Inhalte nicht mehr für ein Ranking in den Suchergebnissen herangezogen werden, ist es sinnvoller, für gleichen Inhalt auf allen Geräten zu sorgen. Das gilt übrigens auch für Meta Tags, strukturierte Daten, Titel, Descriptions, Bilder, Videos und Links: Sie alle sollten identisch sein.
3. Schnell ist gut. Schneller ist besser.
Schon lange ist die Ladegeschwindigkeit von mobilen Webseiten ein Ranking-Faktor von Google. Doch wie schnell ist die eigene Website eigentlich? Drei Tools bieten Tempomessungen:
- Google Search Console: Zur Geschwindigkeitsüberprüfung werden tatsächliche Daten von Chrome-Nutzer:innen herangezogen.
- Google Page Speed Insights: Ein Tool, das die Performance der URL auf Desktop und Mobile misst. Sollte es in Sachen Mobile haken, gibt es Hinweise und Tipps für eine mobile Performance-Optimierung.
- Google Lighthouse: Zum Open-Source-Tool auf URL-Basis gelangen User via Chrome Browser.
Von Mobile first profitiert auch die Desktop-Darstellung
Smartphones bieten nur einen sehr begrenzten Platz für Screendesigns. Klar, das bedeutet zunächst einmal Einschränkungen, birgt aber auch große Vorteile. Denn wenn das Screendesign für die kleineren Viewports erst einmal steht, können die größeren wesentlich leichter entwickelt werden. Der Grund ist ganz einfach: Elemente, die bereits auf kleine Screens gepasst haben, haben natürlich auch auf großen ausreichend Platz und genügend Freiraum. Dadurch wirkt das nachträglich an Desktops angepasste Design nicht überladen und kann bei Bedarf unkompliziert um weitere Texte und andere Elemente ergänzt werden. Dieses Vorgehen ist häufig einfacher, als viel zu lange Texte und eine große Anzahl an Bildern nachträglich einzukürzen, wie es bei „Desktop first“ gelegentlich der Fall ist.
Mobile first sorgt für funktionierende Elemente
Ausgefallene Elemente und interaktive Grafiken – die Desktop-Ansicht bietet schier unendlich viele grafische Möglichkeiten. Das Problem: Was User am Computer begeistert, ist auf dem Smartphone oft enttäuschend. Denn hier funktionieren die für den Desktop designten Elemente meist nicht. Indem das Screendesign zuerst für das Smartphone entwickelt wird, umgeht man dieses Problem ganz einfach. Das sorgt nämlich ganz automatisch dafür, dass die Grafiken auf jeder Screengröße funktionieren und überzeugen.
Mobile first, aber richtig!
Wer sich für eine Optimierung seiner Website nach dem Mobile first-Prinzip entscheidet, sollte unbedingt einige häufig gesehene Fehler vermeiden:
- zu viele Scripts und CSS-Dateien, die durch ihre Größe und Latenzzeit besonders beim Laden auf Mobilgeräten den Seitenaufbau hinauszögern
- Skripte, die nur auf Highend-Smartphones gut funktionieren und auf „Durchschnittshandys“ ebenfalls für lange Ladezeiten sorgen
- zu große Bilder
… und das spricht für „Desktop first“
Dass das Smartphone so wenig Platz bietet, ist gewissermaßen Fluch und Segen zugleich: Einerseits ist das Screendesign so gezwungen, weniger Elemente zu verwenden und lässt sich – wir haben es bereits angesprochen – leichter für Desktops adaptieren. Andererseits bieten Websites auf dem verhältnismäßig kleinen Viewport häufig eine schlechtere Benutzererfahrung. Das kann viele Gründe haben. Manchmal sind Elemente schlicht zu klein dargestellt. Oder das Menü muss erst ausgeklappt werden, weil es sonst zu viel Platz in Anspruch nehmen würde. Diese Probleme begegnen einem auf dem Desktop eher selten – gut für alle User.
Je nach Gerät gibt es ein unterschiedliches Nutzerverhalten. Im responsiven Design wird auf individuelle Anforderungen eingegangen.
Der Desktop bietet mehr Designmöglichkeiten
Dass der Desktop mehr Platz bietet, hat noch weitere Vorteile: Das Design lässt auf diesem Viewport einfach mehr Variabilität zu und bietet damit besonders viele Gestaltungsmöglichkeiten. Also fangen viele Kreative mit der Desktop-Ansicht an und priorisieren sie entgegen der Mobile first-Forderung auch weiterhin.
Manchmal ist eben doch der Desktop beliebter
Ja, es stimmt: Immer mehr Menschen greifen von mobilen Endgeräten aus auf Websites zu – aber eben nicht immer. Als Werbeagentur haben wir ebenso mit Projekten zu tun, bei denen User eine Website vor allem mit dem Computer besuchen. Das kann zum Beispiel dann der Fall sein, wenn ein Unternehmen Bürobedarf für andere Unternehmen verkauft, der während der Arbeitszeit vom Büro-PC aus bestellt wird. Entsprechend ist die Optimierung für Smartphones und Tablets in solchen Fällen kaum relevant.
Anders verhält es sich, wenn User gezwungenermaßen auf den Computer ausweichen, weil die Website nicht für mobile Endgeräte optimiert ist. Das kann für Unzufriedenheit bei technikaffinen Usern und potenziellen Kundinnen und Kunden sorgen.
Fazit: Desktop oder Smartphone – was zuerst?
Sowohl Desktop first als auch Mobile first haben Vorteile. Welches der beiden Vorgehen am Ende zum Zuge kommt, muss von Projekt zu Projekt individuell entschieden werden. Wer ist die Zielgruppe? Welche Absicht verfolgt die Website? Wie gestaltet sich das Nutzerverhalten bisher und woran kann das liegen? All diese und noch viele weitere Fragen helfen dabei, das passende Vorgehen zu wählen. Aus Sicht der Umsetzenden ist es dann vor allem wichtig, den Überblick zu behalten: Webdesigner sollten sowohl über Design- als auch über Programmiererfahrung verfügen – für eine Website aus einem Guss.
Je nachdem, welche Zielgruppe erreicht werden soll, muss die Website geräteübergreifend und verlustfrei funktionieren.
Ob für Smartphone oder Desktop: Sorgen Sie mit uns für beste Usability!
Gerne überprüfen wir, welche Vorgehensweise für Sie die bessere ist, und setzen Ihre Website entsprechend um – mit dazugehörigem Design und Texten, die zu Ihrem Unternehmen passen.