Mobiel Eerst, Echt Waar

Elk bureau zegt dat zijn sites responsive zijn. Wat dat meestal betekent is dat de indeling niet breekt als het browservenster smal is, getest door de hoek van een desktopbrowser te verslepen.

Dat is niet hetzelfde als goed werken op een telefoon, en in dat gat verdwijnen heel wat aanvragen.

Waarom het zwaarder telt dan het percentage suggereert

Ruwweg de helft van het verkeer naar de meeste zakelijke websites is mobiel, en bij lokale zoekopdrachten aanzienlijk meer. Maar het kale aandeel onderschat het, want mobiele bezoekers zijn systematisch anders: vaker nieuw, vaker binnengekomen via een zoekopdracht, en vaker bezig nú te beslissen.

Desktopbezoekers zijn geregeld mensen die je al kennen en iets nakijken. Mobiele bezoekers zijn vaak degenen die je probeert te winnen.

Wat "responsive" mist

Het netwerk. Een desktopbrowser op kantoorwifi haalt een pagina van 3 MB direct binnen. Dezelfde pagina op 4G op een parkeerplaats doet zes seconden. Er veranderde niets aan de indeling; de ervaring is compleet anders. Test met throttling, of op echt mobiel internet.

Het apparaat. Ontwerpen en ontwikkelen gebeurt op snelle laptops. Je bezoekers zitten op drie jaar oude middenklasse Android-telefoons, waar JavaScript een veelvoud aan tijd kost. Een pagina die direct aanvoelt voor wie hem bouwde, kan voor een echte gebruiker zichtbaar stroperig zijn.

Duimen. Een muisaanwijzer is een pixel. Een duim is ongeveer een centimeter, onnauwkeurig, en vaak verbonden aan de hand die de telefoon vasthoudt. Aanraakdoelen horen minstens 44 bij 44 pixels te zijn met ruimte eromheen, en de belangrijke horen binnen duimbereik — de onderste twee derde van het scherm, niet de bovenhoek.

Context. Iemand die in fel zonlicht op straat staat met één hand vrij, leest jouw bedrijfsgeschiedenis van drie alinea's niet. Grijze tekst met weinig contrast die elegant oogde op een gekalibreerd scherm is buiten onzichtbaar.

Wat het vaakst misgaat

Formulieren. De grootste mobiele conversiemoordenaar. Ontbrekende invoertypen, zodat het toetsenbord letters toont terwijl iemand cijfers nodig heeft. Velden te dicht op elkaar. Labels die verdwijnen zodra je typt. Keuzelijsten met veertig opties. Autocomplete uit, zodat mensen hun eigen adres intypen.

Het juiste invoertype instellen is één attribuut per veld, kost tien minuten over een hele site, en verbetert het afronden meetbaar.

Telefoonnummers die geen link zijn. Op een telefoon hoort het nummer aantikbaar te zijn en te bellen. Dat is een regel code en het ontbreekt op een verbazend aantal sites.

Alles wat van hover afhangt. Op een aanraakscherm bestaat hover niet. Opent een menu alleen bij hover, of verschijnt informatie alleen bij hover, dan bestaat het niet voor de helft van je bezoekers.

Vaste elementen die het scherm opeten. Een plakkende kop, een cookiebanner en een chatbubbel nemen samen een derde van een klein scherm. Op een telefoon in liggende stand kan het het merendeel zijn.

Horizontaal scrollen. Bijna altijd één element met een vaste breedte die groter is dan het scherm — een tabel, een codeblok, een afbeelding. Het laat de hele pagina kapot aanvoelen.

Piepkleine tekst. Lopende tekst onder 16 pixels lokt zoomen uit, en zoomen breekt je indeling op manieren die je nooit hebt getest.

Hoe je echt test

De enige methode die werkt is weinig spectaculair: gebruik je eigen site op je eigen telefoon, op mobiel internet, buiten.

Niet de apparaatemulator van de browser, die de maat goed heeft en de snelheid, de aanraking en het zonlicht fout. Niet op kantoorwifi.

Doe de hele reis. Vind de pagina via een zoekopdracht. Lees het eerste scherm. Zoek de prijs. Vul het contactformulier in. Probeer te bellen. Doe het met één hand, staand.

Vrijwel iedereen die dit fatsoenlijk doet vindt minstens drie dingen, en meestal is er één gênant.

Twee hulpmiddelen die de moeite waard zijn: Chrome DevTools met CPU- en netwerkthrottling voor een herhaalbare benadering, en het Core Web Vitals-rapport in Search Console, dat laat zien wat je echte mobiele gebruikers ervaren in plaats van wat je laptop denkt.

Ervoor ontwerpen in plaats van eraan aanpassen

De uitdrukking "mobile first" betekende oorspronkelijk: het kleine scherm eerst ontwerpen en uitbreiden, in plaats van breed ontwerpen en samenpersen. Die volgorde telt omdat hij de nuttige vraag vroeg afdwingt: wat is het ene ding dat deze pagina moet doen?

Een brede indeling verbergt die vraag, want er is ruimte voor alles. Een smalle niet. De secties die je op mobiel schrapt, zijn meestal de secties die op desktop hun plek ook niet verdienden.

Dat is het onderschatte voordeel van mobiel serieus nemen: het verbetert de desktopsite, omdat het je dwingt te bepalen wat ertoe doet.

Een korte checklist

• Tekst van 16 pixels of groter, met minstens 4,5 op 1 contrast.
• Aanraakdoelen van minstens 44 bij 44 pixels, met ruimte ertussen.
• Juiste invoertypen en autocomplete op elk formulierveld.
• Telefoonnummers en e-mailadressen als link.
• Niets dat alleen bij hover werkt.
• Geen horizontaal scrollen bij 320 pixels breed.
• Afbeeldingen geschaald op het scherm waar ze belanden, in een modern formaat.
• De hoofdactie bereikbaar met een duim.
• Getest op een echte telefoon, op mobiel internet, door iemand die hem niet heeft gebouwd.

Niets daarvan is duur. Het is allemaal onzichtbaar als het klopt en overduidelijk als het niet klopt — en wie het merkt, is precies degene die net klant ging worden.