Mijn-eigen-website.nl

Welke maateenheden gebruik je in responsive design?

Over responsive design en pixels, percentages en em'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 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.)

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 onderdeel 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.

Maar even genoeg over percentages. Een andere waarde die je in de responsive design templates veel tegenkomt, is de waarde em. Hoe groot 1em is, hangt af van de fontgrootte. Bij standaard browserinstellingen is 1 em 16 pixels (1em is ongeveer de grootte van de hoofdletter M). Waarom dan toch kiezen voor een waarde in em 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.8 em 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.

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

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.

Dus om even kort samen te vatten:

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid