In 2026 wordt 62% van alle webverkeer in Nederland gegenereerd via smartphones. Dat percentage is al jaren stijgende en geldt voor vrijwel elke sector. Toch worden de meeste websites nog steeds eerst ontworpen voor desktop en daarna “mobielvriendelijk” gemaakt. Dat is de verkeerde volgorde.
Mobile-first is geen trend. Het is de standaard. En als jouw website het niet is, betaal je daar dagelijks de prijs voor in gemiste leads en omzet.
Wat mobile-first niet is
Mobile-first betekent niet dat je dezelfde desktop-website kleiner maakt. Het betekent dat je het ontwerp begint voor het kleinste scherm en daarna uitbreidt naar grotere schermen.
De meeste “responsive” websites zijn eigenlijk “desktop-first” met een mobiele versie als bijgedachte. Je herkent ze aan:
- Tekst die te klein is om zonder inzoomen te lezen
- Knoppen die te dicht op elkaar zitten om met een vinger te klikken
- Horizontale scrollbalken die op mobiel verschijnen
- Formulieren waarvan de velden te smal zijn om in te typen
- Pop-ups die het scherm volledig bedekken op mobiel
De 5 pijlers van mobile-first design
1. Leesbare typografie zonder inzoomen
Gebruik minimaal 16px voor hoofdtekst. Titels mogen groter zijn, maar nooit zo groot dat ze niet op het scherm passen. Test altijd op een echt apparaat, niet alleen in Chrome DevTools — die simuleren niet perfect hoe de tekst aanvoelt.
2. Aanraakbare knoppen van minimaal 44x44px
Apple en Google hanteren beide 44 x 44 pixel als minimale aanraakgrootte. Knoppen die kleiner zijn veroorzaken frustratie en mis-taps. Zet knoppen bovendien niet te dicht op elkaar: minimaal 8px ruimte ertussen.
3. Prioriteer content boven de vouw
Op een smartphone is de “vouw” (het deel dat zonder scrollen zichtbaar is) slechts 667 pixel hoog op een iPhone SE. Dat is weinig ruimte. Je waardepropositie, de meest relevante afbeelding en de call-to-action moeten allemaal zichtbaar zijn zonder scrollen.
4. Eenvoudige navigatie
Een hamburgermenu is de standaard op mobiel, maar zorg dat het ook echt werkt. Gebruik grote menulinks (minimaal 44px hoog), een duidelijke sluiten-knop en een overlay die de rest van de pagina blokkeert. Test of het menu goed werkt met duim-navigatie — de rechterduim heeft een beperkt bereik op een groot scherm.
5. Formulieren die werken op mobiel
Formulieren zijn de conversie-killer op mobiel. Minimaliseer het aantal velden, gebruik de juiste invoertypen (zodat het juiste toetsenbord verschijnt), en maak de verzendknop groot genoeg. Vermijd dropdowns voor lange lijsten — gebruik radiobuttons of tabbladen in plaats daarvan.
Het Google Mobile-First indexering effect
Sinds 2024 gebruikt Google volledig mobile-first indexering. Dat betekent: Google kruipt en rankt je website op basis van de mobiele versie. Als je mobiele versie minder content heeft dan je desktop-versie, mis je die content in je ranking.
Praktisch gevolg: zorg dat alle belangrijke tekst, afbeeldingen en links ook op mobiel aanwezig zijn. Verberg geen content met display:none op mobiel die je wel wilt laten indexeren.
Test je eigen website nu
Doe dit even: pak je telefoon, open jouw website en probeer het volgende:
- Kun je de tekst lezen zonder in te zoomen?
- Kun je met je duim alle menu-items bereiken?
- Laadt de pagina binnen 3 seconden op 4G?
- Kun je het contactformulier makkelijk invullen?
- Zijn alle knoppen groot genoeg om op te drukken?
Als je op een of meer vragen “nee” antwoordt, lopen er bezoekers weg die je nooit ziet.
Wil je een mobile-first website die converteert?
We bouwen alle websites mobile-first, getest op echte apparaten. Plan een gratis kennismaking en we laten je zien wat er beter kan.