Een groot deel van je bezoekers bekijkt je website waarschijnlijk op een telefoon, vaak onderweg. Werkt je site dan niet goed, dan haken ze af en kiest Google eerder voor een concurrent. In dit artikel lees je wat mobielvriendelijk webdesign inhoudt, waar het meestal misgaat en hoe je het stap voor stap goed aanpakt.
Wat mobielvriendelijk webdesign precies is
Een mobielvriendelijke website is op een telefoon net zo goed te gebruiken als op een laptop: je leest de tekst zonder in te zoomen, je bedient knoppen met je duim zonder mis te tikken en pagina’s laden ook op een mobiel netwerk snel. De toets is niet of de site er op mobiel redelijk uitziet, maar of een bezoeker kan doen waarvoor hij kwam: bellen, een offerte aanvragen of iets bestellen.
Responsive, adaptive of een aparte mobiele site
Bij responsive design heb je één website op één adres en past de opmaak zich aan de schermbreedte aan: kolommen schuiven onder elkaar, afbeeldingen schalen mee en het menu klapt in. Bij adaptive design maak je vaste opmaken voor een paar schermformaten. Een aparte mobiele site, vaak op een m.-subdomein, betekent twee sites onderhouden die snel uit de pas lopen.
Google adviseert responsive design, omdat het het makkelijkst te onderhouden is en alle inhoud op één URL staat. Moderne WordPress-thema’s zijn standaard responsive, maar dat zegt nog niets over hoe goed jouw pagina’s op een telefoon werken. Daar gaat het ontwerp over.
Waarom een responsieve website zo belangrijk is
Google beoordeelt eerst je mobiele versie
Google werkt met mobile-first indexing: voor het opnemen en rangschikken van je pagina’s kijkt Google vooral naar de mobiele versie. Tekst, koppen of links die je op mobiel weglaat om het scherm rustig te houden, worden daardoor mogelijk niet meegenomen. Zorg dus dat de inhoud op mobiel en desktop gelijk is.
Je klant beslist op zijn telefoon
Denk aan iemand met een lekkende kraan die snel een installateur zoekt, of een ondernemer die ’s avonds op de bank leveranciers vergelijkt. Moet hij inzoomen om je aanbod te lezen of zoeken naar je telefoonnummer, dan is de concurrent één tik verder. Kijk in Google Analytics per apparaatcategorie hoeveel bezoekers en aanvragen via mobiel binnenkomen. Zie je veel mobiele bezoekers maar weinig mobiele aanvragen, dan weet je waar de winst zit.
Mobielvriendelijk en conversiegericht webdesign gaan hier samen op: het gaat er niet om dat de site op het scherm past, maar dat de volgende stap voor de bezoeker vanzelfsprekend is. In het artikel over conversiegericht design voor zakelijke websites lees je hoe je die stap ontwerpt.
Waar het op mobiel meestal misgaat
Een patroon dat je bij veel lokale dienstverleners ziet: de homepage opent met een grote slider, het telefoonnummer staat alleen in de footer en het offerteformulier vraagt om tien velden. Op een telefoon moet de bezoeker dan eerst langs schermvullende foto’s voordat hij weet wat het bedrijf doet, en daarna een lang formulier invullen met zijn duimen. Veelgemaakte fouten op een rij:
- Eerst desktop ontwerpen. De mobiele versie wordt dan een uitgerekt restproduct, met de belangrijkste knop ver onderaan.
- Menu’s die op hover werken. Een telefoon heeft geen muis, dus submenu’s die openklappen als je eroverheen beweegt, zijn lastig of niet te bereiken.
- Knoppen en links te dicht op elkaar. Wie mis tikt, komt op de verkeerde pagina en gaat terug naar Google.
- Schermvullende pop-ups. Een nieuwsbriefvenster dat direct het hele scherm bedekt, irriteert bezoekers, en Google raadt dit op mobiel af.
- Zware afbeeldingen en video’s. Een foto van een paar megabyte laadt via 4G merkbaar trager dan op kantoorwifi.
Mobiel eerst ontwerpen in vijf stappen
Mobile first betekent dat je begint met het kleinste scherm en daarna uitbreidt naar tablet en desktop. Dat dwingt je om te kiezen wat echt belangrijk is.
1. Bepaal per pagina de ene hoofdactie
Kies wat een bezoeker op de pagina moet doen. Bij een installatiebedrijf is dat bellen of een afspraak maken, bij een webshop een product in het winkelmandje leggen. Zet die actie in het eerste scherm en herhaal hem onderaan. Maak je telefoonnummer een klikbare link, zodat bezoekers met één tik bellen.
2. Maak navigatie en knoppen duimvriendelijk
Houd het menu kort, met de belangrijkste pagina’s bovenaan. Maak knoppen groot genoeg om met een duim te raken: een gangbare richtlijn is minimaal zo’n 44 tot 48 pixels, met ruimte ertussen. Hoe je een menu opbouwt dat bezoekers zonder nadenken gebruiken, lees je in het artikel over een betere navigatiestructuur voor je website.
3. Schrijf voor een klein scherm
Een alinea van vijf regels op een laptop wordt op een telefoon een blok tekst van een half scherm. Schrijf korte alinea’s, gebruik tussenkoppen en zet het belangrijkste bovenaan. Kies een lettergrootte van minimaal 16 pixels voor lopende tekst en zorg voor genoeg contrast, zodat je site ook buiten in de zon leesbaar blijft.
4. Maak formulieren kort en makkelijk in te vullen
Vraag alleen wat je echt nodig hebt om iemand terug te bellen of een offerte te maken. Gebruik het juiste invoertype, zodat een telefoon bij het veld voor een telefoonnummer een cijfertoetsenbord laat zien en bij e-mail een toetsenbord met @. Zet automatisch aanvullen aan voor naam en adres. Let ook op de lettergrootte in invoervelden: onder de 16 pixels zoomt een iPhone automatisch in, wat de pagina onrustig maakt.
5. Houd de site snel op een mobiel netwerk
Op een telefoon wisselt de verbinding, dus laadtijd weegt zwaarder. Lever afbeeldingen aan in het formaat waarin ze getoond worden, gebruik een modern formaat zoals WebP en laad afbeeldingen verderop in de pagina pas als de bezoeker scrolt. In het artikel over beeldoptimalisatie voor snellere websites lees je hoe je dat aanpakt.
Zo test je of je website echt mobielvriendelijk is
Een site die er in een versmald browservenster goed uitziet, werkt nog niet vanzelf goed op een telefoon. Test daarom zo:
- Op echte toestellen. Pak je eigen telefoon, maar ook een ouder of kleiner toestel, en zet wifi uit zodat je via het mobiele netwerk laadt.
- Met een opdracht. Vraag iemand die je site niet kent om op zijn telefoon een offerte aan te vragen of een product te bestellen. Kijk mee en zeg niets.
- In Chrome. Met de apparaatmodus in de ontwikkelaarstools bekijk je snel verschillende schermbreedtes.
- Met PageSpeed Insights. Hier zie je de mobiele score en, als je site genoeg verkeer heeft, de Core Web Vitals van echte bezoekers: hoe snel het grootste element laadt (LCP), hoe snel de pagina reageert (INP) en hoeveel de opmaak verspringt (CLS).
- In Google Search Console. Het rapport Core Web Vitals toont mobiel en desktop apart.
Google heeft zijn losse test voor mobielvriendelijkheid eind 2023 stopgezet, dus oudere handleidingen die ernaar verwijzen kun je negeren.
Korte checklist
- De inhoud op mobiel is gelijk aan die op desktop.
- De hoofdactie staat in het eerste scherm en je telefoonnummer is met één tik te bellen.
- Het menu is kort en werkt zonder hover.
- Knoppen zijn groot genoeg en tekst is leesbaar zonder inzoomen.
- Formulieren tonen het juiste toetsenbord en vragen alleen het nodige.
- Er is geen pop-up die direct het hele scherm bedekt.
- Afbeeldingen zijn verkleind en in een modern formaat opgeslagen.
- Je hebt getest op een echt toestel via het mobiele netwerk.
Hulp bij een mobielvriendelijke website
Paperclicks is een webbureau in Best dat websites en webshops ontwerpt voor bedrijven in de regio Eindhoven en de rest van Nederland. We helpen je met een nieuw ontwerp of met het verbeteren van je huidige site op mobiel. Meer over onze aanpak lees je op de pagina over webdesign in de regio Eindhoven. Wil je eerst weten hoe je huidige site het op mobiel doet, vraag dan een gratis website-scan aan.
Veelgestelde vragen
Wat is het verschil tussen mobielvriendelijk en responsive?
Mobielvriendelijk beschrijft het resultaat: je site is op een telefoon goed te lezen, makkelijk te bedienen en snel. Responsive design is de techniek waarmee je dat meestal bereikt: één website die zijn opmaak aanpast aan de schermbreedte. Een site kan responsive zijn en toch slecht werken op mobiel, bijvoorbeeld door trage afbeeldingen.
Telt mobielvriendelijkheid mee voor je positie in Google?
Ja. Google gebruikt vooral de mobiele versie van je pagina’s om ze te indexeren en te rangschikken. Ontbreekt er op mobiel inhoud of is de pagina daar traag, dan werkt dat tegen je. Een goede mobiele ervaring garandeert geen hoge positie, maar een slechte kost je wel zichtbaarheid en aanvragen.
Moet ik een nieuwe website laten maken als mijn site niet mobielvriendelijk is?
Niet altijd. Draait je site op een recent WordPress-thema, dan los je veel op met aanpassingen: een korter menu, grotere knoppen, lichtere afbeeldingen en kortere formulieren. Is de site gebouwd op een verouderd thema of met een aparte mobiele versie, dan is opnieuw opbouwen vaak verstandiger dan blijven repareren.
