5 tips voor een goed mobile-first ontwerp

Knoppen die niet goed klikbaar zijn, vervelende pop-ups en te kleine afbeeldingen: dit zijn nog maar enkele voorbeelden van een niet-doordacht mobiel ontwerp. Anno 2026 is het belangrijk om te zorgen dat je webshop (of website) goed werkt op elk apparaat, want gemiddeld is bijna de helft van het verkeer afkomstig van mobiele apparaten. Bij een B2C-webshop is dat vaak zelfs meer dan 75%. Als je hier geen rekening mee houdt, loop je al snel omzet mis.

Om die reden ontwerpen wij mobile-first. Het idee hierachter is simpel: je start het ontwerpproces bij het kleinste scherm en pas daarna ga je door naar het grote scherm. Zo kun je alle overbodige elementen weglaten. Dit zorgt ervoor dat datgene wat je wilt vertellen altijd goed overkomt, ongeacht het apparaat.

1. Schermformaat

Volgens statcounter gebruiken de meeste Nederlanders een mobiel met een schermresolutie van 390 x 844 pixels. Dit gebruiken wij dan ook tijdens het ontwerpen van onze websites. Goed is om ook rekening te houden met minder brede schermen, houd hierbij rekening met minimaal 320 pixels in de breedte.

2. Houd tekst leesbaar

Het is belangrijk dat tekst niet te klein en goed leesbaar is. Zorg ervoor dat de body teksten 16 pixels of hoger zijn. Voor kleine teksten, zoals captions, is minimaal 14 pixels aangeraden.

Om tekst leesbaar te houden maken wij in al onze websites gebruik van REM. Zo schaalt de gehele website mee met je systeem. In je systeeminstellingen, bijvoorbeeld op je iPhone of Android toestel, wordt vaak voor een basis lettergrootte gekozen. Onze websites zijn zo gemaakt dat deze automatisch worden gebruikt in de website, zo zijn teksten voor iedere doelgroep goed leesbaar. Ongeacht of je je lettergrootte op heel klein, of heel groot zet.

3. Maak knoppen groot genoeg

Het is belangrijk dat knoppen en klikbare elementen groot genoeg zijn, houd altijd minimaal 36 pixels aan voor knoppen, maar 48 – 64 pixels is aan te raden om deze goed klikbaar te maken.

Zorg er daarnaast voor dat er genoeg ruimte zit tussen klikbare elementen, zo voorkom je misklikken en daarmee ook frustratie bij de bezoeker. Houd bij kleine knoppen minimaal 24 pixels aan, bij grote knoppen minimaal 12 pixels afstand.

4. Plaats knoppen binnen duimbereik

Ruim de helft van de mensen gebruikt hun mobiel met 1 hand, vandaar dat het goed is om ook hier bij het ontwerpen van je webshop of website rekening mee te houden.

Plaats belangrijke knoppen, zoals “In winkelwagen” knoppen onderaan tot maximaal 30% van het scherm van de onderkant. Op deze manier zorg je ervoor dat de knoppen met zo min mogelijk frictie te klikken zijn.

5. Testen, testen, testen

Om er zeker van te zijn dat je webshop of website op mobiel goed werkt kun je het prototype op mobiel testen. Maak bijvoorbeeld gebruik van de Figma app, om zo direct je ontwerp op je telefoon te kunnen bekijken. Op deze manier zie je ook direct of teksten de juiste groottes hebben, of knoppen goed klikbaar zijn en of je nog bepaalde interacties mist.

Werk ook menu’s, filters en andere klikbare elementen uit, op deze manier zorg je ervoor dat de website goed functioneert en duidelijk is voor de gebruiker.

Ook zorgt dit ervoor dat je developer hand-off goed gebeurt en dat de webshop gebouwd wordt waarin de bezoeker centraal staat.