Gids 05 · 6 minuten
Werkt mijn website wel goed op een telefoon?
Het korte antwoord
Kijk niet in het kleine venstertje van je browser op je laptop, maar op je eigen toestel, buiten, met wifi uit. Let op vier dingen: laadt hij snel op 4G, kun je alles met één duim raken, valt er nergens iets van de rand, en is je telefoonnummer aantikbaar. Meer is het niet, en bijna niemand doet het.
Voor de meeste bedrijven in deze regio komt inmiddels ruim de helft van het bezoek van een telefoon. Bij spoeddiensten en horeca ligt dat nog een stuk hoger, want daar wordt gezocht op het moment zelf, staand, buiten, met één hand.
Toch wordt vrijwel elke website beoordeeld op een groot scherm, in een stoel, op wifi. Dat is de enige situatie waarin geen van je bezoekers zich bevindt.
Wat er op een telefoon anders is
01
Eén duim, en die haalt niet overal
Op een groot toestel is de bovenrand met één hand niet te bereiken. Zet je belangrijkste actie daarom niet alleen bovenaan in het menu maar ook binnen bereik: onderaan het scherm, of herhaald in de tekst.
02
Alles moet groot genoeg zijn om te raken
WCAG 2.2 stelt 24 bij 24 pixels als ondergrens, met genoeg ruimte eromheen. In de praktijk werkt 44 tot 48 pixels pas echt prettig. Links die dicht op elkaar staan in een rijtje zijn de klassieke misser.
03
Tekst kleiner dan 16 pixels is een probleem
Niet alleen omdat het slecht leest. Op een iPhone zoomt het scherm automatisch in zodra je in een invoerveld tikt met een lettergrootte onder de 16 — en dan staat je formulier scheef.
04
Buiten is het licht
Grijze tekst op een witte achtergrond die binnen prima leest, is in de zon onleesbaar. Dat is precies waarom de contrasteisen bestaan die je ook voor toegankelijkheid nodig hebt.
05
4G is geen wifi
Onderweg, in een parkeergarage of op een bouwplaats zakt de verbinding weg. Dat is het moment waarop het gewicht van je pagina zichtbaar wordt.
De vijf dingen die ik het vaakst tegenkom
Een telefoonnummer als platte tekst
Een aantikbaar nummer dat direct belt
Iemand die staand op straat je nummer vindt, gaat het niet overtypen. Dit is één regel code en het is de goedkoopste aanvraag die er bestaat.
Een menu dat het halve scherm vult
Vijf items, en de belangrijkste actie zichtbaar
Een uitklapmenu met veertien items en drie niveaus is op een telefoon niet te overzien. Wat er niet in past, hoort er niet in.
Een tabel die buiten het scherm valt
Een tabel die zelf schuift, of kaarten onder elkaar
Een pagina die horizontaal meeschuift voelt kapot. Als de inhoud breed moet zijn, laat dan die inhoud schuiven en niet de hele pagina.
Een pop-up over het hele scherm
Een regel in de pagina zelf
Een pop-up waarvan het kruisje net buiten beeld valt, is op mobiel een doodlopende weg. Google rekent het je bovendien aan.
Een formulier met het verkeerde toetsenbord
E-mailveld met @, telefoonveld met cijfers
Drie handelingen minder per veld. Op een formulier van vier velden is dat het verschil tussen wel en niet afmaken.
De test die vijf minuten kost
Doe dit met je eigen toestel, niet met het venstertje in je browser.
- 01
Zet wifi uit
Open je eigen site op 4G en tel hardop tot de tekst er staat. Boven de drie tellen heb je een probleem dat je nu ziet en je bezoekers al maanden zien.
- 02
Gebruik alleen je duim
Leg je andere hand op tafel. Probeer het menu te openen, een dienst te vinden en het formulier in te vullen. Alles wat je twee handen kost, kost je aanvragen.
- 03
Schuif zijwaarts
Veeg op elke pagina naar links. Beweegt de pagina mee, dan valt er iets van de rand. Dat is bijna altijd één te brede foto of een tabel.
- 04
Ga naar buiten
Serieus. Neem je telefoon mee de zon in en kijk of je je eigen teksten nog leest. Dit is de test waar het meeste grijs op grijs sneuvelt.
- 05
Zet je lettergrootte groter
In de instellingen van je telefoon. Zo kijkt een deel van je klanten er altijd naar. Valt de opmaak dan uit elkaar, dan is de opmaak te strak vastgezet.
Zelf doen
Wat je vandaag zelf kunt afwerken
Vink af wat je hebt gedaan. Er wordt niets bewaard — bij een volgend bezoek staat de lijst weer leeg. Dat is een keuze: iets opslaan in je browser om een vinkje te onthouden staat slecht op een site die uitlegt waarom je zo weinig mogelijk van je bezoekers wilt weten.
0 / 6
Of je laat het doen
Website laten maken in Capelle aan den IJssel
Elke site die ik oplever meet ik na op tien schermbreedtes voordat hij live gaat. Nergens een schuifbalk, nergens tekst die van de rand valt.
vanaf € 1.800 · doorlooptijd 2 tot 5 weken · vaste prijs vooraf
Vragen
Wat mensen hier nog over vragen
Staat je vraag er niet bij? Mail me, dan schrijf ik hem erbij. Binnen één werkdag antwoord. Meestal dezelfde dag.
Op je eigen toestel, met wifi uit, buiten. Het venstertje in je browser op de laptop laat zien of de opmaak meebuigt, maar niet of de site snel genoeg is op 4G, of je alles met één duim raakt en of je teksten in de zon leesbaar zijn. Die drie dingen zijn waar het in de praktijk op stukloopt.
Minimaal 24 bij 24 pixels — dat is de ondergrens uit WCAG 2.2 — met voldoende ruimte eromheen. Prettig wordt het pas rond de 44 tot 48 pixels. Let vooral op links die dicht op elkaar staan: dat is de plek waar iedereen misklikt.
Nee, en dat is al jaren zo. Eén ontwerp dat meebuigt van 320 tot 2560 pixels breed is beter voor je bezoeker, goedkoper in onderhoud en beter voor je vindbaarheid. Een aparte mobiele versie betekent twee sites bijhouden, en in de praktijk raakt er altijd één achter.
Er staat iets op dat breder is dan het scherm. Meestal een foto met een vaste breedte, een tabel, of een blok met een vaste maat in pixels. Veeg op elke pagina naar links om te vinden waar het zit — het is bijna altijd één element.
Waar dit op gebaseerd is
Volgende stap
Zullen we eens kijken waar bij jou de uren weglekken?
Een gesprek van drie kwartier, bij jou op locatie. Je krijgt sowieso een lijstje mee met wat ik zou aanpakken — of je nu met mij verder gaat of niet.
Binnen één werkdag antwoord. Meestal dezelfde dag. · Je spreekt Kaz, niet een callcenter.