Mobile-first design betekent dat je het ontwerp begint met het kleinste scherm, de telefoon, en daarna layout en detail toevoegt naarmate het scherm groter wordt. In plaats van een desktopsite samenpersen tot hij op een telefoon past, bouw je vanaf de telefoon naar buiten op. Het draait de oude gewoonte om om eerst voor grote monitoren te ontwerpen.
De beperking is juist het punt. Een telefoonscherm heeft geen ruimte voor rommel, dus je wordt gedwongen te kiezen wat echt telt: de hoofdboodschap, de belangrijkste knop, dat ene wat de gebruiker kwam doen. Stel je voor dat je voor een weekendje inpakt in een klein tasje in plaats van een enorme koffer. Het kleine tasje dwingt je tot wat je echt nodig hebt, en het resultaat is meestal lichter en duidelijker. Die discipline past natuurlijk bij responsive design, dat dezelfde pagina laat meebewegen over apparaten met behulp van fluid grids.
Werkt de telefoonlayout eenmaal, dan schaal je op. Een blok met twee kolommen op een monitor van 1440px stapelt op een telefoon van 375px netjes tot één kolom. De navigatie die op desktop over de hele breedte past, klapt in tot één menuknop. Doordat je vanaf de krappe versie begon, is elk breder breakpoint een kwestie van ruimte toevoegen, niet van onder druk dingen schrappen. Die volgorde scheelt je later in het project veel herstelwerk. Klein beginnen maakt sites ook vaak sneller, omdat je niet standaard zware desktop-assets op telefoons laadt. Een hero-afbeelding op laptopformaat kan zo vijf keer zwaarder zijn dan een telefoon echt nodig heeft. Snelheid en helderheid bewegen hier dezelfde kant op, en op mobiel bepalen ze allebei rechtstreeks of iemand blijft of wegklikt.
Bij TopDevs ontwerpen en testen we vanaf het eerste scherm op echte telefoonformaten, zodat de ervaring scherp blijft of de klant van een klant nu in de trein zit of achter een bureau.
