De meeste mensen bekijken je website op hun telefoon, vaak even tussendoor: in de wachtkamer, op de bank of onderweg. Toch zijn er nog altijd sites die zich gedragen alsof iedereen achter een breed bureauscherm zit. Het gevolg is dat juist de bezoekers die het dichtst bij een aanvraag staan, afhaken. In deze gids leg ik uit wat responsive design is, waarom het onmisbaar is en hoe je zorgt dat je site op elk scherm klopt, van de kleinste smartphone tot de grootste monitor.

Wat is responsive design?

Responsive design betekent dat je website zich automatisch aanpast aan het scherm waarop hij wordt bekeken. Of iemand nu op een smalle telefoon kijkt of op een breed beeldscherm, de inhoud schikt zich zo dat alles leesbaar en bedienbaar blijft. Geen geknepen tekst, geen knoppen die je nauwelijks kunt raken en geen pagina die opzij scrolt.

Het idee is eenvoudig maar krachtig: één site die overal werkt, in plaats van losse versies voor elk apparaat. De inhoud blijft hetzelfde, alleen de presentatie verandert mee met de ruimte die er is. Dat maakt je site niet alleen prettiger in gebruik, maar ook eenvoudiger te onderhouden.

Belangrijk om te beseffen: responsive is niet hetzelfde als alleen maar verkleinen. Een goede mobiele weergave is meer dan een ingedrukte versie van de desktop. Soms verdwijnt een element op een klein scherm naar de achtergrond, krijgt een knop juist meer nadruk, of verandert de volgorde waarin de inhoud verschijnt. De kunst is om op elk formaat de juiste prioriteiten te tonen, zodat de bezoeker altijd eerst ziet wat er voor hem toe doet.

Waarom mobiel niet langer bijzaak is

Het aandeel bezoekers dat via de telefoon binnenkomt is de afgelopen jaren alleen maar gegroeid en is op de meeste zakelijke sites inmiddels de meerderheid. Voor een lokaal bedrijf in Twente is dat extra van belang: iemand die onderweg zoekt naar een loodgieter of een lunchroom, doet dat vrijwel altijd op zijn telefoon.

Komt zo'n bezoeker op een site die er op mobiel niet uitziet, dan is hij binnen een paar tellen weer weg. Hij vormt bovendien een indruk van je bedrijf op basis van die ervaring. Een site die op de telefoon hapert, voelt onbetrouwbaar, ook al klopt alles op de desktop. Meer over deze denkwijze lees je in de blog over mobiel eerst bouwen.

De vraag is niet of bezoekers je site op hun telefoon bekijken, maar of jouw site daarop net zo overtuigend is als in je hoofd.

Mobiel-first als uitgangspunt

Mobiel-first betekent dat je het ontwerp eerst voor de kleinste schermen maakt en het daarna uitbreidt naar grotere. Dat klinkt als een detail, maar de volgorde maakt veel uit. Begin je bij de desktop, dan wordt de mobiele versie vaak een uitgeklede afterthought. Begin je bij mobiel, dan dwing je jezelf om te kiezen wat echt belangrijk is.

Die discipline werkt door in het hele ontwerp. Wat op een klein scherm overbodig is, blijkt dat vaak ook op een groot scherm te zijn. Mobiel-first leidt zo bijna vanzelf tot een rustiger, helderder site voor iedereen.

Hoe een responsive site technisch werkt

Onder de motorkap zorgt een combinatie van technieken ervoor dat je site meebeweegt met het scherm. Je hoeft de details niet te kennen, maar het helpt om de hoofdlijn te begrijpen.

Flexibele indeling

In plaats van vaste breedtes in pixels werkt een responsive site met verhoudingen. Kolommen die op een groot scherm naast elkaar staan, schuiven op een telefoon onder elkaar, zodat alles past zonder horizontaal scrollen.

Schaalbare tekst en beelden

Tekst en afbeeldingen passen hun grootte aan zodat ze op elk scherm goed leesbaar blijven. Een afbeelding wordt nooit breder dan de ruimte die ervoor is, en koppen blijven in verhouding.

Breekpunten

Op bepaalde schermbreedtes verandert de indeling, bijvoorbeeld van drie kolommen naar één. Die overgangen worden zo gekozen dat de site op elk formaat natuurlijk aanvoelt, niet alleen op de standaardmaten. Een veelgemaakte fout is om alleen op de meest voorkomende schermgroottes te testen en de tussenmaten te vergeten. Juist daar, op een kleinere tablet of een telefoon in liggende stand, ontstaan vaak lelijke sprongen. Een site die echt klopt, beweegt vloeiend mee over de hele reeks, zonder gaten of plekken waar de inhoud ineens te krap of te ruim staat.

Waar je op moet letten

Een site responsive maken is meer dan alles laten krimpen. Een paar punten verdienen extra aandacht.

Toegankelijkheid en responsive design liggen dicht bij elkaar: een site die voor iedereen goed werkt, werkt ook op elk scherm goed. Meer hierover in de blog over een toegankelijke website.

Vergeet ook de kleinere details niet. Formulieren bijvoorbeeld zijn op een telefoon vaak het lastigst: invoervelden die te smal zijn, een toetsenbord dat de verzendknop verbergt of labels die wegvallen, kosten je precies op het moment dat een bezoeker contact wil leggen. Hetzelfde geldt voor tabellen en brede afbeeldingen, die op een klein scherm snel uit hun voegen barsten. Door deze onderdelen vroeg in het ontwerp mee te nemen, voorkom je dat ze later als losse pleisters moeten worden opgelost.

Je site testen op verschillende schermen

De beste test is simpel: pak je telefoon en bekijk je eigen site alsof je een klant bent. Lukt het je vlot om de informatie te vinden, een knop te raken en contact te leggen? Of moet je zoeken, knijpen en scrollen? Bekijk je site daarnaast op een tablet en een groot scherm, want ook die uitersten horen te kloppen.

Wil je het zeker weten, dan kijk ik er graag vrijblijvend naar. Op de pagina over responsive design lees je hoe ik een site op elk scherm laat werken, en in de bredere webdesign-gids zie je hoe responsive design in het grotere geheel past. Overweeg je meteen een vernieuwing, lees dan de gids over je website laten herontwerpen.

Veelgestelde vragen

Responsive design betekent dat je website zich automatisch aanpast aan het scherm waarop hij wordt bekeken. Op een telefoon schikt de inhoud zich anders dan op een breed beeldscherm, zodat alles overal leesbaar en bedienbaar blijft zonder te hoeven in- of uitzoomen.

Mobiel-first betekent dat je het ontwerp eerst voor de telefoon maakt en daarna pas uitbreidt naar grotere schermen. Omdat de meeste bezoekers via hun telefoon binnenkomen, voorkomt deze volgorde dat de mobiele versie een uitgeklede bijzaak wordt.

Nee. Een aparte mobiele site was vroeger gangbaar, maar geeft dubbel onderhoud en versnippering. Eén responsive site die op elk scherm goed werkt is tegenwoordig de standaard en is eenvoudiger te beheren en beter vindbaar.

Open je site op je telefoon. Moet je in- en uitzoomen, scrolt hij opzij of zijn knoppen lastig te raken, dan is hij niet goed responsive. Ik kijk er vrijblijvend naar en zeg je eerlijk of een aanpassing zin heeft.

Verder in de kennisbank: Webdesign: de complete gids · Je website laten herontwerpen