Responsive Design & Media Queries

Tegenwoordig bekijken mensen websites op tientallen verschillende apparaten: van compacte smartphones en scherpe tablets tot brede laptops en gigantische 4K-monitoren. Als grafisch en digitaal vormgever kun je er dus nooit vanuit gaan dat jouw bezoeker de website op een vast schermformaat bekijkt.

Responsive Web Design (RWD) is het principe waarbij een website zich automatisch en vloeiend aanpast aan de schermgrootte van de gebruiker. Met behulp van media queries (@media), slim gekozen breekpunten (breakpoints) en de professionele mobile-first benadering zorg je ervoor dat jouw ontwerpen er op élk scherm fantastisch uitzien én prettig werken.

1. De Basis: De Viewport Meta Tag

Voordat je ook maar één regel CSS voor mobiele schermen schrijft, moet je de browser vertellen hoe hij de pagina moet schalen op mobiele apparaten. Smartphones proberen van nature een desktopwebsite "in te zoomen", waardoor tekst piepklein wordt.

Dit los je op door de volgende Viewport Meta Tag toe te voegen aan de <head> van je HTML-bestand:

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

Wat doet dit?

width=device-width geeft de browser de opdracht om de breedte van de pagina gelijk te stellen aan de werkelijke schermbreedte van het apparaat. initial-scale=1.0 stelt het initiële zoomniveau in op 100%.

2. Wat is de Mobile-First Benadering?

In de beginjaren van het web ontwierpen ontwikkelaars eerst de desktopversie en probeerden ze die daarna "in elkaar te drukken" voor mobiel (Desktop-First). Tegenwoordig werken we vrijwel altijd volgens de Mobile-First benadering.

Waarom Mobile-First?

Meeste bezoekers: Meer dan 60% van het wereldwijde internetverkeer verloopt via mobiele telefoons.
Focus op de essentie: Op een klein scherm heb je weinig ruimte. Je wordt gedwongen om eerst de belangrijkste inhoud en structuur op te bouwen.
Betere prestaties: Mobiele telefoons laden eerst de lichte basisstijlen. Zwaardere desktoplay-outs worden pas ingeladen als het scherm breed genoeg is.

DESKTOP-FIRST (Verouderd)       MOBILE-FIRST (Modern & Professioneel)
┌─────────────────────────┐     ┌──────┐
│       Desktop CSS       │     │Mobile│  --> Basis CSS (Standaard)
└─────────────────────────┘     └──────┘
             │                             │
             ▼                             ▼
┌─────────────────────────┐     ┌─────────────┐
│  Max-width (Krimpen)    │     │ Min-width   │  --> `@media (min-width: ...)`
└─────────────────────────┘     └─────────────┘

3. Wat zijn Breekpunten (Breakpoints)?

Een breekpunt (breakpoint) is de specifieke schermbreedte waarop de lay-out van je website verandert om beter op het scherm te passen. Bijvoorbeeld: een navigatiemenu verandert van een mobiel klapmenu in een horizontale balk, of twee kolommen springen onder elkaar.

Hoewel er honderden verschillende schermbreedtes bestaan, hanteren we in het werkveld een aantal standaard breekpunten:

Apparaat Categorie	Richtlijn Schermbreedte	Veelgebruikt Breekpunt (`min-width`)
Mobiel (Smartphones)	< 768px	Standaard basis CSS (geen media query nodig)
Tablets / Grote telefoons	768px – 1023px	`@media (min-width: 768px)`
Laptops / Desktops	1024px – 1439px	`@media (min-width: 1024px)`
Grote Schermen (Desktop HD)	≥ 1440px	`@media (min-width: 1440px)`

Ontwerptip: Kies je breekpunten niet op basis van specifieke merktelefoons (zoals exact een iPhone 15), maar op het moment dat de inhoud van jouw pagina er niet meer mooi uitziet.

4. Media Queries Schrijven (`@media`)

Een media query is een CSS-regel waarmee je stijlen alleen toepast als aan bepaalde voorwaarden wordt voldaan (zoals een minimale schermbreedte).

Syntaxis bij Mobile-First (`min-width`)

Bij een mobile-first benadering schrijf je eerst alle CSS voor mobiel. Daarna gebruik je @media (min-width: ...) om stijlen toe te voegen of te overschrijven zodra het scherm breder wordt.

/* ====================================================== */
/* 1. BASIS STIJLEN (Mobiel als uitgangspunt)            */
/* ====================================================== */
body {
    font-size: 16px;
    background-color: #f8fafc;
}

.kaart-grid {
    display: flex;
    flex-direction: column; /* Kaarten onder elkaar op mobiel */
    gap: 16px;
}

/* ====================================================== */
/* 2. TABLET LAY-OUT (Schermen vanaf 768px en breder)     */
/* ====================================================== */
@media (min-width: 768px) {
    .kaart-grid {
        flex-direction: row; /* Kaarten naast elkaar op tablet */
        flex-wrap: wrap;
    }

    .kaart {
        width: calc(50% - 8px); /* 2 kolommen op tablet */
    }
}

/* ====================================================== */
/* 3. DESKTOP LAY-OUT (Schermen vanaf 1024px en breder)   */
/* ====================================================== */
@media (min-width: 1024px) {
    body {
        font-size: 18px; /* Grotere leesbare letter op desktop */
    }

    .kaart {
        width: calc(33.333% - 11px); /* 3 kolommen op desktop */
    }
}

5. Responsive Afbeeldingen & Media

Niet alleen tekst en kolommen moeten meeschalen; afbeeldingen mogen nooit 'uit hun vakje barsten' of buiten het scherm vallen.

Voeg daarom deze gouden regel standaard toe aan je globale CSS-reset:

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

Uitleg: max-width: 100% zorgt ervoor dat de afbeelding nooit breder wordt dan het moederelement waarin hij staat. height: auto zorgt ervoor dat de verhoudingen (aspect ratio) van de afbeelding altijd intact blijven.

6. Compleet Praktijkvoorbeeld: Responsieve Kaarten-pagina

In dit complete voorbeeld bouwen we een pagina met een navigatiebalk en een kaartengrid dat automatisch meeschaalt van 1 kolom op mobiel, naar 2 kolommen op tablet, en 3 kolommen op desktop.

HTML (`index.html`)

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        <div class="logo">Studio Viso</div>
        <nav class="nav">
            <a href="#">Home</a>
            <a href="#">Projecten</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <main class="container">
        <h1>Onze Projecten</h1>
        
        <section class="card-grid">
            <article class="card">
                <img src="[https://via.placeholder.com/400x250](https://via.placeholder.com/400x250)" alt="Project 1">
                <div class="card-body">
                    <h2>Branding Project</h2>
                    <p>Een unieke visuele identiteit ontwikkeld voor een moderne start-up.</p>
                </div>
            </article>

            <article class="card">
                <img src="[https://via.placeholder.com/400x250](https://via.placeholder.com/400x250)" alt="Project 2">
                <div class="card-body">
                    <h2>Webdesign UI</h2>
                    <p>Een strak en toegankelijk dashboard-ontwerp voor mobiel en desktop.</p>
                </div>
            </article>

            <article class="card">
                <img src="[https://via.placeholder.com/400x250](https://via.placeholder.com/400x250)" alt="Project 3">
                <div class="card-body">
                    <h2>Motion Graphic</h2>
                    <p>Een dynamische animatievideo voor een maatschappelijke campagne.</p>
                </div>
            </article>
        </section>
    </main>

</body>
</html>

CSS (`style.css`)

/* ====================================================== */
/* 1. GLOBALE RESET & MOBIELE BASISSTIJLEN (Mobile-First) */
/* ====================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f1f5f9;
    color: #334155;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #0f172a;
}

/* Header & Navigatie voor mobiel (gestapeld) */
.header {
    background-color: #0f172a;
    padding: 16px 20px;
    display: flex;
    flex-direction: column; /* Alles onder elkaar op mobiel */
    align-items: center;
    gap: 12px;
}

.logo {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: bold;
}

.nav a {
    color: #94a3b8;
    text-decoration: none;
    margin: 0 8px;
}

/* Kaartengrid op mobiel (1 kolom) */
.card-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-body {
    padding: 16px;
}

.card-body h2 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #1e293b;
}

/* ====================================================== */
/* 2. TABLET BREEKPUNT (min-width: 768px)                */
/* ====================================================== */
@media (min-width: 768px) {
    .header {
        flex-direction: row; /* Logo links, nav rechts op tablet */
        justify-content: space-between;
    }

    .card-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .card {
        width: calc(50% - 10px); /* Exact 2 kolommen naast elkaar */
    }
}

/* ====================================================== */
/* 3. DESKTOP BREEKPUNT (min-width: 1024px)              */
/* ====================================================== */
@media (min-width: 1024px) {
    h1 {
        font-size: 2.4rem;
    }

    .card {
        width: calc(33.333% - 14px); /* Exact 3 kolommen naast elkaar */
    }
}

Samenvatting

Responsive Design zorgt ervoor dat een website zich aanpast aan elk schermformaat.
Vergeet nooit de <meta name="viewport"> tag in je HTML head te plaatsen.
Mobile-First houdt in dat je eerst bouwt voor mobiele telefoons en pas via media queries stijlen toevoegt voor grotere schermen.
Gebruik bij mobile-first altijd @media (min-width: ...).
Breekpunten (zoals 768px en 1024px) zijn de schermbreedtes waarop jouw lay-out verandert van vorm.
Maak afbeeldingen responsive met max-width: 100%; height: auto;.