Ist Mobile First noch sinnvoll?

Ist Mobile First noch sinnvoll?

Vor einigen Jahren sorgte "Mobile First" als Design­trend für große Aufmerksam­keit. Da die mobile Internet­nutzung rasant zunahm, forderten vielen Frontend-Designer zuerst die "kleine Variante" einer Website zu entwerfen, bevor die Desktop­version gestaltet wird. Bis heute hält sich die Devise hartnäckig. Da die Anzahl unterschiedlich großer Endgeräte kontinuierlich steigt (z.B. Phablets oder breite Fernseher, die zum Surfen genutzt werden), sollte "Mobile first design" neu interpretiert werden, um einen optimalen Nutzen daraus zu ziehen.

Wie kann Mobile First optimal genutzt werden?

Zu Beginn eines neuen Projektes gibt es für das Frontend-Design grund­sätzlich drei denkbare Ansätze:

  • Man betrachtet die kleinsten Mobil­geräte zuerst.
  • Man konzentriert sich am Anfang auf die größt­möglichen Geräte.
  • Man startet wie gewohnt mit einer klassischen Desktop­­ansicht mit einer Breite von rund 960 Pixeln.

Die Verfechter der klassischen "Mobile First"-Devise fordern, dass die Konzeption eines Web­projekts beim kleinsten Viewport beginnt und im weiteren Verlauf auf größere Bild­schirme ausgeweitet wird. Wenn man die Vorgehens­weise allerdings etwas offener betrachtet, sind einige Varia­tionen denkbar, die nicht nur den Design-Prozess optimieren, sondern auch dafür sorgen, dass die neu gestaltete Website deutlicher auf die Bedürfnisse der Nutzer zugeschnitten ist.

So kann die Konzeption für unterschiedliche Viewports entweder linear (also klassisch von klein zu groß) oder parallel (also schrittweise für alle Display­größen) erfolgen, jeweils abhängig von den voraus­sichtlichen Nutzungs­szenarien. Darüber hinaus lässt sich Mobile First auf einzelne Abschnitte des Projekt­verlaufs beziehen (v.a. die Bereiche Konzeption, Design und Umsetzung) oder es kommt als Devise für den Gesamt­prozess zum Einsatz.

Inwieweit Mobile First Design sinnvoll ist, lässt sich leider nicht allgemein­gültig sagen. Bezogen auf die einzelnen Projekt­phasen lassen sich hingegen klare Mehrwerte erkennen.

Mobile First in der Planungsphase

Am Anfang der Konzeptionsphase ist „Mobile First“ zweifelsfrei von großem Nutzen, da der geringe Platz auf einem Smartphone-Viewport zur Fokussierung auf die wichtigsten Inhalte zwingt. Aus „Mobile First“ wird also „Content First“. Anstatt von vornherein eine große Fläche mit (teils unwichtigen) Inhalten, Modulen und Elementen zu füllen, stehen die wichtigsten Komponenten des Designs im Vorder­grund.

So bringt Mobile First nicht nur einen Gewinn für die Gestaltung, sondern auch für die Usability und die Customer Experience der Website-Besucher. Durch das geringe Platzangebot sowie die erzwungene Priorisierung der Inhalte und Funktionen werden vor allem solche Elemente umgesetzt, die voraussichtlich den größten Nutzen für die jeweiligen Ziel­gruppen bzw. Personas des Unter­nehmens bringen.

Designphase unter Mobile First Device

Ein „Mobile­ First­“-Ansatz beim Design ist dann die richtige Wahl, wenn sich die mobile Variante stark von der stationären unterscheidet. Das kann zum Beispiel der Fall sein, wenn spezielle Funktionen mobiler Geräte (z.B. Touch­­steuerung, Lokali­sierung oder Ausrichtung des Geräts) die Gestaltung des Interface stark beeinflussen oder wenn das mobile Interface tendenziell in Richtung Web-App gehen soll. Wenn auf der Website nur in geringem Maße zwischen mobiler und stationärer Nutzung unterschieden wird, kann problemlos auf die parallele Gestaltung der einzelnen Inhalts­elemente gesetzt werden.

Mobile First in der Entwicklungs­phase

Inwieweit die Devise "Mobile First" auch in der Entwick­lungs­phase eine Rolle spielt, hängt stark vom Verlauf der vorangegangenen Projekt­abschnitte ab. Wenn sich aus der Konzeption und dem Webdesign ergibt, dass mobile Elemente sehr dominant und inhaltlich entscheidend sind, sollte sich das auch in der Entwicklungs­phase widerspiegeln. Wenn hingegen die klassische Desktopansicht für die Website-Nutzer wichtiger ist, sollte die mobile Optimierung der Elemente etwas in den Hintergrund rücken.

In jedem Fall sollte man beachten, dass die konkrete Umsetzung flexibel bleibt und sich die Entwicklung nicht zu früh "in kleine Details verrennt". Unabhängig von der Art der Umsetzung wird es im Laufe des Prozesses sehr wahrscheinlich zu unerwarteten Anpassungen kommen - selbst bei Elementen, die eigentlich schon als abgeschlossen galten. Beispielsweise bedingt ein gestalterisches Problem auf Smartphone-Ebene häufig auch eine nachträgliche Anpassung des Designs für größere Displays.

Was sind die Vorteile des Mobile First Designs?

Grundsätzlich gilt: Konzepter, Designer und Entwickler müssen parallel denken und miteinander arbeiten. Dann kann „Mobile First“ einen großen Nutzen für jedes Webprojekt bringen.

Gerade zum Beginn der Konzeption ist die Fokussierung auf die mobile Website-Darstellung sinnvoll - beispiels­weise in der Skribble-Phase, wenn das Layout grob skizziert wird. In dieser frühen Phase dient Mobile First vor allem als Ansatz, um die elementaren Bedürfnisse der künftigen Website-Besucher in den Vordergrund des Designs zu stellen und diese auf dem kleinsten denkbaren Display abzubilden.

Im Laufe des Prozesses sollten das mobile Layout und das Desktop-Layout dann möglichst parallel entstehen, um auf allen Geräten eine klare, nutzerorientierte Darstellung zu erreichen. Denn mit Mobile First soll nicht etwa das Smartphone in den Mittelpunkt der Nutzung gestellt werden, sondern ausgehend von den einge­schränkten gestalterischen Möglich­keiten auf dem Smartphone soll ein ganzheitlich optimiertes Nutzererlebnis erreicht werden.

Responsive Webdesign für Ihre Website

Sie planen einen Website-Relaunch und möchten Ihren Besuchern auf allen Geräten ein optimales Erlebnis bieten? Gerne geben wir Ihnen individuelle Empfehlungen für die Vorgehens­weise bei Ihrem Projekt.

Lesedauer: 4 Minuten
Kategorie
Design
Schlagwort
WebdesignFrontend
Autor
Torben Naujokat schreibt für Pinuts über digitale Themen.
Torben Naujokat
Autor

Torben kümmert sich bei Pinuts um die Website-Inhalte, das Content Marketing und die regelmäßigen Newsletter. Im Blog gibt er hilfreiche Tipps für ambitionierte Online-Marketer.