Website ziet er slecht uit op mobiel? Zo maak je het rustig en duidelijk
Een website die er slecht uitziet op mobiel is bijna nooit één probleem, maar een combinatie van te kleine tekst, kolommen die niet stapelen en knoppen die te dicht op elkaar staan. Je lost het op door eerst een nulmeting te doen en daarna layout, tekst, menu, media en formulieren stuk voor stuk op te ruimen. Deze gids loopt dat pad in acht stappen met je door.
Stap 1: maak eerst zichtbaar wat er misgaat op mobiel
Begin met een korte nulmeting. Geen ingewikkelde theorie, gewoon kijken hoe je website zich gedraagt op verschillende telefoons en schermgroottes. Loop deze checklist door:
- Open je website op minimaal twee verschillende telefoons.
- Let op lettergrootte en regelafstand. Kun je ontspannen lezen zonder in te zoomen?
- Test of knoppen en links groot genoeg zijn om met één duim aan te raken.
- Kijk of er horizontale scroll verschijnt zodra je iets opzij schuift.
- Controleer of het menu duidelijk zichtbaar is en logisch opent en sluit.
Gebruik daarnaast de ontwikkeltools van je browser
Daar bekijk je je website op verschillende mobiele schermen, van een gemiddelde telefoon tot een groter toestel. Op een klein scherm let je vooral op leesbaarheid en ruimte tussen regels, op een gemiddeld scherm op koppen en knoppen per sectie, en op een groter scherm of de pagina bovenaan niet te leeg voelt. Niets mag buiten beeld vallen of afgekapt zijn.
Bij swap.coupons was de eerste versie vooral gericht op desktop
Op mobiel versprongen blokken en tekstvelden en moesten bezoekers inzoomen om knoppen te lezen. Door eerst een lijst te maken van alle pagina's die onrustig voelden, met schermopnames erbij, konden we gericht verbeteren in plaats van op gevoel te rommelen.
Stap 2: zet je layout om naar één heldere kolom
Een website ziet er vaak slecht uit op mobiel omdat een desktopontwerp simpelweg is verkleind. Tekst blijft in meerdere kolommen staan terwijl daar op een klein scherm geen ruimte voor is. De oplossing is bijna altijd een rustige opzet in één kolom, met duidelijke blokken en genoeg ademruimte tussen de onderdelen.
- De belangrijkste inhoud staat in één kolom, zonder zijbalk.
- Elke sectie heeft genoeg verticale ruimte, zodat blokken niet tegen elkaar plakken.
- Er is geen horizontale scroll nodig op de belangrijkste pagina's.
- Tekst en afbeeldingen wisselen elkaar af voor een rustig ritme.
- Koppen breken niet af op vreemde plekken.
In de blok-editor stel je per kolomblok in hoe het zich gedraagt op kleinere schermen
Zorg dat kolommen onder elkaar komen te staan in plaats van naast elkaar. Zo voorkom je dat tekst in smalle stroken wordt geperst. Werk daarnaast met een herkenbare volgorde: kernboodschap in één zin bovenaan, daarna bewijs of voordelen, dan uitleg of stappen, vervolgens sociale bewijskracht en als laatste contact of een duidelijke call-to-action. Iemand die snel scrolt, begrijpt dan intuïtief waar een sectie begint en eindigt.
Stap 3: maak tekst groot genoeg en makkelijk te scannen
Gebruik voor lopende tekst op mobiel een minimale grootte van zestien tot achttien punt en houd de regelafstand ruim, zodat de tekst rustig ademt. Houd alinea's kort, zodat mensen makkelijk kunnen scannen, en gebruik opsommingen waar dat helpt om een lijst snel te begrijpen.
Goede koppen helpen zowel bezoekers als zoekmachines
Werk met één duidelijke hoofdkop op de pagina, daaronder tussenkoppen en eventueel korte subkoppen voor details. Houd koppen concreet en beschrijvend. Vermijd vage teksten die niets zeggen over de inhoud van de sectie eronder.
Technisch regel je dit met een media query voor schermen tot 768 pixels breed
Zet de basistekst daar op zestien pixels met een regelhoogte van 1,7 en schaal je koppen mee omlaag, zodat een hoofdkop niet het halve scherm vult.
Stap 4: zorg dat je menu rustig en voorspelbaar werkt
Het menu is op mobiel je belangrijkste navigatiemiddel. Houd je aan deze regels:
- Gebruik een herkenbaar menu-icoon dat niet concurreert met andere knoppen in de kop.
- Laat het menu rustig in beeld schuiven en dek de achtergrond af met een lichte overlay.
- Zorg dat bezoekers duidelijk zien waar ze zijn in de website.
- Toon niet meer hoofdnavigatie dan nodig is. De rest kan in subpagina's.
De simpelste test: pak je telefoon in één hand en gebruik alleen je duim
Kun je het menu makkelijk openen en sluiten zonder te mikken? Kun je terug naar de vorige pagina zonder frustratie? Deze kleine test zegt vaak meer dan lange rapporten. Controleer ook of het menu direct sluit wanneer je buiten het menu tikt, of de belangrijkste pagina's bovenaan staan en of de contactmogelijkheid altijd snel bereikbaar is.
Stap 5: pas afbeeldingen en video aan voor kleine schermen
Maak per belangrijk beeld een versie die goed werkt op een smal scherm. Houd het onderwerp in het midden en kies een formaat dat past bij de breedte van een telefoon. Zo voorkom je dat belangrijke tekst of gezichten worden afgesneden.
Gebruik op mobiel liever geen zware achtergrondvideo die direct afspeelt
Vervang die door een rustige afbeelding of een stilstaand frame en zet video achter een playknop, zodat de bezoeker zelf kiest of de video start.
Zet daarnaast lazy load aan, zodat niet alle beelden tegelijk hoeven te laden
Combineer dat met een vaste verhouding voor belangrijke afbeeldingen, met breedte en hoogte in de code, zodat er geen sprongetjes ontstaan tijdens het scrollen. Geef elke afbeelding een korte, duidelijke alt-beschrijving en een maximale breedte van honderd procent.
Stap 6: maak formulieren en knoppen goed aanraakbaar
Zet gerelateerde velden bij elkaar, bijvoorbeeld persoonlijke gegevens, bedrijfsgegevens en bericht. Laat niet onnodig veel witte velden zien. Minder velden voelt direct rustiger. Gebruik een contrasterende kleur voor je belangrijkste knop en schrijf een concrete tekst die duidelijk maakt wat er na de klik gebeurt.
- Zijn alle verplichte velden echt nodig?
- Kun je alle velden goed invullen met je duim?
- Staat er bij elk veld een duidelijke uitleg?
- Is de verzendknop breed genoeg?
- Is de bevestiging na verzenden goed leesbaar op mobiel?
Stap 7: praktijkvoorbeeld van een website die is opgeknapt
Theorie is prettig, maar je voelt de impact pas als je het toepast op een echte website. Bij projecten zoals swap.coupons en lokale dienstverleners zagen we telkens dezelfde patronen terugkomen:
- Te veel elementen op de eerste schermvulling.
- Kolommen die niet goed stapelen op kleinere schermen.
- Tekstblokken die te breed zijn of te dicht tegen de rand staan.
- Een menu dat overlays en formulieren in de weg zit.
Na het opruimen van layout, tekst, menu en formulieren voelde de website op mobiel rustiger en betrouwbaarder
Bezoekers konden zonder zoomen alles lezen en knoppen raken. Dat gaf meer tijd op de pagina en meer ingevulde formulieren, zonder dat er nieuwe advertenties bij kwamen. Overweeg je wel te adverteren, lees dan eerst of Google Ads echt werkt voordat je budget vrijmaakt. En komen je klanten vooral lokaal binnen, bekijk dan hoe je WhatsApp en je Google Bedrijfsprofiel als ambachtsbedrijf slim inzet.
Maak vervolgens je eigen verbeterplan: noteer per belangrijke pagina de grootste problemen, plan acties voor layout, tekst, menu, media en formulieren, en zet een datum in je agenda waarop je opnieuw test op mobiel.
Stap 8: controleer de mobiele ervaring en je SEO-signalen
Directe winst voor je SEO: een website die er goed uitziet op mobiel. Zoekmachines letten op gebruikservaring, tijd op de pagina en hoe makkelijk iemand kan scrollen en klikken. Sluit dit traject daarom af met een korte controle waarbij je zowel naar gevoel als naar metingen kijkt.
- Je kunt alle belangrijke inhoud lezen zonder in te zoomen.
- Er is geen horizontale scroll en niets valt buiten beeld.
- Menu en formulieren werken rustig en voorspelbaar.
- Het mobiele rapport van een testtool laat een duidelijke verbetering zien.
Wil je dat we meekijken naar de mobiele ervaring en de vindbaarheid van je website, bekijk dan onze dienst SEO verbeteren.
Stap 9: Google indexeert de mobiele versie, niet die van je computer
Er zit aan dit onderwerp een kant die niets met smaak te maken heeft en die je moet weten voordat je iets aanpast. Google crawlt en indexeert websites met zijn telefooncrawler. Wat een bezoeker op zijn computer wel ziet en op zijn telefoon niet, is dus geen presentatieverschil: voor de zoekmachine staat die inhoud er in de praktijk niet. Google beschrijft dat in zijn aanbevelingen over mobiel-eerst indexeren, gecontroleerd op 25 augustus 2026.
Daar volgen een paar regels uit die stelselmatig worden overtreden zodra iemand de site op de telefoon rustiger wil laten ogen:
Dezelfde inhoud in beide weergaven
Kort je op mobiel de teksten in omdat ze anders zo lang worden, dan kort je in wat Google leest. Tekst die is ingeklapt in een uitklapblok telt nog wel mee, want die staat gewoon in de code. Tekst die je sjabloon op mobiel niet afdrukt, telt niet mee.Dezelfde titels en omschrijvingen
Het gebeurt zo dat een mobiel sjabloon een kop weglaat om ruimte te winnen. Daarmee gooi je precies het signaal weg dat vertelt waar de pagina over gaat.Dezelfde structured data
Staat je structured data alleen in je desktopsjabloon, dan hangen je rijke resultaten aan iets dat de crawler niet ziet.Dezelfde afbeeldingen, met hun alt-tekst
Een afbeelding die op mobiel wordt verborgen, doet niet meer mee in de afbeeldingenzoekmachine.Dezelfde crawl-instructies
Een noindex die is blijven hangen in een mobiel sjabloon is een van de duurste fouten die er zijn, en je ziet hem niet als je de site op je computer bekijkt.De controle is simpel en gratis: open dezelfde pagina op je computer en op je telefoon en vergelijk welke tekst er staat. Ontbreekt er op de telefoon een hele alinea, dan weet je waar je begint. Dit raakt direct aan het technische werk dat we bij technische SEO langslopen.
Waarom je site verkleind wordt getoond, en waar dat zijstrookje vandaan komt
Twee klachten komen bijna altijd samen en hebben verschillende oorzaken. De eerste: de site staat er helemaal op maar in het klein, met tekst die je niet kunt lezen, alsof de telefoon de computerversie heeft uitgezoomd. De tweede: de site ziet er goed uit maar je kunt hem opzij slepen, en rechts zit steeds een leeg strookje.
De eerste komt bijna altijd door de viewport-regel.
Ontbreekt die in de kop van de pagina, dan gaat de browser ervan uit dat je site voor een breed scherm is gemaakt en krimpt hij het geheel zodat het past. Het is de eerste regel van elk responsief ontwerp en geen stylesheet vervangt hem, zoals ook in de uitleg van Google over responsief ontwerp staat, gecontroleerd op 25 augustus 2026. Pas ook op met de variant die inzoomen blokkeert: wie zijn bezoeker verbiedt om te vergroten, zet iedereen buitenspel die grotere letters nodig heeft, en lost daarmee geen enkel opmaakprobleem op.
De tweede is bijna altijd één element dat breder is dan het scherm.
Zijwaarts schuiven is nooit een raadsel, er is altijd één schuldige, en die staat meestal in dit korte rijtje:
- Een blok met een vaste breedte in pixels dat op een smalle telefoon niet meer past.
- Een afbeelding zonder maximumbreedte die over de rand heen steekt.
- Een brede tabel, meestal een prijs- of specificatietabel, die niet kan opvouwen en zijn eigen schuifbalk binnen een omhulsel nodig heeft.
- Een lang woord of een lang webadres zonder afbreekpunt, dat zijn hele regel oprekt.
- Een element dat buiten beeld is geparkeerd maar nog wel ruimte inneemt, bijvoorbeeld een menu dat naar rechts wegschuift in plaats van te verdwijnen.
Je hebt er geen betaald gereedschap voor nodig
Versmal het browservenster op je computer tot telefoonbreedte en ga daarna nog verder: het punt waarop de schuifbalk onderin verschijnt vertelt je bij welke breedte het stukloopt, en negen van de tien keer herken je het blok meteen. Dat is dezelfde methode waarmee je in stap 2 je kolommen ordent.
Afbeeldingen: waarom de telefoon de foto van de computer krijgt
Op de meeste websites van kleine bedrijven downloadt de telefoon precies dezelfde afbeelding als de computer, en verkleint hem daarna. De bezoeker ziet dat niet, maar hij betaalt het wel: hij haalt een bestand op dat voor een breed scherm bedoeld is, over een mobiele verbinding, precies op het moment dat er het minst geduld is.
Het is met drie ingrepen op te lossen, en geen van de drie is de site opnieuw bouwen:
Lever meerdere maten van hetzelfde bestand
In HTML kun je een setje formaten aanbieden en de browser laten kiezen wat bij het scherm past. In WordPress doet het systeem dat al bij het uploaden, zolang je thema niet de grote versie afdwingt.Geef elke afbeelding zijn breedte en hoogte mee
Dat is niet alleen een snelheidskwestie: zonder die maten kan de browser geen ruimte reserveren en springt de tekst omlaag zodra de afbeelding binnenkomt. Het is de meest voorkomende oorzaak van een onrustige opmaak, zoals beschreven in de uitleg van Google over visuele stabiliteit, gecontroleerd op 25 augustus 2026.Snijd bij, comprimeer niet alleen
Een liggende foto van het hele team wordt op een telefoon een streepje waarop niemand meer herkenbaar is. Een aparte uitsnede voor mobiel is meer waard dan dezelfde foto verkleind tot onleesbaar.Nog een waarschuwing over uitgesteld laden, want dat gaat vaak mis. Alle afbeeldingen uitstellen klinkt goed en werkt in het eerste scherm averechts. De bovenste afbeelding is precies degene waar de bezoeker op wacht, en die uitstellen is hem met opzet vertragen. Stel uit wat lager staat, nooit de eerste.
Veelgestelde vragen over een website die slecht is op mobiel
Waarom ziet mijn website er slecht uit op mobiel terwijl het thema responsief is?
In de praktijk komt dit vaak door losse blokken en instellingen bovenop het thema. Denk aan extra kolommen, vaste breedtes, eigen marges of maatwerk-CSS. Ook paginabouwers kunnen instellingen hebben die niet goed meekomen op kleinere schermen. Het is dus niet alleen het thema, maar de combinatie van thema, blokken en inhoud.
Moet ik een aparte mobiele website laten maken?
Voor de meeste bedrijven is dat niet nodig. Een goede responsieve opzet met een duidelijke structuur in één kolom is vaak genoeg. Een aparte mobiele website geeft meer onderhoud en dubbele inhoud, wat SEO lastiger kan maken. Richt je liever op één omgeving die overal goed werkt.
Heeft een slechte mobiele ervaring invloed op mijn positie in zoekmachines?
Ja. Zoekmachines kijken naar hoe goed een website werkt op mobiele apparaten. Als mensen snel afhaken of veel moeten inzoomen, geeft dat een slecht signaal. Juist een website die rustig en duidelijk is op mobiel helpt om beter zichtbaar te worden voor zoekopdrachten die met jouw diensten te maken hebben.
Wat doe ik als mijn paginabouwer weinig mobiele opties heeft?
Begin met de eenvoudigste aanpassingen, zoals ruimte tussen blokken, lettergrootte en het stapelen van kolommen. Soms is het slimmer om nieuwe belangrijke pagina's op te bouwen met de blok-editor, in plaats van alles te blijven duwen in een bouwer die niet bij je wensen past.
Hoe vaak moet ik mijn website testen op mobiel?
Test in ieder geval na grotere wijzigingen, zoals een nieuw thema, een nieuwe landingspagina of een groot formulier. Daarnaast is een vaste controle eens per kwartaal slim. Gebruik dan zowel echte telefoons als een test in de browser, zodat je verschillende schermformaten meeneemt.
Samenvatting: je hebt nu een duidelijk pad voor mobiel
Je hebt geleerd hoe je een korte nulmeting doet, hoe je van een rommelige layout naar één heldere kolom gaat en hoe tekst, menu, afbeeldingen en formulieren samen de ervaring op mobiel bepalen. Door deze stappen rustig te doorlopen maak je van een website die slecht oogt op mobiel een omgeving die prettig voelt voor bezoekers en beter scoort in zoekmachines.
Kies nu de pagina die het belangrijkst is, vul de checklists in en maak de eerste ronde verbeteringen. Daarna herhaal je hetzelfde proces op de volgende pagina. Zo bouw je stap voor stap aan een website die op mobiel net zo sterk is als op desktop. Meer gidsen zoals deze vind je in onze kennisbank.
Eén volgorde om te onthouden als je maar één ding meeneemt: eerst kijken wat er misgaat, dan de kolom, dan de tekst, dan pas de rest. De meeste mensen beginnen bij het uiterlijk en eindigen bij de meting, en dat is precies andersom. Kom je er niet uit, of gaat het om een sjabloon dat je zelf niet kunt aanpassen, laat het ons dan zien. Stuur de pagina waar het het slechtst gaat en je krijgt terug wat wij als eerste zouden aanpakken. Dat kost niets en verplicht je tot niets. Wil je het laten doen, dan hoort dit werk bij de dienst WordPress specialist, en wat het kost staat op prijzen.