Pak je telefoon. Open je eigen website. Wat zie je?
Als je moet inzoomen om de tekst te lezen, als knoppen te klein zijn om op te tikken, als het menu verborgen zit achter drie klikken, of als de pagina zo lang laadt dat je ongeduldig wordt: dan verlies je klanten. Dagelijks.
Meer dan 60% van het webverkeer in Nederland komt van smartphones. Bij lokale dienstverleners, horeca, detailhandel en consumentgerichte bedrijven ligt dat vaak boven de 70 of 75%. Als jouw website op mobiel niet goed werkt, heeft de meerderheid van je bezoekers een slechte eerste indruk van je bedrijf, nog voordat ze ook maar een zin tekst hebben gelezen.
Dit artikel legt uit waarom mobiel-vriendelijkheid geen nice-to-have is, maar de basis van elke serieuze website.
Google straft slechte mobiele ervaringen
In 2019 stapte Google over op mobile-first indexing. Wat dat betekent: Google beoordeelt je website primair op basis van de mobiele versie. De desktop versie telt nauwelijks meer mee voor je zoekrangschikking.
Dat is een fundamentele verschuiving. Vroeger bouwde je een mooie desktopsite en maakte je er daarna een responsive versie van. Nu is de mobiele versie de echte versie, en de desktop is de uitbreiding.
Praktisch betekent dit: als jouw mobiele website langzaam laadt, tekst bevat die te klein is om te lezen, of knoppen heeft die te dicht op elkaar staan, dan rankt Google je lager. Je vindbaarheid daalt. Minder mensen vinden je. Minder mensen worden klant.
Slechte mobiele ervaring treft je dus op drie fronten: minder bezoekers via Google, bezoekers die direct wegklikken, en een slechte eerste indruk bij wie toch blijft.
Wat maakt een website mobiel-vriendelijk?
Het gaat om meer dan "hij past op een klein scherm". Mobiel-vriendelijkheid is een combinatie van technische kwaliteit, ontwerp en gebruikersgemak.
Laadsnelheid
Op mobiel is snelheid nog kritischer dan op desktop. Mensen op hun telefoon zijn vaak onderweg, met een 4G of soms trager verbinding. Een site die op desktop 2 seconden laadt, kan op mobiel 5 of 6 seconden duren als hij niet geoptimaliseerd is.
Na 3 seconden laadtijd verlies je meer dan de helft van je bezoekers. Op mobiel is de tolerantie zelfs lager. Grote afbeeldingen die niet gecomprimeerd zijn, externe scripts die alles ophouden, zware animaties die de processor van een telefoon te hard belasten, het zijn allemaal killers voor mobiele laadtijd.
Leesbaar zonder inzoomen
De standaard tekstgrootte voor mobiel is minimaal 16 pixels. Kleiner dan dat en mensen gaan inzoomen, of ze stoppen gewoon met lezen. Zorg ook voor voldoende witruimte: tekst die op desktop luchtig aanvoelt, kan op mobiel verstikkend aanvoelen als de marges niet mee schalen.
Regelbreedte speelt ook mee. Een lange zin die op desktop over een brede kolom loopt, is op mobiel soms twee of drie regels lang. Korte, directe zinnen werken beter op mobiel.
Aantikbare knoppen en links
Google hanteert een minimum van 44x44 pixels voor aantikbare elementen. Dat is ongeveer de grootte van een vingertop. Knoppen die kleiner zijn, of links die vlak naast elkaar staan, leiden tot missers en frustratie.
Dat geldt ook voor formulieren. Invoervelden die te smal zijn, labels die boven het veld verdwijnen als je begint met typen, een "Verzenden" knop die je niet kunt bereiken zonder scrollen: dit alles zorgt voor afhakers. En afhakers zijn leads die je kwijt bent.
Navigatie die werkt op een touchscreen
Dropdownmenu's die alleen werken als je eroverheen zweeft (hover) zijn op mobiel nutteloos. Er is geen hover op een touchscreen. Een mobiel menu moet werken met tikken, duidelijk zijn, en snel toegang geven tot de belangrijkste pagina's.
Een hamburger-icoontje (drie horizontale strepen) is de standaard voor mobiele navigatie. Zorg dat het duidelijk zichtbaar is, en dat het menu dat opent ook echt bruikbaar is.
Formulieren die simpel zijn
Elk extra veld in een formulier kost conversie. Op desktop vult iemand misschien nog 8 velden in. Op mobiel haken ze af na 4. Vraag alleen wat je echt nodig hebt. Naam, telefoonnummer of e-mail, en een kort berichtje. Meer hoeft niet, zeker niet als eerste contact.
Gebruik ook de juiste toetsenbordtypen. Als je een telefoonnummer vraagt, moet de telefoon automatisch het numerieke toetsenbord tonen. Dat doe je met een simpel attribuut in de HTML, maar het wordt regelmatig vergeten.
Hoe test je of je website mobiel-vriendelijk is?
Drie manieren:
1. Test het zelf Open je website op je eigen telefoon en doorloop de belangrijkste paden. Kun je de homepage lezen? Kun je naar de contactpagina navigeren? Kun je het contactformulier invullen? Lukt dat zonder frustratie?
2. Google Mobile-Friendly Test Ga naar search.google.com/test/mobile-friendly en voer je URL in. Je krijgt binnen seconden een oordeel van Google, met eventuele knelpunten.
3. PageSpeed Insights Op pagespeed.web.dev zie je je mobiele laadsnelheid en score, inclusief een lijst van verbeterpunten.
Als je scoort onder de 50 op PageSpeed mobiel, of als de Mobile-Friendly Test problemen meldt, is er werk aan de winkel.
Responsive design versus mobiele app: wat is het verschil?
Een veelgehoorde vraag is of je een aparte mobiele app nodig hebt naast je website. Voor de meeste MKB-bedrijven is het antwoord: nee. Een goed gebouwde responsive website is voldoende.
Responsive design betekent dat dezelfde website zich aanpast aan het scherm waarop hij bekeken wordt. Op desktop ziet hij er zo uit, op tablet zo, op mobiel zo. Een codebase, automatisch de juiste opmaak.
Een aparte app is een veel grotere investering (10.000 tot 50.000 euro en meer voor een serieuze app), vereist regelmatige updates, en heeft een hogere drempel voor gebruikers (ze moeten hem downloaden). Dat is zinvol voor bedrijven met een dagelijks terugkerende gebruikscase, zoals een bezorgdienst of een bank. Niet voor een dienstverlener die potentiele klanten wil binnenhalen.
De praktische impact op je omzet
Laten we het concreet maken. Stel je hebt 400 bezoekers per maand. 65% komt via mobiel, dat is 260 bezoekers. Als je mobiele website niet goed werkt en 60% van die bezoekers direct wegklikt, verlies je 156 potentiele klanten per maand zonder dat ze ook maar de kans hebben gehad om te lezen wat je doet.
Met een conversieverbetering van 0,5% naar 2% op die 260 mobiele bezoekers:
- ▸Voor: 1,3 leads per maand van mobiel
- ▸Na: 5,2 leads per maand van mobiel
- ▸Verschil: 3,9 extra leads per maand
Als 30% van die leads klant wordt en elke klant gemiddeld 3.000 euro waard is, is dat ruim 3.500 euro extra omzet per maand. Van dezelfde hoeveelheid bezoekers.
Wanneer is je website oud genoeg om dit probleem te hebben?
Websites gebouwd voor 2018 zijn bijna altijd niet mobiel-first. Ze zijn responsive gemaakt als nagedachte, maar niet fundamenteel ontworpen vanuit mobiel gebruik. Dat verschil merk je.
Maar ook nieuwere sites kunnen dit probleem hebben. Als je website gebouwd is door iemand die de mobile-first aanpak niet hanteert, of als het een goedkoop template is dat er op desktop mooi uitziet maar op mobiel niet geoptimaliseerd is, heb je hetzelfde probleem.
De volgende stap
Als je twijfelt over de mobiele kwaliteit van je website, test het dan vandaag nog. Gebruik de tools die hierboven staan, of stuur me de URL en ik kijk er kosteloos naar.
Bij Arka bouwen we websites mobiel-eerst. Dat betekent: het ontwerp begint op het kleinste scherm, en schaalt daarna op. Het resultaat is een website die werkt voor de meerderheid van je bezoekers, niet alleen de desktop-gebruikers.
Neem contact op via info@arkadigital.nl of ga naar arkadigital.nl voor meer informatie.