Ist "Mobile First" noch sinnvoll?

Mobile First

Vor einigen Jahren sorgte "Mobile First" als Designtrend für große Aufmerksamkeit. Da die mobile Internetnutzung rasant zunahm, forderten vielen Frontend-Designer zuerst die "kleine Variante" einer Website zu entwerfen, bevor die Desktopversion 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" 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 grundsätzlich drei denkbare Ansätze: 

  • Man betrachtet die kleinsten Mobilgeräte zuerst.
  • Man konzentriert sich am Anfang auf die größtmö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 Webprojekts beim kleinsten Viewport beginnt und im weiteren Verlauf auf größere Bildschirme ausgeweitet wird. Wenn man die Vorgehensweise allerdings etwas offener betrachtet, sind einige Variationen 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 Displaygrößen) erfolgen, jeweils abhängig von den voraussichtlichen Nutzungsszenarien. Darüber hinaus lässt sich Mobile First auf einzelne Abschnitte des Projektverlaufs beziehen (v.a. die Bereiche Konzeption, Design und Umsetzung) oder es kommt als Devise für den Gesamtprozess zum Einsatz.

Inwieweit Mobile First sinnvoll ist, lässt sich leider nicht allgemeingültig sagen. Bezogen auf die einzelnen Projektphasen 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 Vordergrund.

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 Zielgruppen bzw. Personas des Unternehmens bringen.

Designphase unter der Mobile First Devise

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 Inhaltselemente gesetzt werden.

Machen Sie Ihre Website fit für mobile Geräte

Teaser Lösungsblatt Responsive Webdesign

Wer "Mobile First" denkt, braucht auch Responsive Webdesign. Aber wissen Sie schon alles über die moderne Designumsetzung? In unserem Lösungsblatt lesen Sie,

  • warum Responsive Design wichtig ist.
  • welche Fehler Sie vermeiden sollten.
  • wie sich Responsive Design entwickelt.

Die Geheimnisse des Responsive Webdesign

Mobile First in der Entwicklungsphase

Inwieweit die Devise "Mobile First" auch in der Entwicklungsphase eine Rolle spielt, hängt stark vom Verlauf der vorangegangenen Projektabschnitte 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 Entwicklungsphase 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.

Fokussierung auf die Vorteile von Mobile First

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 - beispielsweise 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 eingeschränkten gestalterischen Möglichkeiten auf dem Smartphone soll ein ganzheitlich optimiertes Nutzererlebnis erreicht werden.

Newsletter abonnieren

Die besten Tricks und Expertentipps für rundum erfolgreiche Webprojekte.

Folgen Sie uns ...

... und verpassen Sie nie wieder einen neuen Beitrag in unserem Blog.

Sie haben noch Fragen?

Dann kontaktieren Sie uns einfach und wir stehen sofort zur Verfügung.

Nachricht senden

×

Eine Nachricht senden...

Formular wird geladen ...

Tipps der Redaktion

Um-logo-teaser

Professionelle Newsletter: zielgerichtet und persönlich

  • E-Mails direkt aus dem CMS
  • Individuelle Segmentierung
  • Effiziente Marketing Automation

Hier gibt's alle Details

×Schließen