Kennisbank
Websites & Webflow
Mobielvriendelijkheid van je website controleren
Controleer je website op een echte telefoon én in de mobiele weergave van je browser. Let op leesbare tekst zonder inzoomen, knoppen die groot genoeg zijn, een werkend menu, formulieren die prettig invullen, geen horizontaal scrollen, geen pop-ups die de inhoud blokkeren en een snelle laadtijd op mobiel netwerk.
Google beoordeelt websites op basis van de mobiele versie (mobile-first indexing), en voor veel bedrijven komt het grootste deel van de bezoekers via een telefoon. Een website die op de computer mooi is maar op mobiel lastig werkt, kost dus vindbaarheid én klanten. Google heeft zijn aparte mobielvriendelijkheidstest uitgefaseerd; zelf controleren is daarom de praktische route.
Zo test je
- Op een echte telefoon, via mobiel netwerk (niet alleen wifi).
- In je browser: open de ontwikkelaarstools (F12) en schakel de apparaatweergave in. Test verschillende breedtes, ook een klein scherm.
- Met PageSpeed Insights voor de laadsnelheid op mobiel.
- De belangrijkste paden: homepage, een dienst- of productpagina, het contactformulier of de bestelling.
Checklist
Leesbaarheid
- ☐ Tekst is leesbaar zonder in te zoomen (basistekst rond 16 pixels of groter).
- ☐ Voldoende contrast tussen tekst en achtergrond. Zie Kleurcontrast controleren.
- ☐ Regels zijn niet te breed en alinea's niet te lang. Zie Leesbaarheid.
Layout
- ☐ Geen horizontaal scrollen; niets steekt buiten het scherm.
- ☐ Afbeeldingen en tabellen schalen mee of zijn horizontaal scrollbaar binnen hun eigen blok.
- ☐ Belangrijke informatie en de hoofdknop staan hoog genoeg.
Bediening
- ☐ Knoppen en links zijn groot genoeg om met een duim te raken, met ruimte ertussen.
- ☐ Het menu opent en sluit goed, ook submenu's.
- ☐ Telefoonnummer en e-mailadres zijn klikbaar.
- ☐ Er staan geen pop-ups of banners die de inhoud grotendeels bedekken en lastig te sluiten zijn.
Formulieren
- ☐ Velden zijn groot genoeg en hebben duidelijke labels.
- ☐ Het juiste toetsenbord verschijnt (cijfers bij telefoon, @ bij e-mail).
- ☐ Foutmeldingen zijn zichtbaar zonder te scrollen.
- ☐ Verzenden werkt en de bevestiging verschijnt.
Snelheid
- ☐ De pagina is binnen enkele seconden bruikbaar op mobiel netwerk.
- ☐ Geen zware video's of grote afbeeldingen bovenaan. Zie Afbeeldingen optimaliseren.
- ☐ De Core Web Vitals voor mobiel zijn in orde. Zie Core Web Vitals controleren.
Inhoud
- ☐ De mobiele versie bevat dezelfde belangrijke inhoud als de desktopversie (niets verborgen of weggelaten).
Veelvoorkomende oorzaken van problemen
- Vaste breedtes in het ontwerp in plaats van flexibele layouts.
- Tabellen of ingesloten elementen (kaarten, video's) zonder mobiele aanpassing.
- Cookiebanners of chatknoppen die over knoppen of tekst heen vallen.
- Te kleine lettergrootte die in het ontwerp op desktop goed oogde.
Waar begin je?
Begin bij de pagina's die mobiel het meest worden bezocht en die het dichtst bij een aanvraag of aankoop staan: meestal de homepage, je belangrijkste dienst- of categoriepagina's en de contact- of afrekenpagina. Een probleem op de contactpagina kost direct aanvragen; een probleem op een oud blogartikel veel minder. In GA4 zie je per apparaat welke pagina's het meest worden bezocht. Zie Mobiele conversie verbeteren voor wat je daarna verbetert.
Snelle test met je eigen telefoon
- Open de pagina via mobiel internet, niet via wifi.
- Probeer de belangrijkste actie uit te voeren: bellen, het formulier versturen, een product bestellen tot aan de betaling.
- Draai je telefoon een keer naar liggend.
- Vergroot de tekst in de instellingen van je telefoon en kijk of de pagina nog werkt.
Voorbeeld
Stel: een restaurant ziet in GA4 dat mobiele bezoekers zelden reserveren. Bij een test op een telefoon blijkt de reserveringsknop onder een cookiebanner en een chatknop te verdwijnen, en het reserveringsformulier opent in een venster dat breder is dan het scherm. Na het aanpassen van de positie van de chatknop en een mobiele versie van het formulier is reserveren op mobiel weer eenvoudig.
Werk je met Webflow en zijn animaties op mobiel traag of hinderlijk, zie dan Webflow-interacties en snelheid in balans houden.
Veelgestelde vragen
Bestaat de Google mobielvriendelijkheidstest nog?
Google heeft de losse test en het bijbehorende rapport in Search Console uitgefaseerd. Gebruik PageSpeed Insights en Lighthouse, en test zelf op apparaten.
Is een responsive website automatisch mobielvriendelijk?
Niet automatisch. Responsive betekent dat de layout meeschaalt; of het prettig werkt, moet je testen.
Hoe zie ik hoeveel bezoekers mobiel komen?
In GA4 onder Rapporten → Tech → Overzicht, of door op apparaatcategorie te filteren.
Moet de mobiele versie dezelfde inhoud hebben?
Ja, voor Google is de mobiele versie leidend. Inhoud die alleen op desktop staat, telt mogelijk niet mee.
Hoe vaak moet ik dit controleren?
Na elke grote wijziging aan het ontwerp of nieuwe functies, en verder elk halfjaar.
Hulp nodig?
Werkt je website niet goed op mobiel? Bekijk onze aanpak voor UX/UI-design.
Test ook op een kleiner of ouder toestel. Wat op een nieuwe telefoon goed werkt, kan op een klein scherm net buiten beeld vallen.
Kennisbank
Verder lezen
