responsief ontwerp

Responsief ontwerp in de praktijk: vloeiende rasters, flexibele afbeeldingen en media queries Deze handleiding legt uit hoe u responsief ontwerp 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 ontwerpt u voor één momentopname; met relatieve eenheden laat u de browser rekenen. Dat kost niets en levert een layout op die werkt op elke breedte tussen uw 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 uw globale stylesheet, niet per afbeelding. Het geldt voor alle media die u ooit toevoegt. De `height: auto` zorgt dat de verhouding intact blijft wanneer de breedte wordt ingeperkt.

Voor moderne browsers kunt u 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. U betaalt hier een prijs: u 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;
    }
}

Schrijft u eerst de mobiele stijlen en breidt u daarna uit met `min-width` media queries, dan hoeft u op kleine schermen geen stijlen terug te draaien. Dat houdt uw CSS leesbaar. De keerzijde: u moet bewust nadenken welke stijlen u 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 uw pagina als een desktopvenster van 980px breed en schaalt die omlaag. Uw 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 toestel. `initial-scale=1.0` zorgt dat er geen standaard zoomniveau wordt toegepast. Zet deze tag in de `` van elke pagina die u 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 u later de basisgroottes per breakpoint wilt aanpassen, verandert u alleen de `font-size` op `html` en schaalt de rest mee. Werkt een bezoeker met een grotere standaardlettergrootte in zijn browser, dan respecteert uw site die keuze — iets wat met pixels onmogelijk is.

Stap 6: Breakpoints kiezen op inhoud

De meest gemaakte fout is breakpoints koppelen aan specifieke toestellen. De iPhone 14 Pro is 393px breed, de Pixel 8 is 412px. Over een jaar zijn die getallen anders. Kies breakpoints waar uw 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 uw browser hebben een modus voor apparaatweergave. In Chrome 120+ en Firefox 115+ kunt u 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 vindt u de boosdoener door in de ontwikkeltools elk element te selecteren en te kijken welk element breder is dan zijn container.

Verificatie

Open uw 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 uw browservenster langzaam van breed naar smal. Vloeiende overgangen betekenen dat uw fluid grids en flexible images goed staan. Abrupte verspringingen op vaste punten zijn uw 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 uw 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

U 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 uw 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 u 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 u een vaste `width: 1200px` tegenkomt, vraagt u zich af waarom die daar nog staat.

← Terug naar kennisbank