Je bezoekers bekijken je website op een telefoon in de trein, op een tablet op de bank en op een groot scherm op kantoor. Op al die schermen moet je website goed werken: leesbaar zonder inzoomen, knoppen die je met je duim raakt, en een menu dat je kunt vinden. Dat is precies wat responsive design doet. In dit artikel leg ik uit hoe het werkt, waarom het belangrijk is en hoe je zelf controleert of jouw website het goed doet.
Wat is responsive design?
Responsive design is een manier van bouwen waarbij een website zich automatisch aanpast aan het scherm waarop hij wordt bekeken. Er is één website met één adres en één inhoud, maar de indeling verandert met de schermbreedte. Op een laptop staan drie blokken naast elkaar, op een telefoon onder elkaar. Teksten blijven leesbaar, afbeeldingen passen in het scherm en je hoeft nooit opzij te scrollen.
Vergelijk het met water: giet het in een glas en het neemt de vorm van het glas aan, giet het in een kom en het past zich aan de kom aan. De inhoud blijft hetzelfde, alleen de vorm verandert.
Hoe werkt responsive design?
Achter een responsive website zitten drie technieken die samenwerken.
1. Een flexibel raster
De indeling van de pagina is niet vastgelegd in een vast aantal pixels, maar in verhoudingen. Een kolom is bijvoorbeeld niet 400 pixels breed, maar een derde van het scherm. Wordt het scherm smaller, dan worden de kolommen dat ook.
2. Afbeeldingen die meeschalen
Afbeeldingen worden nooit breder dan het blok waarin ze staan. Goede websites gaan nog een stap verder: ze laden op een telefoon een kleinere versie van de foto. Dat scheelt data en laadtijd.
3. Breekpunten
Op bepaalde schermbreedtes, de breekpunten, verandert de indeling. Daarvoor gebruikt de ontwikkelaar media queries in de opmaakcode (CSS). Een vereenvoudigd voorbeeld:
/* Standaard: alles onder elkaar (telefoon) */
.diensten { display: grid; grid-template-columns: 1fr; }
/* Vanaf 640 pixels breed: twee kolommen */
@media (min-width: 640px) {
.diensten { grid-template-columns: 1fr 1fr; }
}
/* Vanaf 1000 pixels breed: drie kolommen */
@media (min-width: 1000px) {
.diensten { grid-template-columns: 1fr 1fr 1fr; }
}
De blokken met diensten staan op een telefoon onder elkaar, op een tablet in twee kolommen en op een laptop in drie. Een goede ontwikkelaar kiest de breekpunten op basis van de inhoud: waar wordt het te krap of juist te leeg? Niet op basis van één bepaald toestel.
Responsive, adaptief of een aparte mobiele website?
Responsive design is niet de enige manier om een website geschikt te maken voor mobiel. Je komt ook deze twee tegen:
| Aanpak | Hoe werkt het? | Nadeel |
|---|---|---|
| Responsive | Eén website die zich vloeiend aanpast aan elk scherm | Vraagt een doordacht ontwerp voor alle schermen |
| Adaptief | Een paar vaste indelingen voor bepaalde schermformaten | Schermen tussen de vaste maten vallen tussen wal en schip |
| Aparte mobiele website | Een losse website, vaak op een adres als m.jouwbedrijf.nl | Twee websites om bij te houden, met kans op verschillen |
Responsive design is vandaag de standaard, en ook wat Google aanraadt. Elke website die ik bouw, is responsive.
Mobile first: beginnen bij het kleinste scherm
Vroeger werd een website ontworpen voor een groot scherm en daarna “passend gemaakt” voor de telefoon. Het resultaat zie je nog vaak: menu’s die niet werken, piepkleine knoppen en lange pagina’s waarin je de draad kwijtraakt.
Bij mobile first draai je dat om. Je begint met de telefoon, waar de ruimte het kleinst is. Dat dwingt je om te kiezen wat echt belangrijk is. Daarna bouw je uit voor grotere schermen. Het codevoorbeeld hierboven werkt ook zo: eerst de telefoon, daarna tablet en laptop.
Waarom is responsive design belangrijk?
De meeste bezoekers gebruiken een telefoon
In Nederland gebeurt zo’n twee op de drie websitebezoeken via een telefoon (StatCounter). Werkt je website daar niet goed, dan stoot je de grootste groep bezoekers af. Die gaan niet naar je laptopversie zoeken; ze gaan naar een concurrent.
Google kijkt naar je mobiele website
Google gebruikt de mobiele versie van je website om te bepalen wat erop staat en hoe hoog je komt in de zoekresultaten. Dat heet mobile-first indexing (Google Search Central). Ontbreekt er op je telefoonversie tekst of informatie, dan telt die voor Google dus ook niet mee. Lees meer over hoe je je website goed vindbaar maakt in Google.
Bezoekers blijven langer en nemen sneller contact op
Op een website die prettig werkt op je telefoon, lees je verder, klik je door en vul je eerder een formulier in. Een website waar je moet inzoomen en mis-tikt, verlaat je snel. Responsive design is daarom ook een kwestie van conversie.
Eén website om bij te houden
Met één responsive website pas je je teksten één keer aan, en ze staan meteen goed op elk scherm. Geen aparte mobiele website die achterloopt. En komt er volgend jaar een nieuw toestel met een ander schermformaat, dan past je website zich daar gewoon aan.
Veelvoorkomende problemen op mobiel
Ook websites die “responsive” heten, gaan op een telefoon vaak mis. Dit zijn de problemen die ik het vaakst zie:
- Knoppen en links te dicht op elkaar: je tikt steeds net op de verkeerde.
- Te kleine tekst: je moet inzoomen om te kunnen lezen.
- Tabellen of afbeeldingen die buiten het scherm vallen: de pagina schuift opzij als je scrolt.
- Pop-ups die het hele scherm bedekken: met een sluitknopje dat je niet kunt raken.
- Trage pagina’s: grote foto’s die op een mobiele verbinding lang laden. Lees hoe je je website sneller maakt.
- Formulieren die lastig invullen: velden die te klein zijn, of een cijferveld dat het gewone toetsenbord opent in plaats van het numerieke.
Veel van deze punten maken je website ook beter bruikbaar voor mensen met een beperking. Lees meer over een toegankelijke website.
Zo test je of je website responsive is
Dat kan in een paar minuten:
1. Pak je eigen telefoon en doorloop je website zoals een klant dat zou doen: zoek een dienst op, lees een pagina en vul het contactformulier in. Lukt dat zonder inzoomen of mis-tikken?
2. Versmal je browservenster op je laptop langzaam. Past de indeling zich netjes aan, of schuiven er blokken over elkaar?
3. Gebruik de apparaatmodus van je browser: in Chrome open je met F12 de ontwikkelaarstools en kies je een telefoon of tablet om je website op dat schermformaat te bekijken.
4. Test met PageSpeed Insights van Google. Je ziet hoe snel je website laadt op mobiel en krijgt concrete verbeterpunten.
Werk je met Google Search Console? Dan zie je daar ook hoe je pagina’s presteren op mobiel. De oude Mobielvriendelijkheidstest van Google bestaat niet meer; die is eind 2023 gestopt.
Ik test elke website die ik bouw niet alleen in de browser, maar ook op echte telefoons en tablets. Een simulatie laat veel zien, maar hoe een knop onder je duim voelt, merk je pas op een echt toestel.
Veelgestelde vragen
Wat is responsive design in het kort?
Een manier van bouwen waarbij één website zich automatisch aanpast aan het scherm van de bezoeker, of dat nu een telefoon, tablet of laptop is.
Wat is het verschil tussen responsive en mobielvriendelijk?
Mobielvriendelijk betekent dat een website goed werkt op een telefoon. Responsive design is de meest gebruikte manier om dat te bereiken: één website die zich aanpast aan elk scherm.
Is mijn WordPress website automatisch responsive?
Bijna alle moderne WordPress thema’s zijn responsive, maar dat betekent niet dat alles goed werkt. Eigen aanpassingen, tabellen, pop-ups en plugins gaan op mobiel vaak mis. Test daarom altijd op een echte telefoon.
Heeft responsive design invloed op mijn positie in Google?
Ja. Google beoordeelt je website op de mobiele versie. Een website die op mobiel slecht werkt of informatie mist, heeft daardoor minder kans om hoog te komen.
Kan een bestaande website responsive gemaakt worden?
Vaak wel, door de opmaak aan te passen. Is de website technisch verouderd, dan is een nieuwe website soms sneller en voordeliger.
Conclusie
Responsive design zorgt ervoor dat je website op elk scherm goed werkt, van telefoon tot breedbeeldmonitor. Met de meeste bezoekers op mobiel en Google die naar je mobiele versie kijkt, is het geen extraatje meer, maar de basis. Begin bij de telefoon, test op echte toestellen en let op de details: knoppen, tekstgrootte en laadtijd.
Twijfel je of jouw website het goed doet op mobiel? Met website optimalisatie pak ik de knelpunten aan, en bij een nieuwe website is mobile first het uitgangspunt.
