H12 - Media queries en responsive layout

01 - Waarom responsive design?

Een website wordt bekeken op grote schermen, laptops, tablets en telefoons. Een layout die op een breed scherm mooi werkt, kan op een smal scherm te krap worden.

Responsive design betekent dat de layout zich aanpast aan de beschikbare schermruimte. De HTML blijft meestal hetzelfde. De CSS verandert de plaatsing, breedtes en soms de volgorde.

Op een desktop kun je meerdere kolommen naast elkaar zetten.
Op een telefoon zet je onderdelen meestal onder elkaar.
Media queries gebruik je om CSS-regels alleen bij bepaalde schermgroottes toe te passen.
De inhoud blijft bereikbaar op elk scherm.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

02 - Wat is een media query?

Een media query is een voorwaarde in CSS. De regels binnen de media query worden alleen gebruikt als de voorwaarde klopt.

@media (max-width: 700px) {
    body {
        background-color: lightblue;
    }
}

@media start de media query.
max-width: 700px betekent: deze regels gelden tot en met 700 pixels breed.
De CSS tussen de accolades wordt dan actief.
Is het scherm breder dan 700 pixels, dan worden deze regels niet gebruikt.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

03 - Desktop eerst of mobiel eerst?

Je kunt responsive CSS op twee manieren opbouwen.

Desktop eerst

Je maakt eerst de brede desktop-layout. Daarna pas je die aan voor kleinere schermen met max-width.

body {
    display: grid;
    grid-template-columns: 200px 1fr 250px;
}

@media (max-width: 700px) {
    body {
        grid-template-columns: 1fr;
    }
}

Mobiel eerst

Je maakt eerst de eenvoudige mobiele layout. Daarna voeg je extra kolommen toe voor bredere schermen met min-width.

body {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    body {
        grid-template-columns: 200px 1fr 250px;
    }
}

Beide aanpakken kunnen goed zijn. In dit hoofdstuk bouwen we de layout eerst breed op, omdat de Holy Grail layout dan het duidelijkst zichtbaar is. Daarna maken we hem responsive.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

04 - De Holy Grail layout

De Holy Grail layout is een klassieke webdesign-layout. Hij bestaat uit een header bovenaan, een navigatiekolom links, hoofdinhoud in het midden, een zijbalk rechts en een footer onderaan.

+--------------------------------------+
| header                               |
+----------+----------------+----------+
| nav      | main           | aside    |
+----------+----------------+----------+
| footer                               |
+--------------------------------------+

header staat bovenaan.
nav staat links.
main is de belangrijkste inhoud.
aside is extra informatie aan de rechterkant.
footer staat onderaan.

Vroeger was deze layout lastig te maken. Met CSS Grid en named grid areas is hij overzichtelijk.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

05 - HTML voor de layout

De HTML bestaat uit duidelijke onderdelen. De volgorde is logisch van boven naar beneden.

<body>
    <header>Header</header>
    <nav>Navigatie</nav>
    <main>Hoofdinhoud</main>
    <aside>Zijbalk</aside>
    <footer>Footer</footer>
</body>

De HTML vertelt welke onderdelen er zijn. De CSS bepaalt waar die onderdelen komen te staan.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

06 - Grid-area namen geven

Elk onderdeel krijgt in CSS een grid-area naam. Die namen gebruiken we straks in grid-template-areas.

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

De naam achter grid-area kies je zelf.
Gebruik korte en duidelijke namen.
Dezelfde namen moeten terugkomen in grid-template-areas.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

07 - Desktop layout met Grid

Nu maken we de brede Holy Grail layout. De header en footer lopen over drie kolommen. De middelste rij bestaat uit navigatie, hoofdinhoud en zijbalk.

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    gap: 16px;
}

220px is de linkerkolom voor de navigatie.
1fr is de flexibele middenkolom voor de hoofdinhoud. fr betekent fractie van de beschikbare ruimte.
260px is de rechterkolom voor de zijbalk.
auto 1fr auto maakt drie rijen: boven, midden en onder.
gap maakt ruimte tussen de vakken.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

08 - De layout responsive maken

Op een smal scherm passen drie kolommen vaak niet goed. Daarom maken we met een media query één kolom. De onderdelen komen dan netjes onder elkaar.

@media (max-width: 700px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

Er is nu maar één kolom: 1fr.
Elke rij heeft daarom ook maar één naam.
De volgorde is duidelijk van boven naar beneden.
De HTML hoeft hiervoor niet aangepast te worden.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

09 - Volledig voorbeeld

Dit voorbeeld bevat de HTML, de desktop-layout en de responsive media query.

<body>
    <header>Mijn website</header>
    <nav>Menu</nav>
    <main>Welkom op mijn website.</main>
    <aside>Extra informatie</aside>
    <footer>Copyright</footer>
</body>

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    gap: 16px;
    font-family: Arial, sans-serif;
}

header {
    grid-area: header;
    background-color: darkslategray;
    color: white;
    padding: 20px;
}

nav {
    grid-area: nav;
    background-color: lightsteelblue;
    padding: 20px;
}

main {
    grid-area: main;
    background-color: white;
    padding: 20px;
}

aside {
    grid-area: aside;
    background-color: gainsboro;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: darkslategray;
    color: white;
    padding: 20px;
}

@media (max-width: 700px) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

10 - Best practices

Begin met een duidelijke HTML-structuur.
Gebruik grid-template-areas om de layout leesbaar te houden.
Gebruik duidelijke grid-area namen.
Test je layout op een breed scherm en een smal scherm.
Gebruik de browser-inspector om de grid-overlay te bekijken.
Gebruik media queries om de layout eenvoudiger te maken op kleine schermen.
Verander alleen wat nodig is in de media query.

Actie

Pas dit onderdeel toe in je responsive eindlayout.
Verklein het browservenster en controleer wat er verandert.

11 - Final opdracht

Actie

Maak als eindopdracht een complete responsive website-layout. In deze opdracht combineer je de belangrijkste onderwerpen uit de cursus: HTML-structuur, CSS, kleuren, box model, flexbox, grid en media queries.

Eisen

Maak een HTML-pagina met <header>, <nav>, <main>, <aside> en <footer>.
Maak met CSS Grid een Holy Grail layout met named grid areas.
Laat de header en footer over de volledige breedte lopen.
Zet de navigatie links, de hoofdinhoud in het midden en de aside rechts.
Maak de layout responsive met een media query.
Zet de layout op kleine schermen om naar één kolom.
Geef de body een achtergrondkleur als fallback.
Gebruik daarna een achtergrondafbeelding met background-size: cover.
Maak in de navigatie een <ul> met links.
Gebruik flexbox om de links in de navigatie netjes te verdelen.
Maak in <main> minimaal twee contentblokken met tekst.
Gebruik padding, margin, border of achtergrondkleur om de contentblokken duidelijk vorm te geven.
Controleer de HTML met de W3C validator.
Controleer de CSS met de W3C CSS validator.

Voorbeeld voor de achtergrond

body {
    background-color: #888888;
    background-image: url("achtergrond.jpg");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

Voorbeeld voor het menu

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Over</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
}

Checklist

De desktop-layout heeft meerdere kolommen.
De mobiele layout heeft één kolom.
De navigatie werkt als lijst met links.
De navigatie gebruikt flexbox.
De achtergrondafbeelding vult het scherm netjes met cover.
De contentblokken zijn leesbaar en hebben voldoende ruimte.
De pagina blijft bruikbaar als de achtergrondafbeelding niet laadt.

Quiz