Responsive Webdesign – Desktop oder doch lieber 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 51,57 %. Und auch in Europa finden mit 52,31 % mehr als 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.
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
Quelle: www.pexels.com
...und das spricht für „Desktop first“
„Desktop first“ verspricht oft eine bessere User Experience
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.
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 potentiellen 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.
Ihre Werbeagentur für Webdesign: Responsive Website mit alle freiheit
Als digital erfahrene Werbeagentur beraten wir Sie gerne zu Ihrem Website-Relaunch oder einer komplett neuen Website. Dabei betrachten wir Ihr Projekt ganz individuell und schauen, welchen Stellenwert die jeweilige Anwendung für Ihre Site hat. Auf Wunsch optimieren wir Ihre Website für alle Endgeräte und sorgen dabei stets für beste Usability – ideale Voraussetzungen, um neue Kundinnen und Kunden von sich zu begeistern. Natürlich erstellen wir auch das dazugehörige Design nach Ihrer CI für Sie und liefern Ihnen Texte, die genau zu Ihrem Unternehmen passen. Melden Sie sich einfach bei uns.