Wat is een responsive website en hoe controleer je die?

01 / VAN VRAAG NAAR PRAKTIJK

Meebewegen is meer dan kleiner maken.

Op een breed scherm kunnen tekst en beeld naast elkaar staan. Op een telefoon werkt dezelfde informatie vaak beter onder elkaar. Een responsive ontwerp verandert de indeling terwijl de inhoud en de belangrijkste mogelijkheden beschikbaar blijven. Het is dus niet simpelweg een verkleinde desktopwebsite.

MDN beschrijft responsive webdesign als een aanpak voor verschillende schermformaten. Flexibele indelingen, passende afbeeldingen en regels voor verschillende breedtes helpen daarbij. Als ondernemer hoef je die code niet te beoordelen: je kunt wel toetsen of je klanten hun taken prettig kunnen uitvoeren.

Een schermbreedte zegt niet alles over de gebruiker. Iemand kan inzoomen, een groot lettertype gebruiken of een venster half naast een ander programma zetten. Controleer daarom ook de tussenliggende formaten. Een ontwerp dat alleen op twee voorbeeldschermen goed oogt kan daartussen alsnog onhandig worden.

Bij webdesign en redesign kijken we naar de indeling en de volgorde van de informatie. Voor een complete nieuwe website spreken we ook af welke functies op elk scherm moeten werken. Maak mobiel gebruik onderdeel van de briefing, in plaats van een losse controle vlak voor publicatie.

02 / VAN VRAAG NAAR PRAKTIJK

Test een klanttaak, niet alleen een screenshot.

Gebruik als voorbeeld een fictief installatiebedrijf. De klant wil weten of het bedrijf zijn probleem kan oplossen, welk werkgebied geldt en hoe hij een aanvraag doet. Laat iemand die drie vragen beantwoorden op een telefoon. Noteer waar die persoon moet zoeken, onverwacht teruggaat of niet begrijpt wat een knop doet.

Begin bij het menu. Kun je het openen en weer sluiten? Blijft de gekozen pagina bereikbaar? Is zichtbaar waar je bent? Een menu mag minder ruimte innemen op mobiel, maar belangrijke diensten moeten niet verdwijnen zonder andere vindbare route. Test ook een langere menunaam en een pagina met meerdere niveaus.

Lees vervolgens een hele alinea zonder steeds horizontaal te schuiven. Bekijk lange koppen, opsommingen en prijskaarten. Controleer of bedragen bij het juiste pakket blijven staan en of tekst over bijkomende kosten ook op mobiel zichtbaar is. Een ontwerp wordt pas echt getest met de uiteindelijke inhoud, niet met korte voorbeeldzinnen.

Bekijk afbeeldingen in hun context. Is het belangrijke deel nog zichtbaar als de uitsnede verandert? Een productdetail of tekst in een schema kan op desktop duidelijk zijn en op een telefoon nauwelijks leesbaar. Gebruik waar nodig een aangepaste uitsnede of een andere presentatie van dezelfde uitleg. Lees ook hoe je websitebeelden voorbereidt.

Voltooi de contactroute. Raak velden en knoppen aan, open het schermtoetsenbord en probeer een fout te herstellen. Blijven labels en meldingen begrijpelijk? Schuift een vaste knop over de verzendknop heen? Controleer de bevestiging en ontvang de testaanvraag ook echt op het afgesproken adres. Een mooi formulier dat geen bericht aflevert slaagt niet voor deze taak.

03 / VAN VRAAG NAAR PRAKTIJK

Van bevinding naar concrete verbetering.

Test bijvoorbeeld een smalle telefoon, een breder mobiel venster, een tablet en een desktop. Deze steekproef is geen volledige garantie voor alle apparaten. Gebruik naast de browserweergave minstens een echte telefoon, omdat aanraken, toetsenbord en browserbalken anders kunnen aanvoelen dan een simulatie.

Herhaal de belangrijkste taken bij inzoomen en met toetsenbordbediening op desktop. Kun je zien welk onderdeel geselecteerd is? Kom je langs menu, links en formulier? Responsive ontwerp en toegankelijkheid overlappen in gebruik, maar zijn niet hetzelfde. Een goed passende indeling bewijst niet dat de volledige site toegankelijk is.

Schrijf een probleem zo op dat iemand het kan reproduceren: paginanaam, apparaat, browser, handeling, verwachte uitkomst en wat er werkelijk gebeurde. Bijvoorbeeld: “Op de contactpagina bedekt de vaste knop het onderste veld zodra het toetsenbord opent.” Voeg een screenshot toe als de melding daarmee duidelijker wordt.

Geef voorrang aan blokkades: niet kunnen bestellen, een onbereikbare contactknop of onleesbare informatie. Een kleine afwijking in witruimte kan daarna. Laat de aangepaste route opnieuw testen en noteer de uitkomst. Zo wordt een lijst met losse opmerkingen een beheersbaar verbetertraject.

Bij een bestaande site zijn soms enkele gerichte websiteaanpassingen voldoende. Als de indeling structureel niet past bij inhoud en klanttaken, kan een redesign logischer zijn. Lees wanneer vernieuwen of aanpassen zinvol is. Beoordeel die keuze op de problemen die je hebt gevonden, niet alleen op de leeftijd van de site.