Luke Wroblewski gaf de werkwijze in 2009 zijn naam, maar de onderliggende logica was al langer aanwezig. Telefoons waren de belangrijkste manier geworden waarop mensen toegang kregen tot het internet, en het ontwerpen van lay-outs voor desktops dwong ontwerpers om complexiteit later in kleine schermen te persen. Mobile-first draait de volgorde om. Begin met het kleinste scherm, bepaal wat het belangrijkst is, en breid dan uit naar lay-outs voor tablets en desktops.

De beperking is productief. Een smal scherm dwingt tot prioriteren. De navigatie wordt samengevouwen tot een menu. De inhoud wordt in één kolom weergegeven. Elk element moet zijn eigen plek rechtvaardigen. Ontwerpers schetsen duimvriendelijke aanraakpunten, houden rekening met gebruik met één hand en plannen voor trage internetverbindingen. Wanneer het ontwerp wordt aangepast aan een groter scherm, wordt de extra ruimte gebruikt voor ademruimte en secundaire panelen in plaats van volgepropt met nieuwe rommel.

Kernpraktijken

• Begin met wireframes op de breedte van een telefoon.
• Geef meedogenloos prioriteit aan de inhoudshiërarchie.
• Ontwerp touch targets van minimaal 44 pixels.
• Schaal de weergave op naar tablet en desktop als laatste.

Responsief ontwerp en mobile-first gaan vaak hand in hand. Mobile-first stelt de prioriteit, terwijl responsief ontwerp zorgt voor de aanpassing aan verschillende schermformaten.