Luke Wroblewski gav praksissen sit navn i 2009, men logikken var allerede påtrængende. Telefoner var blevet den primære måde, folk nåede internettet på, og design af desktop-layouts tvang først designere til at proppe kompleksitet ind på små skærme senere. Mobil-først vender rækkefølgen om. Start med den mindste skærm, beslut, hvad der betyder mest, og udvid derefter opad til tablet- og desktop-layouts.

Begrænsningen er produktiv. En smal visning tvinger frem sortering. Navigationen kollapser til en menu. Indhold flyttes til en enkelt kolonne. Hver funktion skal retfærdiggøre sin plads. Designere skitserer tommelfingervenlige trykmål, overvejer brug med én hånd og planlægger langsomme forbindelser. Når designet vokser til en større skærm, bruges den ekstra plads til pusterum og sekundære paneler i stedet for at blive proppet med nyt rod.

Kernepraksis

• Start wireframes ved telefonbredde.
• Prioritér indholdshierarki nådesløst.
• Design berøringspunkter på mindst 44 pixels.
• Skaler op til tablet og desktop sidst.

Responsivt design og mobil-først går ofte hånd i hånd. Mobil-først sætter prioriteten. Responsivt design håndterer tilpasningen på tværs af breakpoints.