Mobile First ist Luke Wroblewskis Ansatz, zuerst für den kleinsten Bildschirm zu gestalten und den Entwurf danach für größere Bildschirme zu erweitern. Die Grenzen des Telefons erzwingen den Fokus auf das Wesentliche; in CSS heißt das Grundstile für kleine Bildschirme und min-width-Media-Queries für breitere.

Mobile First

Details
Vollständiger Name

Mobile First — zuerst für den kleinen Bildschirm gestalten und für größere Bildschirme ergänzen, wie Luke Wroblewski es definiert hat

Auch bekannt als

Mobile-First-Design, Mobile-First-CSS

Kernkonzepte:

  • Zuerst den kleinen Bildschirm gestalten. Die mobile Fassung ist der Ausgangspunkt, keine geschrumpfte Kopie der Desktop-Seite.

  • Wachstum heißt Chance. Wroblewskis erster Grund: Die wachsende mobile Nutzung ist eine Chance, mehr Menschen zu erreichen.

  • Beschränkung erzwingt Fokus. Ein kleiner Bildschirm lässt nur Platz für das Wichtigste. Wer das zuerst entscheidet, schärft das Produkt auf jedem Bildschirm.

  • Fähigkeiten ermöglichen Innovation. Wer für die Fähigkeiten von Mobilgeräten gestaltet, schafft Raum für neue Ideen.

  • Eine Strategie der Prioritäten. Mobile First entscheidet, welche Inhalte und Aktionen zuerst kommen. Die CSS-Technik folgt aus dieser Entscheidung.

  • In CSS: Basis-Styles, dann min-width. Die Basis-Styles bedienen den kleinen Bildschirm; min-width-Media-Queries ergänzen das Layout für breitere Viewports. Das ist Progressive Enhancement.

    Wichtige Vertreter

    Luke Wroblewski, der das Konzept 2009 erstmals definierte und drei Gründe nannte — Wachstum, Fokus, Innovation (Interview mit Webdesigner Depot, 2013; Folien); sein Buch Mobile First (A Book Apart, Oktober 2011) hat ein Vorwort von Jeffrey Zeldman

Wann verwenden:

  • Responsives CSS schreiben, damit die Basis-Styles das Smartphone bedienen und breitere Layouts darauf aufbauen

  • Die Prioritäten von Inhalten und Aktionen einer Seite oder eines Produkts festlegen

  • Ein Stylesheet auf Desktop-First-Muster prüfen

  • Als Gegenanweisung, wenn generiertes CSS vom Desktop-Layout ausgeht und es mit max-width-Queries überschreibt

Häufige Missverständnisse:

  • Es auf min-width-Media-Queries verkürzen. Die Queries sind die Technik. Die Idee ist eine Strategie der Prioritäten.

  • Erwarten, dass Mobile First der Normalfall ist. In unserem Prior-Test am 28.10.2026 (CSS für eine responsive Liste von Produktkarten) schrieben alle sechs Baselines eine max-width-Media-Query, das Desktop-First-Muster. Mit „Mobile First“ schrieben alle sechs Läufe min-width-Queries und keiner max-width.

  • Es als „nur mobil“ oder „native App zuerst“ lesen. Mobile First betrifft die Reihenfolge der Gestaltung im Web. Es heißt weder, nur für Smartphones zu bauen, noch mit einer App zu beginnen.

  • Für mobile Nutzer Funktionen streichen. Die Beschränkung legt Prioritäten fest. Sie heißt nicht, dass mobile Nutzer weniger bekommen.

Kritik:

  • Der Begriff bedeutet zu viel. Brad Frost stellt in "The Many Faces of 'Mobile First'" (13. August 2012) fest, der Begriff werde auf unzählige Arten verwendet („we’re seeing it used in myriad different ways“). Er wurde zum Sammelbegriff und oft mit „native App zuerst“ verwechselt.

  • „Mobil“ ist der falsche Rahmen. Adam Sedwick fragt in "Is 'Mobile-First' as an idea dead?" (UX Collective), ob die Idee noch trägt. „Mobil“ lasse an ein Smartphone mit Touch und langsamer Verbindung denken. Er schlägt einen Ansatz vor, der vom Gerät unabhängig ist und sich auf Performance konzentriert.