Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Welke maateenheden gebruik je in responsive design?

Over responsive design en pixels, percentages, vw’s, em’s en rem’s...

Wie de responsive design templates van deze site wat nauwkeuriger bekijkt, ziet dat ik daarin veel vaker gebruik heb gemaakt van percentages en em-maten dan vroeger. Waar ik eerder praktisch alle maten van een site vastlegde in pixels, heb ik nu vaker gekozen voor percentages en em’s (hoewel de pixels niet helemaal verdwenen zijn). Waarom eigenlijk?

De belangrijkste reden is dat een onderdeel met een breedte in pixels niet mee van grootte verandert als je het scherm groter of kleiner maakt. Een blok met een breedte van 800 pixels blijft 800 pixels breed, of je dat nu op een breed beeldscherm bekijkt of op een tablet. (Dat wil trouwens niet zeggen dat die waarde van 800 pixels zich altijd vertaalt naar dezelfde centimeter-waarde: 800 pixels op een beeldscherm met een lage resolutie is breder dan diezelfde 800 pixels op een beeldscherm dat een hogere resolutie heeft.)

Percentages

Maar geef je de breedte van een onderdeel in percentages weer, dan varieert die breedte wél: een blok met een breedte van 80% van het scherm is – als je het zou opmeten met een lineaal – op een smartphone kleiner dan op een tablet, en heel veel kleiner dan wanneer het wordt bekeken op een breed beeldscherm. Maar… de verhouding tussen het blok en het scherm als geheel blijft steeds dezelfde. Dat is dus de reden dat ik bij het ontwerpen van de templates vooral gebruik heb gemaakt van percentages.

Kies je voor breedtes in percentages, dan zit er overigens wel een addertje onder het gras: geef je een onderdeel een breedte uitgedrukt in een percentage, dan heeft die waarde altijd betrekking op het element waarvan het deel uitmaakt. Dat laatste klinkt nogal vaag, dus ik zal het even proberen uit te leggen:

Stel dat je bepaalt dat je website als geheel maximaal 80% van de breedte van het beeldscherm mag innemen. Die waarde van 80% heeft dus betrekking op de breedte van het beeldscherm. Maar stel dat je binnen dat websitevak een verticale menubalk wil opnemen. Als je de breedte van die menubalk ook vastlegt in percentages – bijvoorbeeld 30% – dan wordt dat laatste percentage berekend in verhouding tot het vak waarbinnen je website wordt vertoond, en niet in verhouding tot het volledige beeldscherm.

Vw’s

Even voortbordurend op de alinea hiervóór: als je wilt dat een bepaald element altijd 50% van de breedte van het beeldscherm in beslag neemt, en niet 50% van het element waarbinnen het zich bevindt, dan gebruik je de eenheid vw. Deze letters staan voor viewport width. Stel je bijvoorbeeld in dat een bepaald gedeelte van je site een breedte krijgt van 50vw, dan neemt dit gedeelte altijd 50% van de beeldschermbreedte in.

Em’s en rem’s

Een andere eenheid die je in de responsive design templates veel tegenkomt, is de eenheid em. Hoe groot 1em is, hangt af van de fontgrootte. Bij standaard browserinstellingen is 1em 16 pixels (1em is ongeveer de grootte van de hoofdletter M). Waarom dan toch kiezen voor een waarde in em’s in plaats van een waarde in pixels? Omdat je dan veel sneller aanpassingen kunt doen aan je site!

Bijvoorbeeld: je gebruikt verschillende lettergroottes op je site voor de koppen, subkoppen en paragrafen. Heb je die groottes vastgelegd in pixels en wil je ze allemaal iets groter laten weergeven, dan moet je ze stuk voor stuk langslopen en de fontgrootte ervan veranderen. Maar had je in je stylesheet vastgelegd dat de standaardgrootte van elke letter 1em was (body {font-size: 1em;}), en had je de grootte van de verschillende koppen, subkoppen en paragrafen ook vastgelegd in em’s (zoals 1.5em voor een gewone kop, 1.2em voor een subkop, en 0.8em voor de alineateksten), dan worden die allemaal direct groter of kleiner weergegeven als je de standaardgrootte van je font verandert van 1em in 1.2em of 0.8em. De verhoudingen tussen die koppen onderling blijven dus gewoon intact.

Voor em’s geldt hetzelfde als voor percentages: de grootte van iets wat je in em’s vastlegt hangt af van het element waarbinnen het zich bevindt. Dus heb je de lettergrootte van het article-element op je webpagina vastgesteld op 1.6em, en stel je de lettergrootte van de paragrafen daarbinnen in op .8em, dan zullen de letters binnen de paragraaf 1.28em groot woorden (=1.6*.8).

In feite zijn rem’s zijn hetzelfde als em’s, alleen worden die berekend aan de hand van de grootte die is vastgelegd voor het html- of body-element van je site (meestal 1em).

Behalve de lettergrootte, kun je ook andere zaken goed in em’s of rem’s vastleggen, zoals de marges rond paragrafen, of de ruimte tussen de verschillende onderdelen van een lijst.

Pixels

Zijn pixels dan helemaal overbodig geworden? Nee, dat niet. Een rand (om een afbeelding bijvoorbeeld), kun je nog altijd het beste in pixels vastleggen, en niet in percentages of em’s. En ook andere onderdelen die altijd dezelfde breedte of hoogte moeten houden, ongeacht de breedte van het beeldscherm.

Dus om even kort samen te vatten:

  • leg de breedte van grotere onderdelen ((tekst)blokken, afbeeldingen, tabellen) vast in percentages of vw’s.
  • gebruik em‘s of rem’s voor de grootte van letters in koppen en paragrafen, en ook voor gerelateerde zaken als de marges en inspringingen van koppen, paragrafen en lijsten
  • gebruik pixels voor randen (borders) en alle andere onderdelen die altijd dezelfde breedte of hoogte moeten hebben
  • gebruik geen zogenaamde ‘absolute’ eenheden als mm (milimeters), cm (centimeters), in (inches) of pt (points) – de enige plaats waar je deze nog kunt gebruiken is in een stylesheet dat speciaal bedoeld is voor de opmaak van pagina’s die worden afgedrukt