Ontwerp mobile first omdat de meeste bezoekers op een telefoon zitten

In deze stap ontwerp je je site eerst voor het kleinste scherm en schaal je daarna op naar tablet en desktop, zodat de mobiele bezoeker geen tweede keuze is.

Mobile first betekent dat je je website ontwerpt vanuit het kleinste scherm en daarna pas opschaalt naar tablet en desktop, in plaats van andersom. Dat is geen modeverhaaltje, maar een noodzakelijke aanpak: meer dan zestig procent van het webverkeer komt tegenwoordig binnen op een telefoon. In deze les leer je waarom mobile first werkt en hoe je je ontwerp opbouwt vanuit klein.

Leren: ontwerpen vanuit het smalste scherm

In deze video leg ik uit welke ontwerpkeuzes je vroeg maakt om mobile first te ontwerpen en welke desktop-gewoontes je beter loslaat.

Begrijpen: waarom werkt mobile first?

Wie eerst voor desktop ontwerpt en daarna inkrimpt, eindigt vaak met een mobiele site die voelt als een uitgeklede versie van het echte werk. Mobile first dwingt je om eerst de essentie te kiezen, dat wil zeggen wat moet er op het kleinste scherm staan, en pas daarna te kijken welke verrijking past op grotere schermen. Het bespaart ook laadtijd, want mobiele bezoekers zitten vaker op trager netwerk dan thuiswerkers op wifi.

VrijdagOnline wijst op het bijkomend SEO-effect: Google indexeert sinds enige tijd primair de mobiele versie van je site (mobile-first indexing). Wie zijn mobiele site lichter behandelt, ziet zijn rankings teruglopen. Iquality voegt daar een ontwerpregel aan toe: knoppen op mobiel moeten minimaal vierenveertig pixels hoog zijn, zodat ze met een duim raakbaar zijn zonder per ongeluk de buurknop te tikken. Wie kleinere knoppen kiest, ontwerpt voor muizen op een mobiele site.

De zes principes van mobile first ontwerpen:

1. Begin bij het smalste scherm. Schets eerst de mobiele versie, daarna de tablet en desktop.
2. Eén kolom op mobiel. Geen sidebars of meerdere kolommen, alles onder elkaar.
3. Knopgrootte minimaal 44 pixels hoog. Voor duimvriendelijke interactie.
4. Tekstgrootte minimaal 18 pixels. Body-tekst op mobiel altijd groter dan op desktop.
5. Lichte assets. Beelden gecomprimeerd, geen vier-meter-brede video-headers.
6. Duim-bereikzones. Belangrijkste actie binnen het onderste derde van het scherm voor eenhandig gebruik.

Allroundweb herinnert eraan dat mobile first geen eenmalige keuze is. Je analytics tonen welk percentage van je verkeer op welk apparaat zit, en die verhouding verschuift over de jaren. Check je analytics één keer per kwartaal en pas je ontwerp-prioriteit aan op de werkelijke verhouding, niet op wat je drie jaar geleden besloot.

Toepassen: de blueprint

Vul de Mobile First Blueprint in: één A4 met de zes principes en per principe je huidige stand voor je belangrijkste pagina. Eén pagina, in vijftien minuten beslist.

De eerste actie kost vijf minuten: open je homepage op je telefoon en doorloop de pagina met één hand. Kun je elke knop bereiken zonder van greep te wisselen? Lukt dat niet bij de primaire CTA, dan weet je dat de positie of grootte van de knop vandaag aanpassing vraagt.