Mobile-First Design ist ein Vorgehen, bei dem Layout und Inhalt einer Seite zuerst für den kleinen Bildschirm entworfen und danach für größere Breiten erweitert werden. Die kleine Ansicht bildet den Ausgangszustand, aus dem alles Weitere abgeleitet wird. Der Begriff geht auf Luke Wroblewski zurück, der ihn 2009 prägte und 2011 in seinem Buch „Mobile First“ ausarbeitete. Es handelt sich um eine Entwurfsrichtung innerhalb von Responsive Design: Sie legt die Reihenfolge fest, in der gearbeitet wird.
- Mobile-First Design
Vorgehen, bei dem Layout und Inhalt zuerst für die kleine Ansicht entworfen und danach für größere Bildschirme erweitert werden.
Beispiel: „Wir bauen den Prototyp mobile-first, die Desktop-Ansicht kommt in der zweiten Runde.“Auch: Mobile First, mit und ohne Bindestrich. Der Begriff beschreibt allein die Reihenfolge im Entwurf. Über die Gewichtung der Geräte sagt er nichts aus.
Gegenbegriff: Desktop-First Design beginnt bei der großen Ansicht und leitet die kleineren daraus ab.
Warum die Reihenfolge etwas ändert
Wer mit rund 375 Pixeln Breite anfängt, muss früh entscheiden, was auf diese Fläche gehört. Jedes Element konkurriert sichtbar um Platz, und die Frage nach der wichtigsten Aussage lässt sich nicht aufschieben. Was am Ende oben steht, ist damit eine bewusste Entscheidung aus der ersten Entwurfsrunde.
Beim umgekehrten Weg fällt dieselbe Entscheidung erst beim Verkleinern, und sie fällt unter Druck. Was keinen Platz mehr findet, wandert in eine Klappbox oder verschwindet ganz. Welche Inhalte überhaupt zur Verfügung stehen, klärt der Content-First-Ansatz noch eine Ebene davor.
Was Mobile-First im CSS bedeutet
Im Stylesheet erkennst du die Richtung an den Abfragen. Die Grundgestaltung steht ohne Media Query und gilt damit für jedes Gerät. Alles Weitere kommt über Abfragen mit min-width dazu und greift ab einer bestimmten Breite nach oben hin. Die Regeln bauen aufeinander auf, statt einander zu überschreiben, und das Stylesheet bleibt an den Stellen kurz, die auf kleinen Geräten gelten.
Der Nebeneffekt ist angenehm: Ein Gerät mit kleinem Bildschirm bekommt den schlichtesten Zustand, ohne dafür Ausnahmen verarbeiten zu müssen. Sonderregeln entstehen dort, wo mehr Platz da ist.
Der häufigste Fehler beim Umstieg
Mobile-First wird oft als Auftrag verstanden, Inhalte zu streichen. Gemeint ist das Sortieren nach Wichtigkeit. Eine Leistungsseite braucht auf dem Telefon dieselben Antworten wie am Schreibtisch, nur in einer Reihenfolge, die sich beim Scrollen erschließt. Aus unseren Relaunch-Projekten stammt die häufigste Korrekturschleife genau aus dieser Verwechslung: Erst fehlen die Details auf dem Telefon, dann werden sie nachträglich wieder eingebaut.
Die zweite Stolperstelle liegt im Ablauf. Wenn die Abstimmung weiter an Desktop-Entwürfen stattfindet, entsteht die kleine Ansicht trotz aller Absichtserklärungen als Zweitverwertung. Wir empfehlen deshalb, die Telefon-Ansicht in jeder Abstimmungsrunde zuerst zu zeigen.