Waarom je website er op mobiel uitziet als een puinhoop

Vraagje: wanneer heb je voor het laatst je eigen website op je telefoon bekeken? En dan bedoel ik niet die ene keer drie maanden geleden toen je hem net live had gezet, maar echt regelmatig checken hoe hij eruitziet.

Waarschijnlijk niet vaak. En raad eens? Meer dan 60% van je bezoekers komt via mobiel. Yep, de meerderheid van de mensen die op je site komen, zien een versie die jij nooit of nauwelijks controleert. En de kans is groot dat die versie eruitziet alsof er een bom op ontploft is.

Teksten die door elkaar heen lopen, knoppen die je niet kunt aanklikken, menu’s die niet werken, foto’s die dwars door de tekst heen staan. Het is een digitale ramp, en jij weet er niks van omdat je alleen naar je site kijkt op je glimmende 27-inch monitor.

Laten we eens kijken waarom dit gebeurt, en belangrijker: hoe je het oplost.

De harde waarheid: je website is niet automatisch mobiel-vriendelijk

Veel mensen denken: “Mijn website is toch in WordPress gebouwd? Dan werkt hij toch automatisch op mobiel?” Of: “De designer zei dat het responsive was, dus het is goed.”

Newsflash: responsive betekent niet per definitie goed. Het betekent alleen dat de website zich aanpast aan verschillende schermformaten. Maar hoe dat eruit ziet? Dat is een tweede verhaal.

Het is alsof je een pak koopt dat “one size fits all” is. Technisch gezien past het wel, maar ziet het er ook goed uit? Waarschijnlijk niet.

Waarom dit zo vaak fout gaat

Webdesigners en bouwers werken op grote beeldschermen. Ze bouwen je site, bekijken hem op hun laptop of desktop, denken “yes, dit ziet er goed uit”, en leveren op. Soms checken ze het op mobiel door het browserscherm kleiner te maken, maar dat is niet hetzelfde als op een echte telefoon kijken.

En jij? Jij opent je site op je laptop, bent blij met het resultaat, en gaat door met je leven. Ondertussen stromen mobiele bezoekers massaal binnen, fronsen hun wenkbrauwen, en klikken weer weg omdat ze denken: “Wat is dit voor amateuristisch gedoe?”

De 8 meest voorkomende mobiele rampen

1. Tekst die je moet zoomen om te lezen

Je opent een website op je telefoon en de tekst is zo klein dat je ogen bijna uit hun kassen springen. Je moet inzoomen, naar rechts scrollen om de rest van de zin te lezen, dan weer naar links, dan weer uitzoomen. Het is een workout voor je duimen.

Dit gebeurt vaak omdat de lettergrootte is ingesteld op een vaste waarde die perfect is voor desktop, maar veel te klein voor mobiel. Of omdat niemand heeft getest of de tekst eigenlijk wel leesbaar is op een 6-inch scherm.

Minimale lettergrootte op mobiel moet 16 pixels zijn voor body tekst. Kopjes groter. Test het op je eigen telefoon en vraag je af: zou mijn oma dit kunnen lezen zonder bril?
Goede webdesigners maakt geen gebruik van pixels maar voor fonts maken ze gebruik van ‘rem’ of ’em’.

Nice to know maar kun je kunt er niets mee :o): Bij onze websites maken we gebruik van REM voor de font groottes en EM voor de rest van de formaten.

2. Knoppen die te klein zijn om aan te tikken

Je wilt op een knop klikken maar raakt per ongeluk de knop ernaast. Of je moet vijf keer proberen voordat je raak klikt. Frustrerend? Absoluut. En waarschijnlijk klik je daarna gewoon weg.

Het probleem is dat designers knoppen maken die er mooi uitzien op desktop, maar vergeten dat je vinger nou eenmaal dikker is dan een muiscursor. Een knop die 30 pixels hoog is, is prima met een muis. Met je vinger? Good luck.

Knoppen moeten minimaal 44×44 pixels zijn op mobiel. Dat is ongeveer de grootte van een vingertop. En zorg voor genoeg ruimte tussen knoppen, zodat mensen niet per ongeluk de verkeerde aanklikken.

3. Het menu dat niet werkt (of erger: wel werkt maar onbruikbaar is)

Je hebt een mooi uitgebreid menu met hoverfuncties en dropdown-menu’s. Ziet er fantastisch uit op desktop. Op mobiel? Complete chaos. Submenu’s die niet openen, links waar je niet op kunt klikken, of een hamburgermenu dat zo vol is dat je vijf minuten moet scrollen om te vinden wat je zoekt.

Of mijn favoriet: het menu dat helemaal niet zichtbaar is omdat de “mobile menu” functie niet goed is ingesteld. Bezoekers kunnen letterlijk niet navigeren door je site.

Houd je mobiele menu simpel. Maximum 5-7 items in het hoofdmenu. Heb je meer? Maak subcategorieën of een zoekfunctie. En test of alle links echt klikbaar zijn met je duim.

Ik had een klant die zijn hele productcatalogus in het mobiele menu had gepropt. 47 items. Je moest letterlijk door een hele telefoonboek scrollen. Zijn bounce rate op mobiel was 89%. We hebben het teruggebracht naar 6 hoofdcategorieën en een zoekbalk. Bounce rate daalde naar 34%. Soms is minder gewoon meer.”

4. Foto’s en video’s die dwars door alles heen staan

Een foto die op desktop mooi naast de tekst staat, staat op mobiel ineens dwars over de tekst heen. Of een video is zo breed dat je moet scrollen om hem helemaal te zien. Of afbeeldingen laden zo traag dat je eerst 10 seconden naar een lege ruimte staart.

Dit komt doordat afbeeldingen vaak een vaste breedte krijgen in pixels, wat prima werkt op een breed scherm maar een ramp is op mobiel. Of omdat niemand de moeite heeft genomen om afbeeldingen te optimaliseren voor verschillende schermformaten.

Gebruik responsieve afbeeldingen die automatisch schalen. Dat betekent: breedte in percentages in plaats van pixels, en “max-width: 100%” zodat ze nooit breder worden dan het scherm. En comprimeer je afbeeldingen zodat ze niet eindeloos lang laden.

5. Pop-ups die je gijzelen

Je opent een website op je telefoon en BOOM: een gigantische pop-up vult je hele scherm. “Schrijf je in voor onze nieuwsbrief!” Of: “We gebruiken cookies, hier zijn 400 woorden uitleg.” Of erger: het kruisje om de pop-up weg te klikken is zo klein of zo slecht geplaatst dat je er niet op kunt klikken.

Resultaat: bezoeker gefrustreerd, bezoeker weg. Google vindt dit trouwens ook verschrikkelijk en kan je hiervoor straffen in de zoekresultaten.

Als je pop-ups gebruikt op mobiel, zorg dan dat ze makkelijk weg te klikken zijn. Een groot, duidelijk kruisje rechtsboven. En laat ze pas verschijnen na 10-15 seconden, niet meteen als iemand binnenkomt.

6. Formulieren die onmogelijk in te vullen zijn

Je wilt contact opnemen, dus je probeert het formulier in te vullen. Maar de velden zijn zo klein dat je erop moet inzoomen. Het toetsenbord bedekt het volgende veld waardoor je niet kunt zien wat je typt. Auto-complete werkt niet. En als je op “verzenden” klikt, gebeurt er niks omdat je ergens een foutmelding hebt gemist die je niet kon zien.

Dit is waarschijnlijk de snelste manier om potentiële klanten te verliezen. Ze willen je geld geven maar kunnen letterlijk het formulier niet invullen.

Grote invoervelden, duidelijke labels, én gebruik de juiste input-types. Voor een telefoonnummer moet het nummerieke toetsenbord automatisch verschijnen. Voor een e-mail het e-mail toetsenbord met de @ toets. En test of het formulier ook echt werkt op verschillende telefoons.

7. Horizontaal scrollen (de ergste zonde)

Je scrollt naar beneden op een website en ineens moet je ook naar rechts scrollen om de rest van de content te zien. Dit is de digitale equivalent van een boek waarvan de pagina’s te groot zijn voor de kaft.

Dit gebeurt meestal door elementen met een vaste breedte die breder zijn dan het scherm, of door tabellen die niet responsive zijn gemaakt.

Niets op je website mag breder zijn dan het scherm. Gebruik “overflow-x: hidden” als noodoplossing, maar beter is het om de oorzaak te vinden en te fixen. Test door je pagina smaller te maken in je browser en te kijken waar het misgaat.

8. Laadtijd die langer duurt dan een kop koffie zetten

Je klikt op een link en… wacht. En wacht. En wacht. Na 10 seconden geef je op en ga je naar een andere site. Dit is vooral een probleem op mobiel omdat mensen vaak op 4G zitten (of slechter) in plaats van snelle wifi.

Oorzaken: te grote afbeeldingen, te veel scripts, zware animaties, geen caching of gewoon een slechte hosting provider.

Comprimeer je afbeeldingen (gebruik tools zoals TinyPNG), minimaliseer je code, gebruik lazy loading voor afbeeldingen, en overweeg een betere hosting provider als je site structureel traag is. Google PageSpeed Insights vertelt je precies wat er mis is. Wij gebruiken MediaPlace (geen affiliate link) voor het comprimeren van onze afbeeldingen. Super handige tool. Ik was er snel bij en had de LTD gekocht maar je kunt volgens mij is de gratis versie voldoende waneer je af een toe een afbeelding wil ‘compressen’.

Ik had een klant met een webshop waar de homepage 12 seconden laadde op mobiel. Hun bounce rate was 76%. We hebben alle afbeeldingen gecomprimeerd van 2MB naar 200KB, onnodige plugins verwijderd, en de hosting ge-upgrade. Nieuwe laadtijd: 2,3 seconden. Bounce rate: 28%. Hun omzet ging met 40% omhoog in de eerste maand na de optimalisatie.”

Hoe je test of jouw site een mobiele ramp is

Oké, nu denk je waarschijnlijk: “Shit, hoe erg is mijn site?” Laten we het testen. Hier is wat je moet doen:

Test 1: De telefoon-test (doe dit NU)

Pak je telefoon. Ja, nu. Open je website. Scroll door elke pagina. Probeer alle knoppen. Vul het contactformulier in. Kijk of je het menu kunt gebruiken. Kan je alles goed lezen zonder te zoomen?

Wees eerlijk: zou jij als bezoeker deze site gebruiken? Of zou je gefrustreerd raken en wegklikken?

Test 2: De Google Mobile-Friendly Test

Google heeft een gratis tool in de Google Chrome browser genaamd Lighthouse. Bekijk hier hoe en wat je moet doen! Installeer het hier

Test 3: De moeder/vader/partner test

Geef je telefoon aan iemand die niet technisch is. Je moeder bijvoorbeeld. Of je buurvrouw. Vraag ze om iets specifieks te doen op je site: “Vind de prijspagina” of “Vul het contactformulier in”. Kijk hoe makkelijk (of moeilijk) ze het vinden.

Als ze moeite hebben, hebben je bezoekers dat ook. En die geven het gewoon op.

Test 4: De verschillende telefoon test

Test niet alleen op jouw iPhone 15 Pro Max met zijn gigantische scherm. Test ook op oudere of kleinere telefoons. Of gebruik BrowserStack om je site te testen op verschillende devices. Want je oma heeft niet hetzelfde toestel als jij. Ik heb Hoverify (geen affiliate link) gekocht als extensie op m’n browser. Voorbeeld kun je zien (helemaal bovenin dit artikel)

De grootste fout: denken dat het later wel komt

Hier is waar de meeste mensen de fout in gaan: ze weten dat hun mobiele site niet perfect is, maar denken “ach, ik fix het later wel”. Of: “Het is goed genoeg”.

Maar terwijl jij denkt dat het wel oké is, verlies je elke dag potentiële klanten. Mensen die op je site komen, 3 seconden blijven, en dan wegklikken omdat het een puinhoop is. En die komen niet terug.

Erger nog: Google ziet dat mensen snel wegklikken, denkt “deze site is blijkbaar niet goed”, en rankt je lager in de zoekresultaten. Het is een neerwaartse spiraal.

De kosten van een slechte mobiele site

Even simpele rekensom: stel je krijgt 1000 bezoekers per maand waarvan 600 op mobiel. Als je bounce rate op mobiel 70% is (omdat je site een ramp is), dan klikken 420 mensen direct weg zonder iets te doen.

Van die 180 die blijven, converteert misschien 2% (omdat de rest ook wegklikt na geprobeerd te hebben je formulier in te vullen). Dat zijn 3-4 conversies per maand.

Fix je mobiele site, en je bounce rate daalt naar 40%. Dan blijven er 360 mensen. Bij dezelfde 2% conversie: 7 conversies. Je hebt je conversie verdubbeld, zonder meer verkeer te hoeven genereren.

Nog steeds denken dat het later wel komt?

Hoe je het oplost (zonder direct je hele site opnieuw te bouwen)

Goed nieuws: je hoeft niet je hele website opnieuw te laten maken. Vaak zijn het kleine aanpassingen die een groot verschil maken. Hier is een prioriteitenlijstje:

Prioriteit 1: De absolute basics

Dit moet je vandaag nog fixen:

• Zorg dat tekst leesbaar is zonder zoomen (minimaal 16px)
• Maak knoppen groot genoeg om aan te tikken (minimaal 44x44px)
• Check of je mobiele menu werkt
• Test of pop-ups wegklikbaar zijn

Deze dingen kosten misschien een paar uur werk, maar maken het verschil tussen onbruikbaar en bruikbaar.

Prioriteit 2: De gebruikservaring

Volgende stap:

• Optimaliseer je afbeeldingen (comprimeer ze)
• Fix horizontaal scrollen
• Maak formulieren mobiel-vriendelijk
• Test je laadsnelheid en verbeter waar nodig

Prioriteit 3: De fijne details

Als de basics staan:

• Voeg touch-gestures toe waar logisch
• Optimaliseer je content voor mobiel (kortere zinnen, meer whitespace)
• Test op verschillende devices en browsers
• Overweeg een Accelerated Mobile Pages (AMP) versie voor blogposts

Wil je niet zelf al deze dingen uitzoeken? Ik doe een gratis mobiele site-scan voor de eerste 10 mensen die reageren. Stuur me je URL en ik stuur je binnen 48 uur een video waarin ik door je mobiele site loop en precies vertel wat er mis is en hoe je het oplost of post je site in de Website Review Cafe Facebookgroep en ik bekijk je mobiele versie en geef je de 3 belangrijkste dingen die je moet fixen.”

De harde realiteit: als je het niet doet, doet je concurrent het wel

Terwijl jij dit artikel leest, zijn er ondernemers die hun mobiele site aan het optimaliseren zijn. Die investeren in een goede mobiele ervaring. Die snappen dat meer dan de helft van hun bezoekers op een telefoon zit.

En raad eens waar die bezoekers die op jouw rampzalige mobiele site komen en direct wegklikken naartoe gaan? Naar je concurrent. Met zijn mooie, snelle, gebruiksvriendelijke mobiele site.

Het gekke is: het is niet eens zo moeilijk of duur om te fixen. Veel problemen kun je zelf oplossen in een middag. Sommige dingen vereisen een webdesigner, maar we praten over een paar honderd euro, niet duizenden.

De vraag is: wat kost het je om het niet te doen?

Actie-items voor vandaag

Oké, genoeg gepraat. Hier is wat je vandaag nog gaat doen:

1. Open je website op je telefoon en scroll door alle belangrijke pagina’s
2. Maak een lijst van de 3 ergste dingen die je opvallen
3. Draai de Google Mobile-Friendly Test en noteer de belangrijkste problemen
4. Fix minimaal één ding vandaag nog – al is het alleen je lettergrootte aanpassen

Begin klein, maar begin wel. Want elke dag dat je niks doet, verlies je klanten aan concurrenten die het wel goed geregeld hebben.

En wie weet, misschien ontdek je dat je mobiele site helemaal niet zo’n ramp is. Maar de kans is groter dat je denkt: “Holy shit, dit is inderdaad een puinhoop. Geen wonder dat niemand op mijn call-to-action klikt.”

Dus: pak je telefoon. Open je site. En wees eerlijk tegen jezelf.

Je website verdient beter. En je bezoekers helemaal.