Het hele scherm

This column was published in the Dutch, paper version of Web Designer Magazine. It’s in Dutch. De manier waarop we websites ontwerpen is de laatste jaren radicaal veranderd. En de komende jaren gaat die verandering nog wel even door. Onze aandacht ging tot voor kort voornamelijk uit naar de interface: een duidelijke, grote header met een logo en een navigatie bovenaan de pagina, aan de linkerkant een subnavigatie; uiteraard maakten we ook minutieus vormgegeven — maar compleet nutteloze — widgets aan de rechterkant, en een rijke, volle footer. Dit alles zetten we op een grid in een zelfbedacht kader. Ik heb nooit zo goed begrepen waarom we dit kader wilden hebben: veel schermen zijn veel groter dan 960 pixels, en andere zijn weer veel kleiner. Deed het ons misschien aan het oude vertrouwde papier denken? Is het misschien makkelijker om in vaste formaten te denken? Of dwingen de tools die we tot nu toe gebruikten ons tot het denken in vaste formaten? Wellicht was het een combinatie van meerdere factoren. In elk geval ben ik heel blij dat we websites op een andere manier beginnen vorm te geven.

Content

In plaats van ons te concentreren op de interface, concentreren we ons nu meer en meer op datgene waar onze bezoekers voor komen: de content. In plaats van onze content als left-over in een rococo-lijst te proppen, geven we hem steeds meer vorm. En hierbij zijn we niet meer bang om het hele scherm te gebruiken. Op een foto-site zorg je er natuurlijk voor dat een foto zo hoog en zo breed is als de browser zelf! Waarom zou hij niet breder dan 960 pixels mogen zijn? Er komen steeds meer units en properties in CSS die ons meer controle geven over hoe zo’n plaatje dan het hele scherm vult. We kunnen bijvoorbeeld aangeven dat een plaatje altijd helemaal beeldvullend moet zijn met de background-size: cover. Als we het belangrijk vinden dat een plaatje in z’n geheel in beeld is dan kunnen we background-size: contain gebruiken. Mooie nieuwe properties die ons in staat stellen om het web echt op een andere manier te gaan vormgeven.

Units

Naast deze mooie nieuwe properties voor achtergrondplaatjes hebben we tegenwoordig ook de beschikking over een paar prachtige nieuwe eenheden. Ik heb het altijd bizar gevonden dat we zo’n stugge eenheid als de pixel gebruiken op zo’n chaotisch medium als het web. Van oudsher hebben we de beschikking over veel geschiktere eenheden zoals procenten en de em. Maar sinds kort hebben we ook de beschikking over prachtige nieuwe viewport relative units. Met deze units kunnen we er bijvoorbeeld voor zorgen dat een plaatje nooit hoger is dan 90% van de viewport; zo kan je aangeven dan de gebruiker moet scrollen. Als dat minder belangrijk is dan kan je er met deze unit zeer eenvoudig voor zorgen dat een onderdeel van je pagina precies even hoog is als het browserscherm.

Headings

Maar deze units worden wat mij betreft pas echt interessant als we ze gebruiken om headings mee vorm te geven. Nathan Ford laat in dit artikel over de relatie tussen typografie en layout zien hoe je deze nieuwe units kunt gebruiken om headings vorm te geven. Hij heeft deze zelfde techniek ook toegepast op deze prachtige site. Je ziet, als je je browserscherm groter en kleiner maakt, dat de hele vormgeving gerelateerd is aan de afmetingen van de browser, en niet aan de afmetingen van een willekeurig aantal pixels.

Spelen

Helaas zijn de viewport relative units nog een beetje buggy op sommige browsers. Safari op iOS wil 100vh soms wel eens interpreteren als 1000vh, wat natuurlijk bizar vervelend is. En Chrome heeft soms ook wat moeite met deze units, vooral tijdens het groter en kleiner maken van de browser. Maar dat neemt niet weg dat we alvast prima kunnen gaan spelen en experimenteren met de mogelijkheden. Ik kijk echt enorm uit naar de websites uit de nabije toekomst. Websites waarbij de content is vormgegeven, in plaats van de user interface. En websites die gebruik maken van de complete viewport, in plaats van een raar, willekeurig kader.