Website mobielvriendelijk maken, hier gaat het mis

Inhoud10 onderdelen, 5 min

1. 01Wat er op een klein scherm als eerste sneuvelt
2. 02De duimzone
3. 03Tekst die je zonder inzoomen leest
4. 04Foto’s die op de goede plek afsnijden
5. 05Snelheid telt op mobiel dubbel
6. 06Hoe je het zelf test, zonder gereedschap
7. 07Wat ik standaard doe
8. 08Kort samengevat
9. 09Wat je nu kunt doen
10. 10Vragen bij dit stuk

In het kort

1. Je site is niet af als hij op jouw scherm goed staat. Hij is af als hij op hun scherm werkt.
2. Op een klein scherm hoort de belangrijkste actie binnen handbereik, onderin of als een knop die meereist terwijl je scrolt.
3. Kleine, lichtgrijze tekst is de meest voorkomende fout op mobiel.

Je bekijkt je eigen site op een groot scherm, in een rustige kamer, met een muis. Je klant bekijkt hem op een telefoon, met één hand, in de rij bij de kassa of op een bouwplaats in de zon.

Dat zijn twee verschillende websites. En de tweede is degene die je omzet bepaalt, want daar komt het grootste deel van je bezoekers vandaan.

Je site is niet af als hij op jouw scherm goed staat. Hij is af als hij op hun scherm werkt.

01Wat er op een klein scherm als eerste sneuvelt

Een site die op desktop klopt, valt op een telefoon vaak op dezelfde plekken uit elkaar. Dit zijn de vaste klanten:

• Tabellen. Vier kolommen naast elkaar worden een horizontale schuifbak die niemand ontdekt. De helft van je informatie staat buiten beeld.
• Knoppen die te dicht op elkaar staan. Een duim is breder dan een muispijl. Twee links onder elkaar met weinig ruimte ertussen betekent dat mensen de verkeerde raken en terugklikken.
• Alles wat alleen bij zweven verschijnt. Op een telefoon bestaat zweven niet. Een menu of uitleg die pas verschijnt als je er met de muis overheen gaat, is daar simpelweg weg.
• De grote openingsfoto. Op desktop een sfeervolle strook, op een telefoon een beeldvullend blok waar je drie keer voor moet vegen voordat je leest wat je hier eigenlijk kunt.
• Balken die blijven plakken. Een vaste bovenbalk, een cookiemelding en een chatbutton samen kunnen op een klein scherm de halve pagina bedekken.
• Formulieren. Het toetsenbord klapt open en bedekt precies de verzendknop. De bezoeker denkt dat het niet werkt en stopt.

02De duimzone

Houd je telefoon eens in één hand vast en kijk waar je duim comfortabel bij kan. Dat is ruwweg de onderste helft van het scherm, richting je duimzijde. De bovenhoek aan de overkant is de lastigste plek die er is.

Precies daar zetten veel sites hun telefoonnummer of hun menu. Op een klein scherm hoort de belangrijkste actie binnen handbereik: onderin, of als een knop die meereist terwijl je scrolt.

03Tekst die je zonder inzoomen leest

Kleine, lichtgrijze tekst is de meest voorkomende fout op mobiel. Op een groot scherm oogt het rustig, op een telefoon in daglicht is het niet te lezen.

Er zit trouwens een technisch addertje onder het gras bij formulieren: is de tekst in een invulveld te klein, dan zoomt een iPhone automatisch in zodra je erop tikt. De bezoeker zit ineens scheef op je pagina en moet terugzoomen. Dat lijkt een detail, maar het is precies het moment waarop je een aanvraag verliest.

Verder geldt: kortere alinea’s, meer witruimte en tussenkoppen waar iemand op kan scannen. Op een klein scherm leest niemand een blok van tien regels.

04Foto’s die op de goede plek afsnijden

Een liggende foto van je team ziet er op desktop mooi uit. Op een telefoon wordt diezelfde foto smal bijgesneden, en staat er ineens niemand meer in beeld behalve een stuk muur.

Dat los je niet op met een ander formaat alleen. Je moet bij het uitzoeken al bedenken hoe een foto rechtop wordt afgesneden, en de belangrijkste dingen uit de randen houden. Meer daarover staat in wat goede foto’s doen voor je website.

05Snelheid telt op mobiel dubbel

Een grote startfoto op wifi is niets. Diezelfde foto op een matige verbinding buiten de stad is drie seconden wachten, en dat is precies de grens waarop mensen wegklikken.

Mobiel is ook waar het verschil tussen een nette site en een zware site het hardst aankomt: minder geheugen, kleinere batterij, wisselende verbinding. Wat er in de praktijk misgaat en wat het kost, staat in vijf redenen dat je site traag laadt.

“

Een site die op een oude telefoon met halve dekking nog prettig werkt, werkt overal.

06Hoe je het zelf test, zonder gereedschap

Je hebt geen dure software nodig om de meeste problemen te vinden. Dit kost je tien minuten:

Wat je daar tegenkomt, is bijna altijd concreter dan wat een testrapport je vertelt.

07Wat ik standaard doe

Bij elke site die ik bouw begin ik bij het kleine scherm en werk ik omhoog. Dat klinkt omgekeerd, maar het dwingt tot keuzes: wat moet er echt op, en wat is versiering. Wat op een telefoon overtuigt, overtuigt op een groot scherm ook.

Daarna zie je in je eigen dashboard hoeveel van je bezoekers op een telefoon zitten en waar ze klikken zonder dat er iets gebeurt. Dat laatste is meestal het snelste spoor naar wat er op mobiel niet klopt.

08Kort samengevat

Ontwerp voor de duim, niet voor de muis. Zet de belangrijkste actie binnen handbereik, houd tekst groot genoeg om buiten te lezen, kies foto’s die rechtop overeind blijven en let op alles wat het toetsenbord bedekt. Test het op je eigen telefoon, buiten, met één hand.

Wil je weten wat er op jouw site op een klein scherm misgaat? Plan een kennismaking, dan lopen we samen je site door op de telefoon van je klant.

09Wat je nu kunt doen

• Doe alles met één hand. Kun je bellen, het formulier invullen en versturen zonder je telefoon om te pakken?
• Ga naar buiten. Lees je alles in de zon, of moet je je hand erboven houden?
• Vul je eigen formulier in en verstuur het echt. Kijk of het bericht aankomt.
• Bedenk bij het uitzoeken van foto's al hoe ze rechtop worden afgesneden, en houd de belangrijkste dingen uit de randen.

10Vragen bij dit stuk

Hoe test je of je website mobielvriendelijk is?

Je hebt geen dure software nodig om de meeste problemen te vinden. Test het op je eigen telefoon, buiten, met één hand. Wat je daar tegenkomt, is bijna altijd concreter dan wat een testrapport je vertelt.

Wat gaat er op een telefoon vaak mis met een website?

Een site die op desktop klopt, valt op een telefoon vaak op dezelfde plekken uit elkaar. Het gaat om tabellen, knoppen die te dicht op elkaar staan, alles wat alleen bij zweven verschijnt, de grote openingsfoto, balken die blijven plakken en formulieren.

Waarom zoomt een iPhone in als je op een invulveld tikt?

Is de tekst in een invulveld te klein, dan zoomt een iPhone automatisch in zodra je erop tikt. De bezoeker zit ineens scheef op je pagina en moet terugzoomen. Dat lijkt een detail, maar het is precies het moment waarop je een aanvraag verliest.