Website op mobiel testen: praktische checklist vóór livegang

Een website kan op een brede laptop netjes lijken en op een telefoon toch lastig te gebruiken zijn. Een menu kan niet openen, tekst kan buiten beeld vallen of een formulier kan door het mobiele toetsenbord worden bedekt. Je ontdekt dat sneller door niet alleen naar het ontwerp te kijken, maar de belangrijkste taken op een smal scherm echt uit te voeren.

Deze gids geeft je een praktisch stappenplan voor die controle. Je hebt geen verzameling telefoons nodig: begin met een paar representatieve schermbreedtes in de browser en controleer de belangrijkste route daarna ook op een echte telefoon. Responsive webdesign past de presentatie aan beschikbare ruimte en omstandigheden aan; er bestaat niet één magische breedte die voor elk toestel volstaat. (MDN over responsive webdesign)

Wat betekent een goede mobiele controle?

Het doel is niet dat iedere sectie er identiek uitziet op elk scherm. Controleer of de inhoud leesbaar blijft en of een bezoeker de taak kan afronden: de juiste informatie vinden, een knop gebruiken, een formulier invullen of de volgende stap kiezen. Sommige onderdelen mogen op mobiel onder elkaar staan of een ander menu gebruiken, zolang de volgorde en bedoeling begrijpelijk blijven.

Kies vooraf één belangrijke bezoekersroute. Bijvoorbeeld: homepage openen, dienst bekijken en contact opnemen. Door die route van begin tot eind na te lopen, zie je waar een mobiele bezoeker vastloopt. Een verzameling screenshots zonder zo'n taak vertelt minder over de bruikbaarheid.

Begin met een paar schermbreedtes

Open de ontwikkelaarstools van je browser en schakel de apparaat- of responsive weergave in. Test ten minste een smalle telefoonbreedte, een bredere telefoon en een tabletachtige tussenmaat. De exacte pixels verschillen per apparaat en browserinstelling; gebruik de breedtes als hulpmiddel, niet als certificaat dat elk toestel getest is.

Verander ook de hoogte van het venster. Een smal maar hoog scherm kan anders aanvoelen dan een brede telefoon in liggende stand. Let op menu's, vaste balken, pop-ups en formulieren die ruimte innemen wanneer het scherm weinig hoogte heeft.

Controleer of de pagina nergens opzij schuift

Een onverwachte horizontale scrollbar kan betekenen dat een afbeelding, tabel, lange URL of vaste breedte buiten het scherm loopt. Scroll de pagina van links naar rechts en zoek vervolgens de oorzaak. Verberg de overflow niet blind met CSS: daarmee kan de inhoud wel afgesneden worden zonder dat het onderliggende probleem verdwijnt.

Controleer onderdelen die vaak te breed worden:

• afbeeldingen en video's;
• codevoorbeelden, tabellen en lange woorden;
• navigatie, knoppen en kaartjes in een rij;
• elementen met een vaste pixelbreedte;
• overlays en dialoogvensters.

Een bruikbare lay-out laat media binnen de beschikbare breedte passen en laat tekst op een natuurlijke plek afbreken. De juiste oplossing hangt af van het element; een tabel kan bijvoorbeeld bewust horizontaal scrollen terwijl gewone artikeltekst dat niet hoort te doen.

Loop de leesbaarheid en bediening na

Lees de pagina op de telefoonbreedte zonder in te zoomen. Controleer of de hoofdtekst, tussenkoppen en knoppen visueel van elkaar te onderscheiden zijn. Kijk of een lange titel niet één woord per regel krijgt en of knoppen genoeg ruimte hebben om met een vinger te bedienen.

Gebruik het menu alsof je de site voor het eerst bezoekt. Is duidelijk hoe je het opent en sluit? Blijft de primaire actie zichtbaar? Kun je terug naar een eerder onderdeel zonder eerst eindeloos te zoeken? Houd belangrijke informatie en acties in een logische leesvolgorde wanneer kolommen op mobiel onder elkaar komen.

Probeer daarna toetsenbordbediening. Een echte telefoon gebruikt meestal aanraking, maar de toetsenbordcontrole laat ook zien of focus in een logische volgorde beweegt en of een menu of dialoog niet onbedoeld focus opsluit. W3C raadt aan na te gaan of bediening met toetsenbord beschikbaar is en of focus zichtbaar blijft. (W3C: eenvoudige toegankelijkheidscontroles)

Test afbeeldingen, formulieren en vaste onderdelen

Afbeeldingen horen zich aan de kolom aan te passen, zonder dat belangrijke inhoud wordt afgesneden. Een art direction-uitsnede mag op mobiel anders zijn, maar controleer dat het onderwerp nog te begrijpen is. Let ook op bestandsgrootte: grote afbeeldingen kunnen mobiel laden vertragen. Google adviseert kwalitatieve, relevante afbeeldingen op pagina's die er inhoudelijk bij passen en verwijst naar responsieve afbeeldingspraktijken. Dat maakt een afbeelding geen rankinggarantie; ze moet vooral de pagina helpen. (Google over afbeeldingen in Search)

Vul elk belangrijk formulier in met het mobiele toetsenbord. Test de juiste toetsenbordsoort voor e-mail, telefoon of getal waar dat relevant is, en kijk of de verzendknop zichtbaar blijft wanneer het toetsenbord opent. Probeer zowel een ontbrekend verplicht veld als een ongeldige waarde. Controleer dat de foutmelding duidelijk uitlegt wat je moet aanpassen en dat je niet alle al ingevulde velden kwijtraakt.

Vaste cookiebalken, chatknoppen en sticky call-to-actions kunnen op een klein scherm belangrijke inhoud bedekken. Controleer of je de pagina nog kunt lezen en bedienen wanneer zo'n element zichtbaar is. Test ook of de sluitknop werkt en met toetsenbord bereikbaar blijft.

Test de belangrijkste route op een echte telefoon

De apparaatweergave in een browser is handig om breedtes te variëren, maar vervangt geen controle op een fysiek toestel. Open daarom de site minstens één keer op een echte telefoon. Gebruik de navigatie, tik op links, typ in een veld en bekijk de pagina zowel rechtop als — wanneer relevant — gedraaid.

Als je geen tweede toestel hebt, kun je de site op je eigen telefoon openen en de belangrijkste route zelf volgen. Noteer toestel en browser bij een probleem; anders is het lastiger om het later te reproduceren. Vermijd de conclusie “mobiel werkt overal” na één schermcontrole.

Checklist vóór je website live gaat

Doorloop deze punten voor elke belangrijke pagina of bezoekersroute:

• ☐ De pagina past in de breedte en belangrijke inhoud wordt niet afgesneden.
• ☐ Titel, tekst en knoppen zijn leesbaar zonder horizontaal scrollen.
• ☐ Het menu opent, sluit en laat zien waar je naartoe kunt.
• ☐ Links en knoppen zijn makkelijk aan te tikken en hebben een duidelijke functie.
• ☐ Kolommen, kaarten en afbeeldingen herschikken logisch op een smal scherm.
• ☐ Formuliervelden zijn zichtbaar wanneer het toetsenbord open is.
• ☐ Fouten leggen uit wat er nodig is en wissen geen bruikbare invoer.
• ☐ Vaste balken en pop-ups bedekken geen noodzakelijke bediening.
• ☐ De belangrijkste route is op minstens één echte telefoon nagelopen.
• ☐ Je hebt problemen genoteerd met route, schermbreedte en reproduceerstappen.

Dit is een praktische eerste controle, geen volledige toegankelijkheids- of browsercompatibiliteitsaudit. Voor algemene vindbaarheid kun je daarna ook de SEO-checklist voor een nieuwe website nalopen.

Laat Claude Code helpen zonder zelf de controle over te slaan

Je kunt Claude Code vragen om de relevante responsive componenten te onderzoeken en gerichte controlepunten voor te stellen. Geef wel de route, het probleem en de schermbreedte. Vraag niet om “maak alles mobielvriendelijk” zonder scope; dat kan leiden tot brede stijlaanpassingen die je niet makkelijk kunt controleren.

Onderzoek waarom [concreet onderdeel] op route [route] moeilijk te gebruiken is op een scherm van ongeveer [breedte] pixels.

Wijzig nog geen bestanden. Benoem de relevante componenten, bestaande responsive patronen en mogelijke oorzaak. Behoud de huidige desktopweergave en alle bestaande werking.

Stel een kleine oplossing voor en noem hoe ik die op smal en breed scherm kan controleren. Voer pas na mijn akkoord de wijziging uit. Bekijk daarna de diff en test de echte route lokaal.

Voor een bestaande site is het nuttig om eerst de code en grenzen te verkennen. Lees daarvoor ook het stappenplan om een bestaande website met Claude Code aan te passen. Een mobiele controle is pas klaar wanneer de route op het scherm goed aanvoelt én de bestaande werking behouden is.