Responsive webdesign uitgelegd: wat een website voor dienstverleners eerst op een telefoon moet laten zien

Responsive webdesign betekent dat een website zijn opmaak aanpast aan het scherm waarop hij wordt getoond, zodat dezelfde pagina werkt op een telefoon, een tablet en een laptop. Voor een coach of consultant draait het om een simpele vraag: als een bezoeker je site op een telefoon opent, ziet die dan wat je doet en kan die contact opnemen zonder te knijpen, in te zoomen of te zoeken? Drie checks geven het antwoord: de boekingsknop, het eerste scherm en het formulier.

Wat responsive webdesign betekent in gewone woorden

Zie een pagina als een set blokken. Op een breed laptopscherm staan de blokken naast elkaar. Op een smal telefoonscherm staan ze onder elkaar in één kolom, met tekst en knoppen die groot genoeg zijn voor een duim. Een responsive site doet dit vanzelf, vanuit één versie van de pagina.

Het oude alternatief was een aparte kleine site voor telefoons, of een desktoppagina die gewoon kleiner werd getoond. Verkleinde pagina's hebben piepkleine tekst en links waar je niet op kunt tikken. Als je ooit een site hebt verlaten om die reden, dan heb je een site gezien die in de praktijk niet responsive is.

Waarom de weergave op een telefoon telt voor geboekte gesprekken

Veel bezoekers zien je site voor het eerst op een telefoon: via een link in een bericht, een social profiel of een zoekresultaat. Als de weergave op de telefoon onhandig is, vertrekken ze misschien zonder te zeggen waarom. Dat zie je nooit in je inbox, alleen in een lege agenda.

Daarom bouwt FluoSite mobile-first. We ontwerpen eerst het kleine scherm goed en laten de opmaak daarna meegroeien naar grotere schermen, in plaats van een desktopontwerp aan het eind kleiner te persen.

Check 1: de boekingsknop

Open je site op je eigen telefoon en zoek de manier om een gesprek te boeken. Die moet je vinden zonder ver te scrollen of een menu te openen. Wij ontwerpen pagina's vanuit de gedachte dat contact opnemen twee klikken kost, geen tien.

• Is de knop zichtbaar op het eerste scherm, of meteen bereikbaar?
• Is de knop groot genoeg om met een duim op te tikken zonder iets anders te raken?
• Staat er op de knop wat er gebeurt, zoals "Boek een gratis gesprek"?
• Blijft de knop makkelijk te vinden terwijl je naar beneden scrolt?

Check 2: het eerste scherm

Het eerste scherm is wat je ziet voordat je scrolt. Op een telefoon is dat klein, dus elk element moet zijn plek verdienen. Een bezoeker moet in een paar seconden weten wie je helpt, wat je aanbiedt en wat de volgende stap is.

• Een duidelijke kop die zegt wie je helpt en waarmee.
• Eén korte regel ondersteuning, geen alinea.
• Eén duidelijke vervolgstap.
• Geen grote afbeelding die alle tekst onder de vouw duwt.

Check 3: het formulier

Bij formulieren haken bezoekers op een telefoon het vaakst af. Typen op een klein scherm gaat langzaam, dus vraag alleen wat je nodig hebt om een gesprek te beginnen. Elk extra veld is een reden meer om te stoppen.

Probeer je eigen formulier in te vullen op je telefoon, met je duim. Controleer of het toetsenbord het veld waarin je typt niet afdekt, of de labels leesbaar zijn en of de verzendknop makkelijk te bereiken is. Kijk daarna of je het bericht echt ontvangt.

Zo test je je eigen site in vijf minuten

• Open je site op een echte telefoon, niet alleen in een verkleind browservenster.
• Zoek de boekingsknop en tik erop.
• Lees het eerste scherm en vraag een vriend wat jij doet.
• Vul het formulier van begin tot eind in.
• Herhaal dit op een tweede telefoon als je kunt, want schermformaten verschillen.

Als een van deze stappen onhandig voelt, is dat het waard om te verbeteren voordat je geld uitgeeft aan meer bezoekers. Meer bezoekers op een pagina die lastig te gebruiken is op een telefoon leveren niet meer gesprekken op.

FluoSite is een webdesignstudio in Amsterdam. We bouwen maatwerksites met eerst de structuur: je keurt een wireframe goed voordat we ook maar één kleur toevoegen, en pagina's worden mobile-first gebouwd. De meeste projecten kosten € 2.000-€ 4.000, vast en afgesproken voordat het werk begint.