Kernkraft

Mobile First Design

Geschrieben von Dennis Nuhn veröffentlich am in der Kategorie Design

Im Bezug auf Display-Auflösungen war früher vieles einfacher. Man gestaltete Websites in nur einem Viewport, mit einer festen Containerbreite von z.B. 800px für die damaligen 4:3 Monitore.

Doch Monitore wurden immer größer und die wesentlich kleineren Smartphones eroberten die Welt. Mittlerweile gibt es zig verschiedene Auflösungen, die alle unterstützt werden wollen (siehe Christians Beitrag zu Bildschirmauflösungen).

Diese Vielfalt bringt nicht nur Abwechslung, sondern auch Komplexität mit sich und bedeutet im Gegensatz zu früher wesentlich mehr Aufwand in der Gestaltung und Programmierung.

Webseiten-aufrufe via mobile

Mittlerweile finden über 49% der weltweiten Websiteaufrufe mit einem Smartphones statt (Stand: 19. Februar 2019, Quelle).

Abhängig vom Land, der jeweiligen Website und ihrer Zielgruppe schwanken solche Statistiken jedoch recht stark. In Indien beispielsweise finden bereits über 76% der Seitenaufrufe mit einem Handy statt, da günstige Smartphones verbreiteter sind als Desktop-PCs. In Deutschland wiederum sieht das anders aus: Hier hat der Desktop im Durchschnitt noch die Nase vorn. (Stand: 19. Februar 2019, Quelle).

Mobile First

Aufgrund der wachsenden Dominanz von mobilen Endgeräten hat sich der „Mobile first“-Ansatz entwickelt, bei dem zuerst die Handy-Ansicht konzipiert und gestaltet wird. Der Desktop wird also zunächst hintenangestellt, damit die Seite vor allem auf Smartphones optimal funktioniert und gut aussieht.

Ziel sollte selbstverständlich sein, dass die Seite auf allen Viewports gleichermaßen gut läuft, wenn es nicht gerade um eine reine Mobile-App geht, welche nur auf dem einem Viewport funktionieren muss.

Das Thema „Mobile First“ ist natürlich nicht neu, dennoch polarisierend und mit diesem Blogbeitrag möchte ich dazu meine persönliche Meinung äußern.

Ein gutes Web Design ermöglicht dem Nutzer das beste Erlebnis auf dem Gerät seiner Wahl. Sei es auf dem Desktop, dem Tablet oder dem Smartphone. Toaster und Tamagotchi ausgeschlossen ;)

User/COntent first

Ich erinnere mich an einen sehr interessanten Vortrag von Niels Anhalt auf dem UX CAMP WEST 2016 in Köln. Der reißerische Titel „Why mobile first sucks“ lockte mich natürlich. Nils erzählte wie er mit seinem Team einen Pitch verlor, da sie im Gegensatz zu ihren Mitbewerbern nicht explizit den Mobile First Ansatz erwähnten. Zumindest war dies die Begründung des Kunden.

Er erklärte, dass Mobile First zu einem überbewerteten Buzzword wurde und dass es stattdessen auf wichtigere Dinge ankommt. Nämlich User First und Content First:

  • Der Nutzer (User) sollte stets im Vordergrund stehen. Wie kann man dem Benutzer die Bedienung erleichtern? Welche Funktionen könnten für den Nutzer wichtig sein?
  • Der Inhalt (Content) sollte auf das Wesentliche reduziert sein, damit wichtige Infos nicht in einer Informationsflut unter gehen und den Nutzer nicht „erschlagen“. [Tipp: Die Content-Kürzungen aber vorher unbedingt mit dem Online Marketer seines Vertrauens abstimmen, damit es keinen Ärger gibt.]

Fazit

Auch ich vertrete die Meinung, dass Mobile First leider viel zu überbewertet ist und es einem jeden Konzepter, Designer und Entwickler selbst überlassen sein sollte welchen Ansatz er verfolgt, solange man immer im Hinterkopf behält, dass seine Webseite auf allen Viewports gleichermaßen gut funktionieren sollte.

Was also nicht passieren darf ist, dass aus Mobile/Desktop First ein Mobile/Desktop Only wird oder die anderen Viewports nur halbherzig entwickelt werden, weil sie nun mal auch existieren.

Desktop-Screens auf die Smartphonegröße zu portieren ist je nach Inhalten und dem Funktionsumfang in der Tat eine Herausforderung, umgekehrt empfinde ich es aber als eine mindestens ebenso große Herausforderung, die reduzierten Handy-Screens auf den großen Desktop zu bringen, da er sinnvoll ausgefüllt werden möchte.

Mir persönlich fällt erstere Variante deutlich leichter. Mit diesem Vorgehen bin ich bisher gut gefahren und werde es so beibehalten.