Mobile-first is een manier van websites bouwen waarbij de telefoonversie als eerste komt en de desktopversie daarvandaan wordt opgebouwd. In plaats van een breed scherm te ontwerpen en dat daarna op een telefoon te persen, begin je met het smalle scherm en voeg je toe naarmate er ruimte is.
Stel je voor dat je inpakt voor een reis met een kleine handbagagetas. Je wordt gedwongen om alleen mee te nemen wat je echt nodig hebt, dus houd je het wezenlijke over en niets overbodigs. Stap je later over op een grote koffer, dan kun je extra’s toevoegen, maar de kern zit al strak en bruikbaar in elkaar. Responsive bouwen vanaf de telefoon werkt net zo: de lay-out blijft gefocust en elk breakpoint voegt detail toe in plaats van rommel op te ruimen.
Er is ook een harde zakelijke reden. Google indexeert de mobiele versie van je pagina’s, dus een site die prima werkt op een telefoon scoort en converteert meestal beter. En omdat mobile-first-pagina’s licht beginnen, laden ze doorgaans sneller, wat je Core Web Vitals over de hele linie helpt.
In CSS is deze aanpak de natuurlijke. Je basisstijlen beschrijven de telefoon, en met min-width media queries leg je de desktopdetails eroverheen. De klassieke fout is andersom: eerst desktopstijlen schrijven en die met max-width queries weer terugdraaien voor telefoons, wat overrides opstapelt en vaak een zware pagina naar de kleinste apparaten stuurt.
Mobile-first is een startpunt, geen eindpunt. Een telefoonlay-out die simpelweg uitrekt tot hij een breed scherm vult, oogt leeg en verspilt de ruimte, dus elk groter breakpoint moet de gewonnen ruimte ook echt gebruiken. Het doel is een ontwerp dat op elke breedte doordacht aanvoelt, niet één scherm dat in de andere wordt geperst of uitgerekt.
Bij TopDevs bouwen we elke klantsite mobile-first en leggen we daarna de bredere lay-outs eroverheen, zodat het werkt op het apparaat dat de meeste van je klanten echt gebruiken.
