Mobiele gebruiksvriendelijkheid check voor betere ervaring op telefoon
Mobiele bruikbaarheid gaat over hoe goed je website werkt op een smartphone: of de pagina meeschaalt met het scherm, of knoppen en links groot genoeg zijn om met een vinger te raken, of tekst leesbaar is zonder in te zoomen en of alles snel genoeg laadt op een mobiele verbinding. Het overgrote deel van het bezoek aan veel sites komt tegenwoordig van mobiel, en Google indexeert met de mobiele versie van je site (mobile-first). Een site die op desktop prima oogt maar op de telefoon hapert, kost je dus zowel bezoekers als vindbaarheid.
Controlepunten
Waarom dit belangrijk is
Mobiel bezoek is voor de meeste sites de meerderheid, dus een slechte mobiele ervaring raakt direct je grootste publiek. Google gebruikt mobile-first indexing: de mobiele versie van je site bepaalt grotendeels je positie in de zoekresultaten, dus problemen die alleen op de telefoon spelen drukken je vindbaarheid. Bezoekers die moeten knijpen om te zoomen, een verkeerde knop raken of horizontaal moeten scrollen, haken sneller af; dat verlaagt je conversie en verhoogt het bouncepercentage. Trage mobiele snelheid versterkt dit effect, omdat mensen op een telefoon vaak op een wisselende verbinding zitten en minder geduld hebben. Een goede mobiele bruikbaarheid bouwt vertrouwen: een site die soepel en netjes voelt op de telefoon, oogt professioneel en betrouwbaar. Omgekeerd ondermijnt een rommelige mobiele weergave het vertrouwen, ook als de inhoud zelf in orde is.
Veelvoorkomende bevindingen
Mobiele bruikbaarheid begint bij de viewport-meta-tag in de HTML. Met de regel <meta name="viewport" content="width=device-width, initial-scale=1"> vertel je de browser dat de pagina de breedte van het toestel moet aanhouden en op normale schaal moet starten. Ontbreekt die tag, dan gaat een mobiele browser uit van een desktopbreedte (vaak rond de 980 pixels) en perst de hele pagina in het scherm. Het gevolg is piepkleine tekst en knoppen waar je op moet inzoomen. Dit is een van de meest voorkomende en meest zichtbare mobiele problemen.
Responsive design zorgt dat de opmaak zich aanpast aan de schermgrootte. Dat gebeurt met flexibele breedtes (percentages, flexbox, grid) en media queries die bij smalle schermen de layout herschikken, bijvoorbeeld van meerdere kolommen naar één kolom. Het misgaat vaak bij elementen met een harde pixelbreedte: een afbeelding van 1200 pixels breed, een brede tabel of een ingesloten kaart of video die niet meeschaalt. Zo'n element dwingt de hele pagina breder te worden dan het scherm, en dan verschijnt horizontaal scrollen. Voor de bezoeker voelt dat als een kapotte site.
Tikdoelen zijn de aanraakbare onderdelen: knoppen, links, menu-items en formuliervelden. Een vinger is grover dan een muiscursor, dus deze doelen moeten groot genoeg zijn en voldoende ruimte ertussen hebben. Een gangbare richtlijn is een raakvlak van ongeveer 44 bij 44 pixels met wat tussenruimte. Staan links te klein of te dicht opeen (denk aan een rij sociale-media-icoontjes of menu-items vlak onder elkaar), dan raakt iemand makkelijk de verkeerde of moet hij precies mikken. Dat frustreert en kost conversie, juist op de momenten dat het telt, zoals bij een bestel- of contactknop.
Leesbaarheid en mobiele snelheid maken het plaatje af. Tekst moet zonder inzoomen te lezen zijn, met voldoende lettergrootte, contrast en niet te lange regels. Snelheid meet je het beste met de Core Web Vitals: LCP (hoe snel de hoofdinhoud zichtbaar is), CLS (hoeveel de layout verspringt tijdens het laden) en INP (hoe vlot de pagina op tikken reageert). Op mobiel zijn deze waarden vaak slechter dan op desktop door zwaardere afbeeldingen, veel JavaScript en een tragere verbinding. Een veelgemaakte fout is verder het uitschakelen van zoomen via user-scalable=no; dat is slecht voor toegankelijkheid en is voor mensen die slechter zien een echte drempel.
Hoe pak je het aan
Zet of corrigeer de viewport-meta-tag
Zorg dat <meta name="viewport" content="width=device-width, initial-scale=1"> in de <head> staat, zonder vaste breedte en zonder zoom-blokkade. In de meeste CMS'en en thema's zit dit in de hoofdtemplate of het thema; in een eigen applicatie staat het in de basis-HTML. CheckBorg signaleert of de tag aanwezig en correct is; aanpassen doe je in je CMS-thema of code.
Spoor het element op dat horizontaal scrollen veroorzaakt
Open de site op je telefoon of in de mobiele weergave van de browser-ontwikkeltools en zoek het te brede element (vaak een afbeelding, tabel, of ingesloten media met een vaste breedte). Geef het max-width: 100% en laat het meeschalen. De wijziging gebeurt in je CSS of paginabouwer.
Vergroot tikdoelen en de ruimte ertussen
Maak knoppen en belangrijke links minstens ongeveer 44 pixels hoog en geef opeenvolgende links voldoende tussenruimte. Pas dit aan in de styling van je thema of in de instellingen van je paginabouwer; het is geen automatische fix maar een ontwerpkeuze in CMS of code.
Maak tekst leesbaar zonder inzoomen
Gebruik een ruime basis-lettergrootte (rond 16px voor bodytekst), voldoende contrast en niet te brede regels. Sta inzoomen toe door user-scalable=no en maximum-scale uit je viewport-tag te halen. Dit pas je aan in je thema-instellingen of CSS.
Verbeter de mobiele snelheid
Comprimeer en schaal afbeeldingen op de juiste maat, gebruik moderne formaten (WebP/AVIF), lazy-loading en beperk zware scripts. Veel hiervan regel je via je CMS, een caching/optimalisatieplugin of op serverniveau. CheckBorg meet de impact, het optimaliseren zelf gebeurt in hosting, CMS of code.
Temper storende mobiele pop-ups
Vermijd paginavullende interstitials die de inhoud direct bij binnenkomst blokkeren, want die schaden zowel de ervaring als je positie in Google. Houd cookie- en nieuwsbrief-meldingen klein en makkelijk te sluiten. Dit stel je in bij de betreffende plugin of in je code.
Controleer je eigen website
Vul je domein in en ontdek welke checks aandacht nodig hebben.
Veelgestelde vragen
Is mijn site automatisch mobielvriendelijk als hij een 'responsive' thema gebruikt?
Niet per se. Een responsive thema is een goede basis, maar in de praktijk sluipen er vaak problemen in door eigen aanpassingen: een te brede afbeelding, een ingesloten tabel of kaart, te kleine knoppen of een ontbrekende viewport-tag na maatwerk. De enige zekerheid is testen op een echte mobiele weergave.
Waarom moet ik op mobiel horizontaal scrollen terwijl de site op desktop goed oogt?
Bijna altijd is er één element dat breder is dan het scherm: een afbeelding, tabel, ingesloten video of een blok met een vaste pixelbreedte. Dat ene element duwt de hele pagina breder dan het toestel. De oplossing is dat element vinden en het laten meeschalen met max-width: 100%.
Lost CheckBorg mijn mobiele problemen op?
Nee. CheckBorg detecteert, signaleert en prioriteert mobiele bruikbaarheidsproblemen en legt uit waar het misgaat. De daadwerkelijke aanpassing gebeurt in je CMS-thema, je code, je optimalisatieplugin of op serverniveau. We wijzen je dus precies aan wat en waar, maar voeren de fix niet zelf uit.
Hoeveel maakt mobiele bruikbaarheid uit voor mijn vindbaarheid in Google?
Veel. Google werkt met mobile-first indexing, wat betekent dat de mobiele versie van je site grotendeels je positie bepaalt. Daarbovenop wegen mobiele snelheidsmetingen (Core Web Vitals) mee. Een site die op mobiel slecht werkt, kan dus lager ranken, ook als de desktopversie prima is.
Mag ik in- en uitzoomen uitschakelen voor een strakkere weergave?
Beter niet. Het blokkeren van zoomen (user-scalable=no of maximum-scale=1 in de viewport-tag) maakt je site moeilijk bruikbaar voor mensen die slechter zien en wordt als toegankelijkheidsprobleem gezien. Laat zoomen altijd toe; een goed responsive ontwerp heeft het blokkeren niet nodig.
Hoe groot moeten knoppen en links op mobiel zijn?
Een gangbare richtlijn is een raakvlak van ongeveer 44 bij 44 pixels, met genoeg tussenruimte zodat opeenvolgende links niet per ongeluk samen worden geraakt. Dit geldt vooral voor belangrijke acties zoals bestel-, contact- of menuknoppen, waar een misklik direct conversie kost.