Websites met stijl

Naslag: responsive webdesign - media queries

Op dit naslagblad

Wat is responsive webdesign
Vorm van een mediaquerie
Aanpak
Viewport

Wat is responsive webdesign

Responsive webdesign houdt in dat een website zó ontworpen wordt dat die er goed uitziet op desktops, laptops, tablets en smartphones, op schermen dus van groot tot klein.

Reponsive webdesign wordt geregeld in het stijlblad.
Het begint met gebruik van relatieve afmetingen voor bijna alle elementen.
Dus: width: 65%; in plaats van: width: 885px;

Daarnaast wordt gebruik gemaakt van media queries. Daarmee kan speciale opmaak voor grote schermen (of juist voor kleine schermen) worden toegevoegd aan de standaard opmaak.

Vorm van een media querie

Bij het gebruik van media queries voor responsive webdesign zijn vooral de volgende twee vormen van belang: Vorm 1 @media screen and (max-width: breekpunt) {opmaak} Speciale opmaak voor schermen kleiner dan een bepaalde breedte.

en Vorm 2 @media screen and (min-width: breekpunt) {opmaak} Speciale opmaak voor schermen groter dan een bepaalde breedte.

Breekpunt is een breedte, bv. 650px.
De opmaak tussen de accoladen wordt alleen uitgevoerd als aan de voorwaarde is voldaan
Vorm 1 geldt voor schermen met kleiner dan of gelijk aan het breekpunt, Vorm 2 geldt voor schermen groter dan of gelijk aan het breekpunt.

Aanpak

Er zijn twee methoden om een responsive website te bouwen: van groot naar klein en van klein naar groot.

Methode 1: Van groot naar klein

Hierbij wordt gebruik gemaakt van media queries van vorm 1. Er is minimaal 1 breekpunt, maar het kunnen er ook meer zijn.
Als er verschillende breekpunten zijn, moeten die geordend zijn van groot naar klein. Zie voorbeeld 1.

Voorbeeld 1: methode 1 met breekpunten op 1250px, 900px, 600px Standaard opmaak voor grote schermen (groter dan 1250px)

@media screen and (max-width: 1250px; {
/* hier komt de opmaak voor schermen van 1250px of kleiner */
}

@media screen and (min-width: 900px; {
/* hier komt de opmaak voor schermen van 900px of kleiner */
}

@media screen and (min-width: 60px; {
/* hier komt de opmaak voor schermen van 600px of kleiner */
}

Methode 2: Van klein naar groot

Hierbij wordt gebruik gemaakt van media queries van vorm 2. Er is minimaal 1 breekpunt, maar het kunnen er ook meer zijn.
Als er verschillende breekpunten zijn, moeten die geordend zijn van klein naar groot. Zie voorbeeld 2.

Voorbeeld 2: methode 1 met breekpunten op 600px, 900px en 1250px Standaard opmaak (voor kleine schermen tot 600px)

@media screen and (min-width: 600px; {
/* hier komt de opmaak voor schermen van 600px en groter */
}

@media screen and (min-width: 900px; {
/* hier komt de opmaak voor schermen van 900px en groter */
}

@media screen and (min-width: 1250px; {
/* hier komt de opmaak voor schermen van 1250px en groter */
}

Opmerkingen

Methode 1 (van klein naar groot) wordt door dekundigen het beste gevonden.
- De opmaak voor grote schermen is meestal veel groter dan die voor kleine schermen. (Bij grote schermen zijn vaak grote (achtergrnd-)afbeeldinen. Bij methode 1 wordt standaard de opmaak voor grote schermen geladen, daarna bij kleine schermen de aanpassingen voor kleine schermen. Bij methode 2 is dat andersom. Bij methode 1 moet dus voor kleine schermen meer geladen worden, dat resulteert in een langere laadtijd en meer dataverbruik. (Voor kleine websites als die van Terschelling is het verschil nauwelijks te merken.)
Let op: in de queries staan de stijldeclaraties - zoals overal in het stijlblad - tussen accolades. Dat betekent dat elke media querie eindigt op 2 accoladen, één van de laatste stijldeclaratie, en de sluit-accolade van de querie. Ik vergeet die laatste nog wel eens en dan gaat er het een en ander mis met de opmaak. Voorbeeld 3: op het einde twee accoladen @media screen and (mmin-width: 720px) {
main {width: 60%;}
p {margin-left: 20px;}
}
Het aantal breekpunten en de grootte van de breekpunten worden bepaald door de schermgrootte waarbij een bepaalde opmaak niet meer voldoet.
Ook zou gedacht kunnen worden aan een breekpunt bij een schermbreedte die niet vaak gebruikt wordt, bv. tussen de breedte van een smartphone en die van een tablet. Het is echter zo dat de gebruikelijke schermgrootten in de loop der jaren voortdurend veranderen.
Er zijn veel meer mogelijkheden met media queries. Zie daarvoor de website van W3 schools.

De viewport

Om responsive design goed te laten werken op mobieltjes moet in de head van elk html document de volgende 'viewport-regel' worden opgenomen:

De 'viewport-regel' <meta name="viewport" content="width=device-width, initial-scale=1">

Zonder deze regel probeert de browser de hele website op het mobieltje in beeld te brengen, waardoor die onleesbaar klein wordt.

Toelichting bij de regel:

viewport: het deel van de webpagina dat de gebruiker kan zien in het venser
width=device-width: de breedte van de viewport wordt gelijk gemaakt aan die van het apparaat (het betreffende mobieltje).
initial-scale=1: als de pagina in beeld komt wordt niet in- of uitgezoomd. (De gebruiker kan dit wel doen als de pagina eenmaal in beeld is.)

Pixeldichtheid

Bij mobieltjes staan de pixels, de beeldpunten veel dichter op elkaar dan bij computers en wat oudere laptops.
Is op een wat oudere laptop een afbeelding van 100px bijna 2 cm groot op het scherm, op de nieuwste telefoons is die afbeeling minder dan een halve cm groot.
Bij gebruik van de viewport-regel houdt de browser rekening met de pixeldichtheid om te voorkomen dat de pagina op mobieltjes nog steeds te klein wordt afgebeeld.

Opmerking:

Gebruik de meta-viewport regel alleen op responsive webpagina's.
Webpagina's die gemaakt zijn op een vaste breedte worden met de meta-viewportregel te breed afgebeeld: dan moet de gebruiker ook horizontaal scrollen!