Mijn website is responsief; is hij dan niet al mobielvriendelijk?

Niet per se. Een responsieve lay-out past zich aan de beschikbare ruimte aan, maar kan nog steeds piepkleine knoppen, onleesbare tekst, onhandige formulieren, ontoegankelijke menu’s of overlays bevatten die tegen de bezoeker vechten. Responsieve lay-out is één deel van mobiele bruikbaarheid – aanraakergonomie, zoom, toetsenbordtoegang, herschikking en leesbare inhoud zijn de rest.

Hoe groot moeten tikdoelen zijn?

Groot genoeg om betrouwbaar te raken en met genoeg tussenruimte tegen per ongeluk tikken. WCAG 2.2 AA hanteert 24x24 CSS-pixels als basis – als grootte of als voldoende tussenruimte, met gedefinieerde uitzonderingen voor links in lopende tekst en gelijkwaardige gevallen – terwijl het strengere AAA-doel 44x44 is. Grotere doelen zijn meestal de veiligere praktische keuze, en te dicht op elkaar staande linkclusters horen bij de makkelijkst op te lossen mobiele problemen.

Waarom doen invoertypen ertoe op mobiel?

Het juiste type geeft het veld de juiste betekenis en helpt het toestel meestal een handig schermtoetsenbord te tonen; inputmode is de expliciete toetsenbordhint als u die nodig hebt. Kies wel zorgvuldig – typen beïnvloeden ook validatie en desktopbediening, en type="number" hoort alleen bij echte hoeveelheden, nooit bij telefoonnummers, postcodes of andere cijfercodes die met een nul kunnen beginnen. Test de belangrijke formulieren; toetsenborden verschillen per toestel.

Is uw website echt bruikbaar op telefoons en touchscreens?

Uw website kan volledig responsief zijn, elke cross-browser-controle doorstaan en tóch een karwei zijn op een telefoon. Responsief ontwerp helpt de lay-out zich aan de ruimte aan te passen; cross-browser-testen vinden de verschillen die weergave of werking zouden breken. Geen van beide garandeert dat de website prettig te bedienen is met een duim, met één hand, onderweg – dat is aanraakergonomie, en dat is een vak apart.

Ontwerp voor de duim – zonder de rest buiten te sluiten

Aanraking is de belangrijkste invoer op de meeste telefoons – maar niet de enige: ook toetsenborden, schermlezers, spraakbesturing, styluspennen en schakelbediening sturen telefoons aan. Bouw dus voor vingers en houd de rest werkend.

Maak tikdoelen groot genoeg om betrouwbaar te raken, met ruimte ertussen. De AA-basis van WCAG 2.2 is 24×24 CSS-pixels (als grootte of voldoende tussenruimte, met gedefinieerde uitzonderingen); 44×44 is het strengere AAA-doel en een goede standaard voor belangrijke bedieningselementen.
Gebruik een leesbare standaardtekstgrootte – en schakel zoomen nooit uit: sommige bezoekers hebben sterke vergroting nodig, wat uw standaard ook is, en vergrote tekst mag niet overlappen of verdwijnen.
Zorg dat menu’s en formulieren met een duim werken, ook de bediening bovenaan een hoog scherm.
Laat belangrijke inhoud of acties niet afhangen van hover – veel aanraakgebruikers kunnen niet hoveren, browsers vertalen tikken inconsistent naar hover, en hybride toestellen vervagen de grens. Menu’s en tooltips moeten openen op tik of klik en ook met toetsenbordfocus werken.

Laat de lay-out zich herschikken, niet zijwaarts scrollen

Op een smal scherm moet de inhoud zich herschikken tot een eenvoudige lay-out – vaak één kolom – die recht naar beneden leest. Gewone lees- en formulierinhoud mag geen horizontaal scrollen op paginaniveau afdwingen: een afbeelding met vaste breedte of een op desktop vastgepind element duwt de hele pagina opzij en voelt kapot aan. Echt tweedimensionale inhoud – een brede datatabel, een kaart, een diagram – hoort in een eigen, duidelijk scrollbare container. Voorkom overflow op paginaniveau, beperk zijwaarts scrollen tot de elementen die het nodig hebben, en test de herschikking op smalle breedtes en hoge zoomniveaus.

Roep het juiste toetsenbord op en tem de overlays

Kies invoertypen die bij de gegevens passen – ze geven velden de juiste betekenis en roepen meestal een handig schermtoetsenbord op; voeg inputmode toe waar een expliciete hint helpt:

<input type="email"  name="email"  autocomplete="email">
<input type="tel"    name="phone"  autocomplete="tel">
<input type="number" name="quantity" inputmode="numeric">

Reserveer type="number" voor echte hoeveelheden – cijfercodes (postcodes, rekeningnummers) krijgen een tekst- of tel-type met een inputmode, anders sneuvelen voorloopnullen en opmaak. En test de formulieren op een toestel: het exacte toetsenbord kiest de browser, niet u.

Wees op uw hoede voor opdringerige pop-ups op volledig scherm die de inhoud al bij aankomst bedekken – ze verstoppen de pagina, frustreren bezoekers en jagen mensen weg. Is een dialoogvenster echt nodig (toestemming, inloggen), laat het zich dan gedragen: een duidelijk label, toetsenbordfocus die naar binnen gaat en binnen blijft zolang het open is, een duidelijke sluitknop met een behoorlijke doelgrootte, en focus die terugkeert zodra het sluit.

Test op echte toestellen, in beide richtingen

Een emulator laat niet voelen hoe een duim over glas gaat. Test de kerntaken op minstens één echte telefoon, in staande en liggende stand (en vergrendel de oriëntatie niet, tenzij het echt moet) – en verbreed daarna de dekking met meer toestellen of emulators voor andere schermformaten en browsermotoren, plus zoom, instellingen voor grotere tekst, toetsenbordbediening en wat er gebeurt wanneer het schermtoetsenbord over uw formulier heen openklapt.

Wat u moet doen

Vergroot en spreid tikdoelen – 24×24 CSS-pixels als WCAG AA-ondergrens, 44×44 als betere standaard voor belangrijke bediening.
Houd de pagina vrij van zijwaarts scrollen; herschik de inhoud eenvoudig en zet echt brede elementen in hun eigen scrollbare vakken.
Kies invoertypen eerlijk (hoeveelheden versus cijfercodes), voeg inputmode-hints toe en test de formulieren op een toestel.
Schrap interacties die alleen op hover werken en overbodige overlays; maak noodzakelijke dialoogvensters toegankelijk en makkelijk te sluiten.
Houd de standaardtekst leesbaar en het zoomen volledig beschikbaar.
Test echte toestellen in beide richtingen, plus zoom, toetsenbord en uiteenlopende schermen – responsief krijgt de lay-out op het scherm; aanraakergonomie maakt dat mensen blij zijn dat ze uw website op hun telefoon bezochten.