Inloggen Account aanvragen

2. Flexibel basisgrid

De basisopbouw van alle pagina’s is gelaagd. De achtergrondlaag is de gehele ruimte binnen het venster en is wit of lichtgrijs. De contentlaag kent diverse varianten:

  • Achtergondlaag wit; contentlaag wit
  • Achtergrondlaag lichtgrijs; contentlaag wit
  • Achtergrondlaag wit met extra navigatiebalk bovenin; contentlaag wit

Tussen de content van de pagina en de visuele referentie aan het beeldmerk is altijd 50 pixels witruimte. Eventuele ‘footer’ content moet boven deze 50 pixels witruimte staan. Disclaimer en Privacy informatie komt op de lichtgrijze achtergrondlaag. De totale contentlaag staat altijd gecentreerd in het browservenster.

Varianten basisgrids

Er zijn 2 varianten van basisgrids voor websites:

  • 1024 pixels: 12 kolommen van 60 pixels met marges tussen de kolommen van 20 pixels.

  • 1280 pixels: 12 kolommen van 80 pixels met marges tussen de kolommen van 20 pixels.

Je kunt de kolommen samentrekken om verder te variëren in de layout. Alle layout varianten die op het basisgrid van 12 kolommen passen zijn toegestaan. Vermijd te lange regels in een tekstkolom om de leesbaarheid van een alinea prettig te houden.

De basis voor Responsive Web Design bestaat uit een flexibel basisgrid (fluid grid). De maatvoering hierbij is relatief. Dus niet meer in pixels of punten. Hierdoor past de layout zich aan de schermbreedte aan. Dit kun je op verschillende manieren bereiken:

  • Varieer het aantal kolommen.
  • Pas de breedte van een of meerdere kolommen aan.
  • Verbreed of versmal de kolommen.