Een bezoeker laat weten dat het menu van je website niet opengaat op zijn telefoon. Of dat er bovenaan de pagina een vreemd blok staat. Jij opent de site op je computer en ziet niets bijzonders. Het korte antwoord: kijk eerst op dezelfde soort telefoon als die bezoeker, en loop daarna vier plekken na waar het op een klein scherm meestal misgaat.
Dit artikel is voor ondernemers die hun eigen website of webshop beheren en vooral op de computer controleren. Je hebt geen programmeerkennis nodig, wel twee telefoons en een kwartier.
Wat we deze week op de fora zagen
Op het supportforum van WordPress vroeg een site-eigenaar op 9 oktober om hulp. Een bezoeker kreeg de uitklapmenu's bovenaan de site niet open in Chrome op een iPhone. De eigenaar had het op een Android-telefoon geprobeerd, in twee browsers, en zag daar geen probleem. Vrijwilligers noemden een paar mogelijke oorzaken: submenu's die openen als je met de muis naar een menu-item wijst, caches, en instellingen die CSS en JavaScript samenvoegen of uitstellen. Een dag eerder meldde een andere eigenaar dat de contactgegevens uit de footer op een telefoon bovenaan de pagina stonden.
In beide gevallen heeft de eigenaar nog niet teruggemeld wat de oorzaak was. Bij het menu hoorde de eigenaar het van een bezoeker en zag hij zelf niets, omdat hij op een Android-telefoon testte. Wie vooral op de computer controleert, ziet zo'n fout pas als iemand anders erover begint. Op Shopify Community schreef een deelnemer dezelfde week dat je de telefoon als een eigen ontwerp moet behandelen, met minder menu-items.
Zie eerst wat je bezoeker ziet
In Chrome op de computer kun je met de ontwikkelaarstools een telefoonscherm nabootsen. Google noemt die apparaatmodus zelf een benadering op hoofdlijnen: sommige eigenschappen van een telefoon kan hij nooit nabootsen. Bij twijfel raadt Google aan de pagina op een echt mobiel apparaat te openen. De draad van deze week laat zien waarom dat ertoe doet: op een Android-telefoon werkte het menu, op een iPhone niet.
Wij testen daarom in deze volgorde, en schrijven per stap op wat we zien:
Vraag de bezoeker welk toestel en welke browser hij gebruikt, en op welke pagina het misging.
Open die pagina op je eigen telefoon, in een privévenster, zodat je niet naar een versie kijkt die je browser heeft bewaard.
Leen een telefoon van de andere soort: heb jij Android, probeer dan een iPhone, en andersom.
Tik op elk menu-item met een submenu, open en sluit het menu-icoon, en scroll de hele pagina door.
Draai de telefoon een kwartslag, want sommige fouten zie je alleen in de liggende stand.
Maak een schermafbeelding van wat er misgaat en noteer toestel, browser en pagina.
Zo wordt een vage klacht een fout die je kunt herhalen, ook voor je webbouwer.
Een menu dat opent als je ernaar wijst, werkt slecht met een vinger
Op een computer wijs je met de muis naar een menu-item en het submenu klapt uit. Op een telefoon heb je geen muis die ergens boven zweeft. De documentatie van Mozilla over de mediafunctie hover beschrijft het zo: veel mobiele apparaten kunnen niet of niet handig aanwijzen, en bootsen dat na met een onhandige lange tik. Een menu dat alleen op aanwijzen opengaat, is op een telefoon dus geen betrouwbare route.
In WordPress met een blokthema regel je dit in het Navigatieblok. Bij de weergave-instellingen kies je bij de zichtbaarheid van submenu's tussen Hover, dat opent als een bezoeker naar het item wijst, en Click, dat opent als een bezoeker erop klikt of tikt. Zet het op Click en zet ook de pijl aan, zodat zichtbaar is welk item een submenu heeft. Bij de overlay kies je of het menu op kleinere schermen in een menu-icoon wordt samengevouwen.
Werk je met Shopify of een ander platform, dan hangt het af van je thema. Vraag je thema- of webbouwer dan precies dit: opent een submenu op een aanraakscherm met een tik? En als het menu-item met een submenu zelf ook een pagina heeft, hoe komt een bezoeker op een telefoon bij die pagina, als zijn eerste tik het submenu opent?
Als de opmaak op een telefoon verspringt
Staat er op een telefoon een blok op de verkeerde plek, zoals de contactgegevens uit de footer bovenaan, dan zit de oorzaak meestal in regels die alleen voor kleine schermen gelden. Op het forum kreeg de eigenaar deze route: open de pagina in Chrome op de computer, druk op F12 en zet de apparaatwerkbalk aan, en kijk welke regels voor positie of volgorde er bij een smal scherm op het blok werken. Loop daarna de instellingen per schermformaat van je paginabouwer na, en de extra CSS in je thema.
Gebruik je een plugin die je site sneller maakt door bestanden samen te voegen of later te laden, zet die functie dan even uit en test opnieuw. Op het forum werd dat deze week bij het menuprobleem genoemd, naast het legen van de cache. Werkt het dan wel, dan weet je waar je zoekt.
Op een smal scherm vallen onderdelen onder elkaar; een onderdeel dat niet meegaat, steekt buiten de rand.
Zijwaarts schuiven is een fout, geen kwestie van smaak
Kun je op een telefoon de pagina een stukje naar links en rechts schuiven, dan steekt er iets buiten het scherm. Daar is een meetbare norm voor. De toegankelijkheidsrichtlijnen WCAG 2.2 vragen in succescriterium 1.4.10 dat inhoud zonder verlies van informatie of functie te lezen is op een breedte gelijk aan 320 CSS-pixels, zonder in twee richtingen te hoeven schuiven. Dat is dezelfde breedte als een computerscherm van 1280 CSS-pixels breed waarop je 400 procent inzoomt.
Daarmee kun je het ook op de computer nameten: zet het browservenster op 1280 pixels breed, zoom in tot 400 procent en kijk of er een horizontale schuifbalk verschijnt. De norm maakt een uitzondering voor inhoud die alleen in twee richtingen werkt, zoals een kaart, een diagram of een datatabel. Voor de rest van de pagina geldt hij wel. Zoek dus naar een onderdeel met een vaste breedte: een carrousel, een tabel, een ingesloten video of een groot beeld.
Knoppen die te klein zijn voor een vinger
Ook een menu dat opengaat, is lastig als de items dicht op elkaar staan. Succescriterium 2.5.8 van WCAG 2.2, niveau AA, vraagt dat een doel waarop je klikt of tikt minstens 24 bij 24 CSS-pixels is, met onder meer een uitzondering voor kleinere doelen die genoeg ruimte om zich heen hebben, en voor links in een lopende zin. Tik je zelf geregeld naast een link, loop dit dan na.
Een voorbeeld
Voorbeeldsituatie: een praktijk voor fysiotherapie krijgt van een patiënt te horen dat het menu-item Behandelingen op haar telefoon niets doet. De eigenaar test op zijn eigen Android-telefoon en ziet het submenu wel. Hij leent de iPhone van een collega en ziet het probleem meteen. In het Navigatieblok blijkt het submenu op aanwijzen te staan. Hij zet de zichtbaarheid van submenu's op Click en zet de pijl aan. Daarna test hij op beide telefoons opnieuw, ook in de liggende stand, en schrijft hij in zijn onderhoudslijst dat hij dit na elke thema-update herhaalt.
Controleer dit vandaag
Je hebt je homepage en je belangrijkste pagina op een iPhone en op een Android-telefoon geopend
Elk menu-item met een submenu gaat open met een tik, en de pagina achter dat item is ook bereikbaar
Het menu-icoon opent en sluit, en het menu valt niet achter andere onderdelen
Geen enkele pagina laat zich op een telefoon zijwaarts schuiven
Op 1280 pixels breed en 400 procent zoom verschijnt geen horizontale schuifbalk
Contactgegevens, knoppen en formulieren staan op een telefoon op dezelfde logische plek als op de computer
Links en knoppen zijn groot genoeg en staan niet zo dicht op elkaar dat je ernaast tikt
Je herhaalt deze test na elke update van je thema of paginabouwer
Wat je zelf doet en wat je laat doen
Testen, een instelling in het Navigatieblok omzetten en een optimalisatieplugin tijdelijk uitzetten kun je zelf. Wordt het werk aanpassen van CSS, een eigen menu in je thema of een onderdeel dat met code is gebouwd, laat het dan doen door je webbouwer, en geef je notitie met toestel, browser, pagina en schermafbeelding mee. Werkt je site op een telefoon wel, maar is hij traag, lees dan ons artikel over een webshop die traag is op mobiel. Wil je dat wij meekijken, dan kun je ons via de contactpagina bereiken.
Begin met de telefoon van een ander
Jij weet waar je moet tikken, een bezoeker niet. Geef je site vandaag aan iemand met een ander toestel en vraag drie dingen te vinden zonder hulp. Waar het vastloopt, begin jij.