Heb je je website op een telefoon geopend en zag je iets dat totaal niet lijkt op wat je hebt gebouwd? Een website die op mobiel kapot is, is een van de meest gehoorde klachten van merkeigenaren die hun site op een desktop hebben ontworpen en nooit hebben gecontroleerd hoe hij op een kleiner scherm presteert. Dit artikel behandelt wat het probleem veroorzaakt, hoe je ontdekt welk probleem je site raakt en wat je eraan doet.
Inmiddels komt meer dan de helft van al het webverkeer van mobiele apparaten. Dat aandeel stijgt al jaren en blijft stijgen. Komt een bezoeker met een telefoon op je site terecht en ziet hij tekst die te klein is om te lezen, afbeeldingen die over het scherm heen lopen of een navigatiemenu dat niet op een tik reageert, dan is de kans klein dat hij blijft. Een hoog bouncepercentage op mobiel is vaak het eerste meetbare teken dat er iets kapot is, en veel merkeigenaren leggen het verband pas als ze hun analytics bekijken.
Het frustrerende is dat mobiele weergaveproblemen niet altijd opvallen in de desktopweergave waarmee je je site beheert. De problemen komen meestal pas naar boven als je naar het echte telefoonscherm kijkt, waardoor ze weken of maanden onopgemerkt kunnen blijven terwijl bezoekers stilletjes vertrekken.
Waarom ziet een website er kapot uit op mobiel?
Er is niet één oorzaak voor een website die op mobiel kapot is. Het probleem komt meestal uit vijf onderliggende oorzaken, en soms uit een combinatie van meerdere. Als je weet welke oorzaak je site raakt, weet je welke oplossing past.
De site is niet gebouwd met een responsive design
Een responsive website past zijn lay-out automatisch aan op basis van de breedte van het scherm waarop hij wordt getoond. Op een desktop staat content misschien in drie kolommen. Op een tablet in twee. Op een telefoon in één kolom waar je doorheen scrolt. Die aanpassing gebeurt met CSS-regels, media queries genoemd, die de browser vertellen hoe content bij verschillende schermformaten moet worden herschikt.
Is een site gebouwd zonder responsive design, dan toont hij dezelfde vaste lay-out ongeacht het schermformaat. Een site die is ontworpen voor een desktopmonitor van 1.440 pixels breed probeert op die breedte te renderen op een telefoonscherm dat ongeveer 390 pixels breed is. Het resultaat is een verkleinde, uitgezoomde pagina waar tekst onleesbaar is en knoppen te klein zijn om aan te tikken. De content staat er technisch, maar is onbruikbaar.
Oudere sites, vooral die zijn gebouwd met drag-and-drop-editors die niet op mobiele weergave waren gericht, hebben dit probleem vaak. Ook sites die op maat zijn gecodeerd zonder mobile-first te denken, kunnen in deze categorie vallen.
Afbeeldingen zijn niet afgestemd op mobiele schermen
Een afbeelding die is geüpload met een breedte van 3.000 pixels en zonder beperkingen wordt getoond, probeert op volledige grootte te renderen, waar die ook wordt bekeken. Op een desktop kan de browser hem verkleinen tot hij past. Op een mobiel apparaat zonder responsive afmetingsregels kan de afbeelding voorbij de rand van het scherm schieten, waardoor horizontaal scrollen of een ingestorte lay-out ontstaat.
Ook als afbeeldingen niet overlopen, raken grote niet-geoptimaliseerde afbeeldingen de websitesnelheid op mobiel. Een traag ladende afbeelding die de rest van de pagina tegenhoudt, is een vorm van kapot gedrag, ook als de lay-out technisch overeind blijft. Bezoekers op mobiele verbindingen zijn hier extra gevoelig voor.
Elementen met vaste breedte lopen over het scherm
Elementen met een vaste breedte zijn containers, divs, tabellen of andere HTML-elementen met in de stylesheet een specifieke breedte in pixels in plaats van een percentage of flexibele eenheid. Een container van 900 pixels breed wordt op een desktop goed getoond, maar loopt op een telefoonscherm voorbij de rand, waardoor de gebruiker horizontaal moet scrollen om alle content te zien. Horizontaal scrollen op een website wijst bijna altijd op een overloopprobleem door vaste breedtes.
Tabellen zijn vaak de boosdoener. Een prijstabel of vergelijkingsoverzicht in HTML met vaste kolommen kan op mobiel dramatisch instorten, waardoor tekst zo wordt gestapeld dat hij niet te lezen is. Hetzelfde geldt voor zijbalken, ingesloten widgets en elk element dat is gecodeerd met een expliciete breedte in pixels die groter is dan de beschikbare ruimte op het telefoonscherm.
Lettergroottes zijn te klein om zonder zoomen te lezen
Tekst die op een desktopscherm prima leest op 14 pixels, kan op een telefoon onleesbaar worden, vooral op schermen met hoge dichtheid waar het fysieke aantal pixels veel hoger is dan de logische schermgrootte. Moet een bezoeker knijpen en zoomen om je content te lezen, dan is de ervaring kapot, ook als de lay-out technisch intact is.
De aanbevolen minimale lettergrootte voor lopende tekst op mobiel is 16 pixels. Alles daaronder loopt het risico niet leesbaar te zijn op een groot deel van de apparaten. Kleinere tekst geeft zoekmachines ook het signaal dat de pagina niet is geoptimaliseerd voor mobiel, wat kan doorwerken in hoe de site wordt gerangschikt en geïndexeerd.
Navigatie klapt slecht in of werkt niet met aanraken
Desktopnavigatiemenu's zijn vaak gebouwd als horizontale balken met dropdown-items die verschijnen bij hover. Hover bestaat niet op een touchscreen. Een menu dat afhangt van hover-interactie werkt op een telefoon gewoon niet. Bezoekers tikken op het menu-item en er gebeurt niets, of ze komen op de verkeerde pagina omdat de hoverstatus die een submenu zou moeten tonen nooit wordt geactiveerd.
Ook navigatie die technisch wel werkt met aanraken, kan in de praktijk kapot zijn als de tikdoelen te klein of te dicht op elkaar staan. De algemene richtlijn voor mobiele tikdoelen is een minimum van 44 bij 44 pixels. Kleinere doelen leiden tot misgetikte knoppen, onbedoelde navigatie en gefrustreerde bezoekers die het makkelijker vinden om weg te gaan dan te zoeken naar waarvoor ze kwamen.
Hoe controleer je of je website mobielvriendelijk is?
De snelste controle is je site openen op een echte telefoon. Gebruik zowel je eigen apparaat als, als het kan, een ander merk en model. Wat op de ene telefoon goed oogt, kan op een andere anders worden weergegeven door verschillen in schermresolutie, browserengine en versie van het besturingssysteem.
Ontwikkelaarstools in de browser bieden een ingebouwde mobiele simulatie. In de meeste desktopbrowsers open je met F12 het ontwikkelaarspaneel. Met een apparaatbalkpictogram simuleer je verschillende schermformaten en apparaattypen. Dat is handig voor snelle controles, maar geen volledig alternatief voor testen op echte apparaten, omdat gesimuleerde omgevingen het echte aanraakgedrag, de weergave van lettertypen of netwerkomstandigheden niet nabootsen.
De mobielvriendelijkheidstest van Google, beschikbaar via Google Search Console, beoordeelt je pagina's en markeert specifieke problemen met mobiele bruikbaarheid. Hij vindt problemen zoals tekst die te klein is om te lezen, klikbare elementen die te dicht op elkaar staan en content die niet in het venster past. Het rapport geeft details per pagina, zodat je ziet welke pagina's falen en welke slagen.
Je analytics-data voegt een gedragslaag toe aan het technische beeld. Is je bouncepercentage op mobiel aanzienlijk hoger dan op desktop, dan wijst dat verschil vaak op een weergave- of bruikbaarheidsprobleem op telefoons. Het artikel over een hoog bouncepercentage op mobiel legt uit hoe je deze signalen leest en waarom bezoekers op kleinere schermen direct weggaan.
Hoe los je een website op die er op mobiel kapot uitziet?
De juiste oplossing hangt af van welke oorzaak het probleem veroorzaakt. Elk van de vijf oorzaken hierboven heeft een eigen oplossing.
Stap over op een responsive lay-out
Is de site helemaal niet responsive, dan is de oplossing opnieuw bouwen op een responsive framework of overstappen naar een platform dat standaard responsive HTML levert. Achteraf responsive gedrag toevoegen aan een niet-responsive site kan, maar kost vaak meer werk dan opnieuw bouwen vanuit een responsive begin. Draait de site op een modern platform dat responsive thema's of templates ondersteunt, dan is overstappen op een responsive template meestal de snellere route.
Verklein afbeeldingen en begrens ze
Upload afbeeldingen op de werkelijke weergavegrootte die nodig is, niet op hun oorspronkelijke exportresolutie. Voor de meeste websiteafbeeldingen is een maximale breedte van 1.200 pixels genoeg voor schermen met hoge dichtheid en blijven de bestandsgroottes beheersbaar. Met CSS-regels die max-width: 100% op afbeeldingen zetten, loopt een afbeelding nooit over zijn container heen, wat de schermbreedte ook is. Die ene regel lost de meeste overloopproblemen met afbeeldingen op zonder dat je elke afbeelding afzonderlijk hoeft te verkleinen.
Vervang vaste breedtes door flexibele eenheden
Vaste breedtes in pixels op containers, tabellen en andere lay-outelementen vervang je door breedtes in percentages of flexibele CSS-eenheden zoals em, rem of vw. Een container met width: 90% in plaats van width: 900px schaalt op elk schermformaat goed mee. Bij tabellen voorkom je met een CSS-regel die tabellen horizontaal scrollbaar maakt binnen hun container dat ze de algehele lay-out op smalle schermen breken.
Vergroot lettergroottes voor mobiel
Lopende tekst op mobiel zet je op minstens 16 pixels. Staat in de desktopstylesheet een kleinere maat, dan kan een media query voor mobiele schermbreedtes die overschrijven. Bekijk ook de groottes van koppen, want veel kopstijlen die op een desktop proportioneel ogen, worden op een telefoon overdreven groot en duwen andere content onder de vouw voordat de bezoeker iets heeft gelezen.
Vervang navigatie op basis van hover door een mobiel menu
De standaardoplossing voor mobiele navigatie is een uitklapbaar menu, vaak een hamburgermenu genoemd, dat met een tik wordt geopend in plaats van met hover. De meeste responsive frameworks en websitebouwers hebben dit patroon standaard. Heeft de navigatie van de huidige site geen mobiel equivalent, dan moet je de stylesheet en JavaScript aanpassen of overstappen op een thema met mobiele navigatie als ingebouwde functie. Controleer ook de grootte van de tikdoelen, zodat alle menu-items voldoen aan de richtlijn van minimaal 44 pixels.
Heeft je site naast weergaveproblemen ook kapotte pagina's, dan maakt het eerst herstellen van de visuele lay-out het vaak makkelijker om tijdens de audit naar elke pagina te navigeren en die te testen.
Hoe WEMASY met mobiel omgaat
De websitebouwer van WEMASY genereert op elke pagina responsive HTML zonder dat je iets hoeft in te stellen. Lay-outs herschikken automatisch op mobiele schermformaten, afbeeldingen blijven binnen hun containers en de navigatie schakelt op telefoons en tablets over op een menu dat met aanraken werkt. Lettergroottes, tikdoelen en witruimte zijn ingesteld in het designsysteem van het platform, volgens de normen voor mobiele bruikbaarheid, zodat merken die op WEMASY starten een mobielklare site hebben in plaats van er achteraf een te moeten bijbouwen.
Bekijk wat er is inbegrepen bij de websitebouwer van WEMASY of vergelijk abonnementen op de prijzenpagina.
Veelgestelde vragen
Waarom ziet mijn website er op desktop prima uit maar op mobiel kapot?
Dat gebeurt meestal doordat de site vooral voor desktop is gebouwd of ontworpen, zonder responsive CSS-regels die de lay-out aanpassen voor kleinere schermen. De desktopbrowser heeft genoeg breedte om de vaste lay-out te tonen zoals bedoeld. Een telefoonscherm niet, dus elementen lopen over, overlappen of worden zo klein dat ze onleesbaar zijn. De site bekijken in de mobiele simulatiemodus van een browser of op een echt apparaat is de snelste manier om te zien wat mobiele bezoekers meemaken. Met de websitebouwer van WEMASY stel je dit direct in op je eigen website.
Beïnvloedt een kapotte mobiele lay-out mijn positie in Google?
Ja. Google gebruikt mobile-first indexing, wat betekent dat Google voor de ranking vooral de mobiele versie van een pagina beoordeelt. Een site met mobiele weergaveproblemen, kleine tekst of content die buiten het venster valt, krijgt lagere bruikbaarheidsscores, wat doorwerkt in de totale zoekprestaties. Mobiele problemen oplossen verbetert zowel de gebruikerservaring als je SEO.
Wat veroorzaakt horizontaal scrollen op een mobiele website?
Horizontaal scrollen op mobiel wijst bijna altijd op een element met een vaste breedte in pixels dat breder is dan het telefoonscherm. Veelvoorkomende boosdoeners zijn tabellen, zijbalken, ingesloten content, afbeeldingen zonder breedtebeperking en containers met een specifieke breedte in pixels in plaats van een percentage. Het element dat overloopt opsporen in de ontwikkelaarstools van de browser en dan de vaste breedte vervangen door een percentage of overloopbeheer toevoegen aan de bovenliggende container, lost het probleem meestal op.
Hoe test ik of mijn website mobielvriendelijk is?
Open de site op een echte telefoon en scrol door elke belangrijke pagina. Open hem daarna in de ontwikkelaarstools van een desktopbrowser en gebruik de apparaatsimulatie om een voorbeeld te bekijken bij meerdere schermbreedtes. Voor een gestructureerde audit haal je de pagina's door het rapport over mobiele bruikbaarheid van Google Search Console, dat specifieke problemen markeert zoals te kleine tekst, klikbare elementen die te dicht op elkaar staan en problemen met de viewportconfiguratie. Beide aanpakken samen geven het meest complete beeld.
Kan ik een kapotte mobiele site repareren zonder alles opnieuw te bouwen?
Dat hangt af van hoe de site oorspronkelijk is gebouwd. Draait de site op een platform dat responsive thema's ondersteunt, dan is overstappen op een responsive thema vaak de snelste oplossing en hoef je geen content opnieuw op te bouwen. Is de site op maat gecodeerd met een niet-responsive lay-out, dan kunnen gerichte CSS-wijzigingen met media queries specifieke problemen oplossen zonder alles opnieuw te bouwen. Is de lay-out echter gebouwd op tabellen of leunt hij overal zwaar op vaste breedtes, dan is een volledige herbouw op een responsive basis meestal efficiënter dan losse problemen lappen.
Waarom vertrekken bezoekers na een paar seconden van mijn website op mobiel?
Komen bezoekers op een pagina met weergaveproblemen, onleesbare tekst, kapotte navigatie of traag ladende afbeeldingen, dan vertrekken ze snel omdat de pagina niet voldoet aan hun basisverwachtingen van bruikbaarheid. Mobiele bezoekers hebben minder geduld met weerstand dan desktopbezoekers. Is de lay-out kapot of traag, dan gaan ze terug naar de zoekresultaten en klikken ze op het resultaat van een concurrent. Het artikel over bezoekers die je website verlaten behandelt alle redenen waarom mensen snel vertrekken en hoe je ontdekt welke reden jouw site raakt.