Je website optimaliseren voor mobiel.

Het merendeel van je bezoek komt binnen op een telefoon. Voor de meeste sites zit dat tussen de zestig en tachtig procent, en bij lokale diensten nog hoger.

Toch wordt vrijwel elke site gemaakt en beoordeeld op een groot scherm. Dat is de reden dat er zoveel mis is aan de mobiele kant: niemand kijkt ernaar.

Dit artikel gaat over een bestaande site mobiel laten werken. Begin je aan een nieuwe site, lees dan ook over mobile first ontwerpen, want dan draai je de volgorde om en begin je bij het kleinste scherm.

Waarom het uitmaakt

Google beoordeelt sinds een paar jaar de mobiele versie van je site, ook voor de posities die op desktop verschijnen. Wat er op je telefoon staat is dus wat telt. Inhoud die je op mobiel verbergt, telt in de praktijk niet mee.

Belangrijker nog: iemand op een telefoon heeft minder geduld. Hij staat ergens, heeft een matige verbinding en een klein scherm. Alles wat schuurt kost je bezoekers, en dat merk je pas als je zelf kijkt.

Er is nog een reden die vaak wordt vergeten. Mobiel bezoek heeft een andere aanleiding. Iemand die achter zijn bureau zit oriënteert zich; iemand met een telefoon in zijn hand wil vaak nu iets: bellen, de route, de openingstijden, een prijs. Als die dingen niet binnen twee tikken te vinden zijn, verlies je precies de bezoekers die het dichtst bij een opdracht zaten.

Waar je begint

Pak je telefoon en doe wat een klant zou doen. Zoek je bedrijf op, open je site, en probeer een offerte aan te vragen of iets te bestellen. Klok hoe lang het duurt.

Dat klinkt te simpel om nuttig te zijn en het is de snelste manier om te zien wat er mis is. Bijna iedereen komt in die vijf minuten drie dingen tegen die hij niet wist.

Doe het bij voorkeur buiten, op mobiel internet, met een toestel dat niet je nieuwste is. Dat is de situatie waarin je bezoekers zitten en waarin jij zelden kijkt.

De technische basis

Voordat je aan de details begint, moeten twee dingen kloppen.

De viewport-instructie. Eén regel in de kop van je HTML die de browser vertelt dat de pagina zich moet aanpassen aan de schermbreedte. Ontbreekt die regel, dan toont een telefoon je site als een uitgezoomde desktopversie en helpt geen enkele andere maatregel. Bij een moderne WordPress-website staat hij er, bij oudere sites soms niet.

Responsive opmaak. Eén site die zich aanpast aan de schermbreedte, in plaats van een aparte mobiele versie op een eigen adres. Die aparte mobiele sites bestaan nog en ze geven alleen maar problemen: dubbele inhoud, twee keer onderhoud en verwarring bij zoekmachines. Kom je er een tegen, dan is samenvoegen de juiste oplossing.

Wat er meestal mis is

• Te kleine letters. Onder de 16 pixels wordt lezen op een telefoon werk. Ook je formuliervelden: is de tekst kleiner, dan zoomt iOS bij het aantikken automatisch in en staat je pagina scheef.
• Knoppen die te klein of te dicht op elkaar staan. Reken op minstens 44 bij 44 pixels, want een vinger is geen muis. Houd er ook ruimte tussen: twee links onder elkaar met drie pixels ertussen raakt niemand goed.
• Horizontaal schuiven. Meestal veroorzaakt door een tabel, een brede afbeelding of een blok met een vaste breedte. Dit is de lelijkste fout en hij valt op desktop nooit op.
• De belangrijkste knop pas onderaan. Op een telefoon is dat vier keer scrollen. Zet hem ook boven.
• Menu's die niet werken. Een uitklapmenu met drie niveaus is op een telefoon niet te bedienen.
• Meldingen die het scherm vullen. Een cookiebanner plus een nieuwsbriefvenster plus een chatvenster laat van je pagina niets over.
• Alles wat op hover werkt. Een menu dat opengaat als je er met de muis overheen gaat, bestaat op een telefoon niet. Hetzelfde geldt voor tekst die pas verschijnt bij aanwijzen.
• Verspringende inhoud. Je wilt ergens op tikken en op dat moment schuift er een advertentie of een afbeelding tussen. Dit gebeurt omdat er geen ruimte was gereserveerd voor iets dat later laadt.

Snelheid

Dit is het onderdeel met de meeste winst en het minst spannende werk.

Afbeeldingen

Afbeeldingen zijn bijna altijd de boosdoener. Een foto van vier megabyte die in een vak van vierhonderd pixels wordt getoond is pure verspilling.

Wat je doet:

• Comprimeer ze voordat je ze uploadt, of laat een plugin dat automatisch doen.
• Gebruik WebP. Dat formaat levert bij gelijke kwaliteit aanzienlijk kleinere bestanden op en wordt overal ondersteund.
• Lever meerdere formaten aan zodat een telefoon de kleine versie krijgt en een breed scherm de grote. WordPress doet dit standaard, mits je thema het niet stukmaakt.
• Laat afbeeldingen onder de vouw pas laden als ze in beeld komen. Ook dat zit tegenwoordig standaard in WordPress.
• Geef breedte en hoogte op. Dan reserveert de browser de ruimte en verspringt er niets tijdens het laden.

De rest

Caching aanzetten, lettertypes beperken tot wat je gebruikt, en scripts opruimen die van een plugin komen die je twee jaar geleden uitzette. Dat laatste levert bij oudere WordPress-sites vaak de grootste sprong op, en het is puur opruimwerk.

Kijk daarnaast naar de reactietijd van je server. Duurt het al een seconde voordat er iets terugkomt, dan is alles wat je aan de voorkant doet dweilen. Dat is een kwestie van betere hosting of van een site die te veel werk doet bij elk bezoek.

Wat je meet

Test met PageSpeed Insights, maar kijk vooral naar de gegevens van echte bezoekers als die er zijn. Een testscore is een momentopname op een snelle verbinding.

Drie waarden tellen: de tijd tot het grootste blok op je scherm staat, de reactietijd op een tik, en of er tijdens het laden dingen verspringen. Google toont ze ook in Search Console, apart voor mobiel en desktop. Kijk daar, want dat gaat over je echte bezoekers.

Wat je op een telefoon anders doet

Kortere alinea's. Wat op een breed scherm drie regels is, wordt op een telefoon acht.

Minder velden in je formulier. Elk veld is op een telefoon meer werk dan op een toetsenbord, dus de winst van weglaten is hier groter.

Het juiste toetsenbord bij het juiste veld. Een telefoonnummerveld hoort een numeriek toetsenbord op te roepen, een e-mailveld het toetsenbord met de apenstaart. Dat is één regel code en het scheelt merkbaar.

Automatisch invullen aanzetten. Als je je velden de juiste namen geeft, vult de telefoon adres en e-mail zelf in. Dat scheelt de bezoeker het meeste typewerk van allemaal en het wordt bijna nooit ingesteld.

Bellen met één tik. Zet je telefoonnummer als klikbare link. Voor lokale bedrijven is dat vaak de belangrijkste knop van de hele site. Meer daarover staat bij call-to-action.

Geen pdf's als eindbestemming. Een pdf openen op een telefoon is een kleine beproeving. Zet de inhoud gewoon op een pagina.

Navigatie

Het hamburgermenu is niet ideaal en het is wel wat iedereen kent. Zorg dat het herkenbaar is, dat het snel opent en dat het sluit waar mensen dat verwachten.

Wat beter werkt dan een uitgebreid menu: één opvallende knop die altijd zichtbaar blijft met de actie die er het meest toe doet. Bellen, route, offerte. Houd hem klein genoeg dat hij de tekst niet in de weg zit.

Zet daarnaast je belangrijkste informatie ook gewoon in de tekst, niet alleen in het menu. Mensen scrollen liever dan dat ze zoeken.

Bij een webshop

Het afrekenen is waar het geld weglekt. Waar je op let:

• Afrekenen zonder account. Verplicht registreren kost meer bestellingen dan het oplevert.
• Zo min mogelijk stappen. Eén pagina werkt op een telefoon vaak beter dan vijf schermen achter elkaar.
• Betaalmethoden bovenaan. iDEAL en Apple Pay schelen tikwerk en bouwen vertrouwen.
• Postcodecheck. Adres invullen op een telefoon is bewerkelijk; laat het systeem het werk doen.
• Verzendkosten vroeg tonen. Onverwachte kosten in de laatste stap zijn de meest genoemde reden om een bestelling af te breken.

Testen

Kijk minimaal op twee formaten: een gewone telefoon rond 390 pixels breed en een kleine rond 320. Op die laatste breekt het meeste, en die apparaten zijn nog steeds in gebruik.

Doe het op een echt toestel en niet alleen in de simulator van je browser. Aanraken voelt anders dan klikken, en pas op een echt scherm merk je of iets te dicht op elkaar staat.

Test ook liggend. Veel mensen draaien hun telefoon bij een formulier of een video, en dat is precies het formaat waar niemand naar kijkt.

Vraag daarna iemand anders het te proberen. Jij weet waar alles staat en dat maakt je de slechtst mogelijke tester.

Wat je niet meer vindt

Google had jarenlang een mobiel-vriendelijk-test en een rapport over mobiele bruikbaarheid in Search Console. Beide zijn eind 2023 verdwenen, met de redenering dat het web inmiddels grotendeels mobielvriendelijk is.

Kom je een handleiding tegen die naar die hulpmiddelen verwijst, dan is die verouderd. Gebruik in plaats daarvan PageSpeed Insights en de ontwikkelaarshulpmiddelen in je browser.

Verouderd advies dat je nog tegenkomt

AMP. Kom je nog artikelen tegen die AMP aanraden, dan zijn die verouderd. Google haalde in 2021 de voorwaarde weg dat je AMP nodig had voor de nieuwscarrousel, en sindsdien stappen de meeste sites er weer vanaf. Een gewone snelle site is beter dan een aparte AMP-versie die je apart moet onderhouden.

Een aparte mobiele site. Ooit gebruikelijk, nu een blok aan je been. Eén site die meebeweegt is goedkoper in onderhoud en beter voor je vindbaarheid.

Inhoud weglaten op mobiel. Het advies om op een telefoon minder te tonen was logisch toen Google de desktopversie beoordeelde. Nu is de mobiele versie de versie die telt, dus wat je daar weglaat bestaat niet meer.

Een app als oplossing voor een trage site. Een app lost je websiteprobleem niet op en kost een veelvoud aan onderhoud. Een progressive web app is soms een tussenweg, maar begin bij een site die gewoon snel is.

Een korte controlelijst

1. Opent je site zonder in te zoomen en zonder horizontaal schuiven.
2. Is de tekst minstens 16 pixels en de knoppen minstens 44 bij 44.
3. Staat je belangrijkste actie binnen één scherm zichtbaar.
4. Is je telefoonnummer aantikbaar.
5. Werkt je formulier met de juiste toetsenborden en automatisch invullen.
6. Laadt je grootste element binnen 2,5 seconden op mobiel internet.
7. Verspringt er niets terwijl de pagina opbouwt.
8. Blijven je meldingen samen onder een kwart van het scherm.

Loop dit één keer per jaar door, en altijd na een grote wijziging aan je site.

Mobiel zoeken werkt anders

Wie op een telefoon zoekt, krijgt een andere resultatenpagina dan wie achter een bureau zit. Er is minder ruimte, dus de eerste resultaten vullen het hele scherm, en lokale resultaten met een kaart staan vaker bovenaan.

Dat heeft twee gevolgen voor je site. Ten eerste telt je positie zwaarder: op een klein scherm is het verschil tussen plek drie en plek zes veel groter dan op desktop. Ten tweede is je bedrijfsprofiel bij Google vaak belangrijker dan je website, want dat blok staat boven de gewone resultaten.

Let daarom ook op wat er in het zoekresultaat zelf staat. Een titel die op desktop past, wordt op een telefoon afgekapt. Houd je paginatitels rond de vijftig tekens en zet het belangrijkste vooraan.

Lettertypen, kleuren en donkere modus

Twee dingen die op mobiel meer uitmaken dan op een groot scherm.

Lettertypen kosten laadtijd. Elk extra gewicht en elke extra stijl is een apart bestand. Twee lettertypen met elk twee gewichten is ruim voldoende; ik zie regelmatig sites die er acht laden. Zorg bovendien dat de tekst zichtbaar blijft terwijl het lettertype nog laadt, anders staart iemand naar een lege pagina.

Donkere modus. Een groeiend deel van de telefoons staat permanent in donkere modus. Je site hoeft daar niet in mee te gaan, maar controleer wel of je formulieren en je e-mails er niet onleesbaar van worden. Invoervelden met een witte achtergrond en witte tekst zijn een klassieke uitkomst.

Contrast is op een telefoon buiten in de zon een heel ander verhaal dan op een monitor binnen. Lichtgrijze tekst op wit ziet er in een ontwerp verfijnd uit en is op straat niet te lezen.

Video en beweging

Video op mobiel is zwaar, en op mobiel internet duur voor je bezoeker.

Wat je doet: geen automatisch afspelende video met geluid, nooit. Een korte achtergrondvideo zonder geluid kan, mits hij klein is en niet laadt voordat de rest van de pagina staat. Video van YouTube of Vimeo laad je pas na een klik, want anders haalt de insluiting bij elk bezoek een flinke hoeveelheid code binnen.

Respecteer bovendien de instelling voor verminderde beweging. Mensen die daar last van hebben, zetten dat in hun telefoon aan, en een site die daar doorheen walst is voor hen onbruikbaar.

De cookiebanner op een klein scherm

Dit is waar techniek, wet en gebruikerservaring elkaar in de weg zitten.

De banner moet er zijn en moet een echte keuze bieden: weigeren moet net zo makkelijk zijn als accepteren. Op een telefoon betekent dat twee even grote knoppen naast elkaar, niet een grote groene knop en een grijs tekstlinkje.

Wat je verder doet: houd hem klein, laat hem niet meer dan een kwart van het scherm bedekken, en zorg dat hij verdwijnt zodra iemand gekozen heeft. Combineer hem niet met een nieuwsbriefvenster en een chatvenster, want dan blijft er niets van je pagina over.

Test dit ook echt op een telefoon. Cookiebanners worden vrijwel altijd op desktop ingesteld en zijn op mobiel de meest voorkomende reden dat een pagina onbruikbaar is.

Wat er misgaat bij bouwers en thema's

Bij WordPress-sites die met een paginabouwer zijn gemaakt, zitten de mobiele problemen bijna altijd op dezelfde plekken.

• Kolommen die niet onder elkaar komen. Vier kolommen naast elkaar op desktop worden op een telefoon vier smalle strookjes in plaats van vier blokken onder elkaar.
• Vaste breedtes en marges. Een blok met een breedte in pixels in plaats van in procenten veroorzaakt de horizontale schuifbalk.
• Lettergroottes die niet meeschalen. Een kop van 64 pixels is op een telefoon drie regels. Stel per apparaat een eigen grootte in; elke fatsoenlijke bouwer kan dat.
• Ruimte die blijft staan. Marges van honderd pixels boven en onder zijn op desktop rustig en op mobiel eindeloos scrollen.
• Achtergrondafbeeldingen die verkeerd uitsnijden. Op desktop staat het gezicht in beeld, op mobiel alleen een schouder.
• Verborgen blokken die toch laden. Een blok dat je op mobiel verbergt, wordt vaak nog wel opgehaald. Dan betaalt je bezoeker voor iets dat hij niet ziet.

Loop na elke wijziging aan een pagina de mobiele weergave na. Bij een paginabouwer is dat één knop, en het scheelt de helft van de problemen.

Als je site vanaf een advertentie wordt geopend

Verkeer uit advertenties en social media komt vrijwel volledig binnen op een telefoon, en vaak op een landingspagina die daar niet op is ingericht.

Drie dingen die daar meer opleveren dan waar ook:

Laat de belofte terugkomen. Wat in de advertentie stond, moet bovenaan de pagina staan. Anders denkt iemand dat hij verkeerd is geklikt.

Eén actie. Op een landingspagina vanaf een advertentie hoort geen volledig menu en geen keuzemenu van diensten. Eén ding dat iemand kan doen.

Snel. Bij betaald bezoek is de klik al afgerekend voordat je pagina in beeld staat. Haakt iemand tijdens het laden af, dan heb je precies niets gekocht.

Toegankelijkheid op een telefoon

Wat op een klein scherm het meest misgaat:

• Tekst die niet mag inzoomen. Sommige sites blokkeren zoomen. Dat is een instelling die je nooit moet gebruiken; mensen met slechte ogen hebben hem nodig.
• Doelen te dicht op elkaar. Voor iemand met trillende handen of grote vingers is dat het verschil tussen bruikbaar en onbruikbaar.
• Formulieren zonder echt label. Alleen een grijze tekst in het veld verdwijnt zodra je begint te typen, en een schermlezer leest hem niet voor.
• Alleen kleur als betekenis. Een rood veld dat aangeeft dat er iets fout is, zonder tekst erbij, zegt niets tegen wie kleuren slecht onderscheidt.

Deze punten kosten je niets extra en ze verbeteren de site voor iedereen, niet alleen voor wie een beperking heeft.

Veelgestelde vragen over mobiele optimalisatie

Wat is het verschil tussen responsive en mobile first?

Responsive gaat over het resultaat: één site die zich aanpast aan elk scherm. Mobile first gaat over de volgorde waarin je ontwerpt: eerst het kleinste scherm, daarna de rest. Een site kan responsive zijn zonder mobile first te zijn ontworpen, en dat merk je meestal.

Heb ik een aparte mobiele website nodig?

Nee. Eén site die meebeweegt is goedkoper, makkelijker te onderhouden en beter voor je vindbaarheid. Heb je nog een aparte mobiele site, dan is samenvoegen verstandig.

Hoeveel bezoekers komen er via mobiel?

Bij de meeste sites tussen de zestig en tachtig procent, bij lokale diensten hoger en bij zakelijke software lager. Kijk het na in je eigen statistieken; dat getal is bepalend voor hoeveel aandacht dit verdient.

Telt mobiele snelheid mee voor Google?

Ja. Google meet snelheid en stabiliteit op basis van echte bezoekers, en beoordeelt daarbij de mobiele versie. Het is geen zwaarwegend signaal in vergelijking met de inhoud, en het is wel iets waar je zelf iets aan kunt doen.

Hoe test ik mijn site op verschillende telefoons?

Begin met je eigen toestel en de ontwikkelaarshulpmiddelen in Chrome, waarin je schermformaten kunt nabootsen. Voor echte zekerheid leen je een toestel van een ander merk. Vooral oudere Android-telefoons laten problemen zien die je op een nieuwe iPhone niet ziet.

Wat is een goede laadtijd op mobiel?

Het grootste blok op je scherm binnen 2,5 seconden op een gemiddelde mobiele verbinding. Onder de vier seconden is werkbaar, daarboven verlies je merkbaar bezoekers.

Moet ik AMP gebruiken?

Nee. Sinds 2021 is het geen voorwaarde meer voor de nieuwscarrousel en de meeste sites zijn ermee gestopt. Steek dezelfde moeite in een snelle gewone site.

Waarom zoomt mijn formulier in op een iPhone?

Omdat de tekst in het invoerveld kleiner is dan 16 pixels. Zet die op minstens 16 en het gedrag verdwijnt. Dit is een van de meest voorkomende en makkelijkst op te lossen ergernissen.

Mag ik inhoud verbergen op mobiel?

Inklappen in een uitklapblok is prima, want de tekst staat er dan gewoon. Volledig weglaten is onverstandig, want Google beoordeelt de mobiele versie en wat daar niet staat, telt niet mee.

Heb ik een app nodig?

Vrijwel nooit. Een app kost veel meer onderhoud dan een website en mensen installeren zelden een app voor een bedrijf waar ze een paar keer per jaar iets kopen. Zorg eerst dat je site goed werkt.

Wat kost het om een bestaande site mobiel te laten werken?

Dat hangt af van hoe hij gebouwd is. Bij een moderne WordPress-site met een fatsoenlijk thema zijn de meeste punten in een dag te verhelpen. Bij een oude site zonder responsive opmaak is opnieuw bouwen meestal goedkoper dan repareren.

Waarom ziet mijn site er op mijn telefoon anders uit dan bij mijn klant?

Meestal door een ander besturingssysteem, een andere browser of een instelling als donkere modus of een grotere systeemletter. Test daarom op minstens één iPhone en één Android-toestel, en zet donkere modus een keer aan.

Hoe krijg ik mijn kolommen netjes onder elkaar op mobiel?

Elke paginabouwer heeft per rij een instelling om kolommen te stapelen onder een bepaalde schermbreedte. Staat die uit, dan blijven de kolommen naast elkaar staan en worden ze onleesbaar smal.

Mag ik zoomen uitschakelen op mijn site?

Nee. Dat blokkeert een functie waar mensen met slecht zicht op leunen, en het levert je niets op. Als je site zonder zoomen alleen goed werkt, is de oplossing een betere mobiele opmaak.

Moet mijn cookiebanner op mobiel anders zijn?

De regels zijn dezelfde, de uitvoering niet. Op een telefoon moeten accepteren en weigeren twee even grote, even opvallende knoppen zijn, en de banner mag niet het halve scherm vullen. Dit is de plek waar het het vaakst misgaat.

Waarom is mijn site traag op mobiel maar snel op mijn laptop?

Omdat je laptop een snelle verbinding heeft en een veel sterkere processor. Test met de instelling voor een langzame verbinding in je browser, of kijk in Search Console naar de cijfers van echte bezoekers.

Hoeveel lettertypen mag ik gebruiken?

Twee, met per lettertype hooguit twee gewichten. Elk extra bestand kost laadtijd, en op mobiel merk je dat direct. Zorg er bovendien voor dat de tekst zichtbaar blijft terwijl het lettertype nog laadt.

Kan ik video gebruiken op mobiel?

Ja, mits zonder automatisch geluid, klein van formaat en pas ladend nadat de rest van de pagina staat. Insluitingen van YouTube laad je pas na een klik, want die halen anders bij elk bezoek veel code binnen.