HTML & CSS – Responsive Design

Wat is Responsive Webdesign?

Als webdeveloper heb je weinig controle over de gebruikscontext van je website; De gebruiker zou je site kunnen bekijken op een klein schermpje terwijl die met haast naar de trein aan het rennen is, of rustig op de bank achter de laptop, of op een Smartwatch, of Smart Koelkast, of…
Een Responsive website past zich aan, aan de gebruiker. Het duidelijkst zie je dat vaak aan de verschillen tussen desktop en mobiel, zoals in dit voorbeeld:

Op de NOS site is op de desktop-site ruimte voor een menu in de bovenbalk. In de mobiele versie is het menu verborgen in een ‘hamburgermenu’.
Maar ook de vlakverdeling verandert, lettertypes worden kleiner of juist groter, afbeeldingen verdwijnen of worden juist beeldvullend, enzovoorts.

Bekijk de volgende websites, maak het scherm zo breed en zo smal mogelijk, en probeer te zien wat ze allemaal gedaan hebben om hun site responsive te maken. Wat verplaatst? Wat verdwijnt? Wat ziet er anders uit?
NOS.nl
Fork CMS
66 Nord
Responsive Webdesign is een heel breed onderwerp, wij gaan ons daarom focussen op het verschil tussen een desktop en mobiel scherm (in portretstand). Als je dat nog niet gedaan hebt, maak je voor je eigen site een wireframe voor beide varianten. Let daarbij op: wat gebeurt er tussen de versies met elk vlak? Is er een vlak dat op de ene versie wel zichtbaar is en de andere niet? Maak daar notities van.
Als je in les 5 al een grid van je wireframe gemaakt hebt in HTML en CSS, dan werken we daar nu mee verder.
Als je dat nog niet gedaan hebt: Maak een nieuwe projectmap en daarin, zoals in les 4 beschreven, het grid van één versie van je site. Wij raden aan om te beginnen met de mobiele versie, omdat die vaak het makkelijkst is.

De Mediaquery

We gaan er van uit dat je nu in HTML en CSS een vlakverdeling gemaakt hebt van je pagina. Geschikt voor mobiel, of voor desktop. Om je pagina geschikt te maken voor beide schermen, moeten we kunnen aangeven wat er verandert op het moment dat de schermgrootte verandert. Hier gebruiken we een Mediaquery voor.

Als je huidige site geschikt is voor mobiel, maar nog niet voor desktop, plak dan deze code onderaan je CSS:
```
/* Mediaquery voor desktop schermen*/
@media (min-width: 1000px) {

}
```
Als je huidige site geschikt is voor desktop, maar nog niet voor mobiel, plak dan deze code onderaan je CSS:
```
/* Mediaquery voor mobiele schermen*/
@media (max-width: 1000px) {

}
```
Hierboven zie je een voorbeeld van een mediaquery, die kijkt naar de breedte van het scherm. Als het scherm smaller of breder wordt dan 1000 pixels, dan moet er wat gaan veranderen in de CSS. In de mediaquery gaan we nu zetten wát er dan verandert.
Om even te testen of het werkt, passen we in de mediaquery de achtergrondkleur van de pagina aan. Geef in de mediaquery je body een achtergrondkleur en ander lettertype:
```
/* Mediaquery voor mobiele schermen*/
@media (max-width: 1000px) {

    body {
        background-color: pink;
        font-family: "Brush Script MT", cursive;
    }

}
```
Als het goed is zie je nu de achtergrondkleur en het lettertype van de pagina veranderen als je het scherm breder of smaller maakt.

In een mediaquery geef je dus alleen aan wat er verandert op het moment dat het scherm een andere grootte heeft, alles wat het zelfde blijft zet je niet in de mediaquery

Maak in de mediaquery nu de grid-verdeling van de andere versie van je site. Als je site in eerste instantie dus geschikt was voor mobiel, maak je in de mediaquery je desktopversie, of andersom.
Bijvoorbeeld:
Let op, kopieer dit voorbeeld niet, maar maak je eigen versie!
```
/* Mediaquery voor mobiele schermen*/
@media (max-width: 1000px) {
    body {
      grid-template-columns: 50vw 50vw;
      grid-template-rows: 15vh 15vh auto 20vh;
    }

    #nav {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }

    #main {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    #sidebar {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
}
```
Nogmaals: in de mediaquery zet je alleen wat verandert. Alles wat hetzelfde blijft (zoals bijvoorbeeld kleuren en lettertypes) zet je niet in de mediaquery.

Tip: Als divs onzichtbaar moeten worden in een versie, gebruik dan display: none; om het onzichtbaar, of display: block; om het zichtbaar te maken.
Controleer of de vlakverdeling zich nu aanpast aan de breedte van het scherm. Als dat zo is kun je nu je inhoud gaan toevoegen. Ook daarbij kun je gebruik maken van je mediaquery, als dat nodig is. Zie het stuk in je CSS bestand vóór de mediaquery als de code die voor allebei de versies geldt. Het stuk ín de mediaquery geldt alleen voor een bepaalde versie en overschrijft waar nodig het algemene deel.