Definitie: Responsive design is een manier van webdesign waarbij een website of webapplicatie zich automatisch aanpast aan het scherm van de bezoeker, van smartphone tot breed desktopscherm. Indeling, tekstgrootte, afbeeldingen en navigatie schalen mee, terwijl er één versie van de site en één adres per pagina blijft.
In het kort
- Responsive design werkt met flexibele grids, schaalbare afbeeldingen en CSS media queries die de indeling aanpassen per schermbreedte.
- Volgens Van Zwam Media, met StatCounter als bron, verloopt in Nederland zo’n twee op de drie websitebezoeken via een telefoon.
- Google gebruikt de mobiele versie van een site om pagina’s te beoordelen (mobile-first indexing) en noemt responsive design de aanbevolen aanpak.
- Voor webapplicaties vraagt responsive design extra aandacht, omdat tabellen, formulieren en dashboards op een klein scherm anders moeten werken.
Wat is responsive design?
Vroeger bouwden veel bedrijven een aparte mobiele website naast hun gewone site, vaak op een eigen adres. Dat betekende dubbel onderhoud en verschillen in inhoud. Responsive design lost dat op met één website die zichzelf herschikt. Op een breed scherm staan blokken naast elkaar, op een tablet in twee kolommen en op een telefoon onder elkaar. Het menu klapt in tot een knop, afbeeldingen worden kleiner en tekst blijft leesbaar zonder in te zoomen.
De term responsive web design werd in 2010 geïntroduceerd door webontwerper Ethan Marcotte. Inmiddels is het de standaard: Van Zwam Media noemt responsive design “vandaag de standaard” voor elke nieuwe website.
Hoe werkt responsive design?
Responsive design rust op drie technieken:
- Flexibele grids. Kolommen en blokken krijgen geen vaste breedte in pixels, maar een relatieve breedte, zoals een percentage van het scherm.
- Flexibele afbeeldingen en media. Afbeeldingen worden nooit breder dan de ruimte die ze krijgen, vaak ingesteld op maximaal 100 procent van de beschikbare breedte.
- Media queries. Met CSS lees je de schermbreedte uit en pas je vanaf een bepaalde breedte de indeling aan, bijvoorbeeld van één naar twee of drie kolommen.
Daarnaast is één regel in de code onmisbaar: de viewport-tag. Webwrk legt uit dat een mobiele browser zonder <meta name="viewport" content="width=device-width, initial-scale=1"> de pagina vaak als verkleinde desktopversie toont.
Wat zijn breakpoints?
Een breakpoint is de schermbreedte waarop de indeling verandert. Er bestaat geen officiële lijst; de juiste breakpoints hangen af van de inhoud. Veelgebruikte waarden volgens Webwrk:
| Breakpoint | Typisch apparaat |
|---|---|
| 320 pixels | Kleine smartphones |
| 768 pixels | Tablets |
| 1024 pixels | Kleine laptops en tablets liggend |
| 1200 pixels | Desktopschermen |
Een goede vuistregel is breakpoints te kiezen op het punt waar de inhoud er niet meer goed uitziet, niet op basis van een specifiek toestel. Nieuwe telefoons en schermformaten verschijnen voortdurend.
Responsive, adaptive en mobile first
| Aanpak | Werking | Kenmerk |
|---|---|---|
| Responsive | Eén flexibele indeling die vloeiend meeschaalt | Werkt op elk schermformaat, één versie onderhouden |
| Adaptive | Een paar vaste indelingen, bijvoorbeeld klein, middel en groot | Meer controle per formaat, minder vloeiend |
| Aparte mobiele site | Een tweede site, vaak op een eigen adres | Dubbel onderhoud, verouderd |
| Mobile first | Ontwerpen voor het kleinste scherm en daarna uitbreiden | Een ontwerpvolgorde, vaak gecombineerd met responsive |
Mobile first is geen alternatief voor responsive design maar een manier om ermee te werken. Je begint bij de telefoon, waar ruimte schaars is, en bepaalt zo wat echt belangrijk is. Op grotere schermen voeg je ruimte en extra onderdelen toe.
Waarom is responsive design belangrijk?
- Bezoekers. Een groot deel van het verkeer komt van telefoons. Een site die daar niet goed werkt, verliest bezoekers.
- Vindbaarheid. Volgens Webwrk maakte Google mobielvriendelijkheid in 2015 een rankingfactor en schakelde het in 2019 over op mobile-first indexing, waarbij de mobiele versie als hoofdversie geldt.
- Onderhoud. Eén site met één inhoud is eenvoudiger bij te houden dan aparte versies.
- Toegankelijkheid. Leesbare tekst, voldoende contrast en grote klikgebieden helpen iedereen, ook mensen met een beperking.
Responsive design bij webapplicaties
Bij een website gaat het vooral om leesbare tekst en een werkend menu. Bij een webapplicatie ligt dat lastiger. Een overzicht met tien kolommen, een formulier met veel velden of een dashboard met grafieken past niet zomaar op een telefoon. Een paar keuzes die dan spelen:
- Tabellen omzetten naar kaarten. Op een klein scherm toon je per regel een kaart met de belangrijkste gegevens, en de rest op een detailpagina.
- Kolommen kiezen. Laat op mobiel alleen de kolommen zien die nodig zijn om een beslissing te nemen.
- Formulieren opsplitsen. Een lang formulier werkt beter in stappen.
- Grote knoppen. Klikgebieden moeten groot genoeg zijn voor een vinger; Webwrk noemt richtwaarden rond 44 tot 48 pixels.
- Per taak denken. Niet elke functie hoeft op de telefoon. Een medewerker in de buitendienst wil vooral iets registreren of opzoeken, niet de volledige administratie beheren.
Snelheid en afbeeldingen op mobiel
Een responsive site die er goed uitziet maar traag laadt, werkt op een telefoon nog steeds slecht. Mobiele verbindingen zijn wisselend en toestellen hebben minder rekenkracht dan een laptop. Let daarom op:
- Afbeeldingen in meerdere formaten. Een telefoon hoeft geen foto van 2.000 pixels breed te downloaden. Met de juiste HTML kiest de browser zelf het passende formaat.
- Moderne bestandsformaten zoals WebP of AVIF, die kleiner zijn bij dezelfde kwaliteit.
- Lazy loading. Afbeeldingen onder in de pagina laden pas als de bezoeker ernaartoe scrolt.
- Weinig zware scripts. Elke extra bibliotheek kost laadtijd, vooral op oudere telefoons.
Typografie en ruimte
Tekst die op een desktop prettig leest, kan op een telefoon te klein of te breed zijn. Gebruik een basisgrootte die zonder inzoomen leesbaar is, houd regels niet te lang en geef knoppen en links voldoende ruimte, zodat bezoekers niet per ongeluk op het verkeerde element tikken. Ook witruimte schaalt mee: wat op een groot scherm rustig oogt, kost op een klein scherm kostbare ruimte.
Een bestaande site responsive maken: stappen
- Meet hoe bezoekers nu binnenkomen, op welke toestellen en schermformaten.
- Bepaal per pagina wat het belangrijkste is op een klein scherm.
- Voeg de viewport-tag toe en zet vaste breedtes om naar flexibele.
- Leg breakpoints vast op de punten waar de inhoud dat vraagt.
- Optimaliseer afbeeldingen en navigatie voor mobiel.
- Test op echte toestellen en loop de belangrijkste taken door.
Veelgemaakte fouten
Managing IT noemt een aantal fouten die vaak voorkomen:
- knoppen en links die te klein zijn om met een vinger te raken;
- afbeeldingen die niet zijn geoptimaliseerd, waardoor pagina’s traag laden op mobiel;
- inhoud die bij bepaalde schermbreedtes verdwijnt of overlapt.
Daarnaast zie je vaak dat er alleen in de browser op een laptop wordt getest. Een smal browservenster is geen echte telefoon: aanraken, scrollen en een trage verbinding gedragen zich anders.
Hoe test je of een site responsive is?
- Ontwikkelaarstools in de browser. In Chrome open je met F12 de apparaatmodus en bekijk je de site op verschillende schermformaten.
- Echte toestellen. Test op minstens één iPhone en één Android-telefoon, en op een tablet.
- PageSpeed Insights. Google meet hiermee de laadsnelheid en prestaties, ook op mobiel. De oude Mobielvriendelijkheidstest van Google is volgens Van Zwam Media eind 2023 gestopt.
- Kantelen. Controleer ook de liggende stand van telefoon en tablet.
- Taken doorlopen. Kijk niet alleen of de pagina er goed uitziet, maar ook of je een formulier kunt versturen en een bestelling of aanvraag kunt afronden.
Wat kost responsive design?
Responsive design is bij een nieuwe website of webapplicatie geen losse optie meer, maar onderdeel van het ontwerp en de bouw. Webwrk noemt als eigen tarief een maatwerkpagina vanaf 950 euro en een zakelijke website met meerdere pagina’s vanaf 1.500 euro; dat is een marktindicatie, geen vaste prijs. Een oude, niet-responsive site ombouwen is vaak meer werk dan opnieuw beginnen, omdat de indeling vanaf de basis anders moet worden opgezet. Bij webapplicaties hangen de kosten vooral af van het aantal schermen dat ook op mobiel goed moet werken.
Wat betekent dit voor jouw project?
Bij een webapplicatie begint responsive design voor mij bij de gebruiker, niet bij het scherm. Wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? Werkt iemand onderweg op een telefoon, dan moet juist die taak daar soepel verlopen. Werkt het team vooral achter een bureau, dan ligt de nadruk op overzicht op een groot scherm.
Ik wil vooraf duidelijk hebben wat we met een eerste versie bedoelen. Daar hoort ook bij op welke apparaten welke taken moeten werken.
Vraag? Stuur me voor wie het is, waar die persoon werkt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook meer over een webapplicatie bouwen.
Veelgestelde vragen over responsive design
Wat is responsive design?
Responsive design is een manier van webdesign waarbij een website zich automatisch aanpast aan de schermgrootte van de bezoeker. Het maakt gebruik van flexibele grids, schaalbare afbeeldingen en CSS media queries.
Wat is een responsive website?
Een responsive website is een site die op smartphone, tablet en desktop goed leesbaar en bruikbaar is, zonder aparte mobiele versie. De indeling verandert mee met de breedte van het scherm, terwijl de inhoud en het adres gelijk blijven.
Wat is het verschil tussen responsive en mobile first?
Responsive design beschrijft dat een site zich aanpast aan elk scherm. Mobile first is een ontwerpvolgorde waarbij je eerst voor het kleinste scherm ontwerpt en daarna uitbreidt naar grotere schermen; beide worden vaak samen gebruikt.
Verwante termen
Progressive web app · Webapplicatie · Verschil website en webapplicatie · European Accessibility Act · Wireframe · Mockup
← Terug naar de kennisbank