responsive design

Responsive design in de praktijk: fluid grids, flexible images en media queries Deze handleiding legt uit hoe je responsive design implementeert met de drie

Waarom geen vaste breedtes? Een desktopscherm van 1920px breed heeft meer dan twee keer zoveel ruimte als een laptop van 1366px. Met pixels ontwerp je voor één momentopname; met relatieve eenheden laat je de browser rekenen. Dat kost niets en levert een layout op die werkt op elke breedte tussen je breakpoints.

Stap 2: Flexible images toepassen

Afbeeldingen zijn de meest voorkomende oorzaak van horizontaal scrollen. Een afbeelding van 1200px breed binnen een container van 600px duwt de layout uit elkaar.

img, video, iframe {
    max-width: 100%;
    height: auto;
}

Voeg dit blok toe aan je globale stylesheet, niet per afbeelding. Het geldt voor alle media die je ooit toevoegt. De `height: auto` zorgt dat de verhouding intact blijft wanneer de breedte wordt ingeperkt.

Voor moderne browsers kun je het `srcset`-attribuut gebruiken om verschillende bestanden aan te bieden:

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Beschrijving van de afbeelding">

De browser kiest zelf het juiste bestand op basis van schermgrootte en netwerksnelheid. Je betaalt hier een prijs: je moet meerdere versies van elke afbeelding genereren en onderhouden. Voor een kleine site met weinig afbeeldingen is `max-width: 100%` voldoende.

Stap 3: Media queries toevoegen

Media queries passen stijlen conditioneel toe. De specificatie Media Queries Level 4 is inmiddels de standaard, maar Level 3 (uit 2012) blijft breed ondersteund en dekt vrijwel alle praktijkgevallen.

/<em> Basisstijlen: eerst mobile </em>/
body {
    font-size: 16px;
}</p><p>/<em> Tablet: 768px en breder </em>/
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}</p><p>/<em> Desktop: 1024px en breder </em>/
@media (min-width: 1024px) {
    .col-main {
        grid-column: span 8;
    }
    .col-side {
        grid-column: span 4;
    }
}

Schrijf je eerst de mobiele stijlen en breid je daarna uit met `min-width` media queries, dan hoef je op kleine schermen geen stijlen terug te draaien. Dat houdt je CSS leesbaar. De keerzijde: je moet bewust nadenken welke stijlen je op mobiel wilt hebben, in plaats van desktop eerst te bouwen en daarna te verkleinen.

Stap 4: Viewport meta tag instellen

Zonder deze tag behandelt een mobiele browser je pagina als een desktopvenster van 980px breed en schaalt die omlaag. Je media queries werken dan nooit zoals bedoeld.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Deze regel vertelt de browser dat de viewport overeenkomt met de werkelijke schermbreedte van het apparaat. `initial-scale=1.0` zorgt dat er geen standaard zoomniveau wordt toegepast. Zet deze tag in de `` van elke pagina die je responsive wilt maken.

Stap 5: Typografie schalen met relatieve eenheden

Vaste lettergroottes in pixels werken op elk scherm, maar ze schalen niet mee. Gebruik `rem` voor lettergroottes — 1 rem is gelijk aan de root-fontsize, standaard 16px.

html {
    font-size: 16px;
}</p><p>h1 {
    font-size: 2rem; /<em> 32px </em>/
}</p><p>h2 {
    font-size: 1.5rem; /<em> 24px </em>/
}</p><p>body {
    font-size: 1rem; /<em> 16px </em>/
}

Als je later de basisgroottes per breakpoint wilt aanpassen, verander je alleen de `font-size` op `html` en schaalt de rest mee. Werkt een bezoeker met een grotere standaardlettergrootte in zijn browser, dan respecteert jouw site die keuze — iets wat met pixels onmogelijk is.

Stap 6: Breakpoints kiezen op inhoud

De meest gemaakte fout is breakpoints koppelen aan specifieke apparaten. De iPhone 14 Pro is 393px breed, de Pixel 8 is 412px. Over een jaar zijn die getallen anders. Kies breakpoints waar je layout breekt: waar het sidebar-menu te smal wordt, waar de tekstkolom te lang wordt.

/<em> Waar de layout begint te knellen </em>/
@media (min-width: 45rem) { /<em> 720px </em>/
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }
}</p><p>@media (min-width: 70rem) { /<em> 1120px </em>/
    .nav {
        display: flex;
        justify-content: space-between;
    }
}

Een layout met twee kolommen heeft genoeg aan twee of drie breakpoints. Elke extra media query betekent extra onderhoud en meer mogelijke combinaties om te testen. Begin met één breakpoint rond 768px en voeg alleen een tweede toe als de layout daarom vraagt.

Stap 7: Testen in de browser

De ontwikkeltools van je browser hebben een modus voor apparaatweergave. In Chrome 120+ en Firefox 115+ kun je schakelen tussen presets zoals iPhone en iPad, of een eigen breedte invoeren.

Open de ontwikkeltools met F12, klik op het apparaat-icoon (Chrome) of het responsive design-icoon (Firefox), en sleep de viewport naar verschillende breedtes. Controleer bij 320px, 768px en 1440px of er geen horizontale scroll ontstaat en of geen elementen overlappen.

<h2>Controleer of de site horizontaal scrollt (voer uit in de console van de ontwikkeltools)</h2>
document.documentElement.scrollWidth <= window.innerWidth

Deze regel geeft `true` terug als alles binnen de viewport past. Loopt de site toch over, dan vind je de boosdoener door in de ontwikkeltools elk element te selecteren en te kijken welk element breder is dan zijn container.

Verificatie

Open je site op minimaal drie breedtes — een smal mobiel scherm (320px), een tablet (768px) en een desktop (minimaal 1280px). Controleer op elk formaat:

<h2>Via de command line met curl en een user-agent</h2>
curl -s -o /dev/null -w "%{http_code}" https://jouwsite.nl

Deze check bevestigt alleen dat de server bereikbaar is. De echte test is visueel. Resize je browservenster langzaam van breed naar smal. Vloeiende overgangen betekenen dat je fluid grids en flexible images goed staan. Abrupte verspringingen op vaste punten zijn je media queries — dat is normaal. Een site die op geen enkel punt horizontaal scrollt en waar teksten en afbeeldingen leesbaar blijven, is responsive.

Veelgestelde problemen

Horizontale scroll op mobiel ondanks `max-width: 100%`

Een element binnen je layout is breder dan de container. Dit kan een `pre`-blok zijn met lange code, een tabel of een element met een vaste pixelbreedte. Zoek het met de console-check hierboven en voeg toe:

pre, table {
    overflow-x: auto;
}

Media queries werken niet op mobiel

Je hebt de viewport meta tag niet toegevoegd, of hij staat niet in de `` maar elders op de pagina. Zonder deze tag gebruikt de mobiele browser een virtuele viewport van 980px en worden je media queries op basis van `min-width` nooit actief.

Afbeeldingen schalen wel mee maar blijven zwaar laden

`max-width: 100%` verkleint een afbeelding visueel, maar het bestand blijft even groot. Een 1600px-afbeelding van 800KB wordt op mobiel nog steeds voor 800KB gedownload. Gebruik `srcset` en `sizes` om kleinere bestanden aan te bieden voor kleine schermen. Generators zoals `sharp` (Node.js 18+) of `ImageMagick 7` kunnen de varianten automatisch produceren.

Responsive design is geen aparte techniek die je inschakelt, maar een manier van bouwen die in elke CSS-beslissing zit. Vaste breedtes zijn de uitzondering, relatieve eenheden de regel. Wie dat patroon eenmaal volgt, voegt nieuwe componenten vanzelf responsive toe — en de media queries worden steeds minder nodig naarmate grids en images flexibeler zijn. De volgende keer dat je een vaste `width: 1200px` tegenkomt, vraag je je af waarom die daar nog staat.

← Terug naar kennisbank