Online middelen zoals de website worden geoptimaliseerd voor verschillende beeldschermresoluties. Er is een groot verschil tussen deze verschillende schermformaten, waardoor je je voor een ontwerp niet kunt baseren op één grid. Daarom zijn er voor de website vooraf grids bepaald voor de verschillende gangbare formaten.
Voor de website zijn vooraf grids bepaald voor de verschillende gangbare formaten. Deze zijn nog wel gebaseerd op de grootte van de gridtegels in de DNA-balk. Omdat de schermen variëren in formaat varieert de grootte van de DNA-balk (en dus het grid) ook op de verschillende schermen.
Meer informatie vind je op de pagina Vormgeving websites.
Gridformaten per scherm
- Bij een mobiel scherm is een gridtegel 40 x 40 pixels (de DNA-balk is dan 40 x 240 pixels)
- Bij een scherm van 768 tot en met 1280 pixels breed is een gridtegel 96 x 96 pixels (de DNA-balk is dan 96 x 576 pixels)
- Bij een scherm vanaf 1440 pixels en breder is een gridtegel 1/12 x 1/12 deel van de horizontale schermresolutie.
Grid mobiel
Kenmerken:
- De DNA-balk (D) heeft een breedte van 40 pixels en staat met een marge van 25 pixels onder de titel van de pagina.
- Het logo heeft een minimale hoogte van 70 pixels. Dit is niet dezelfde hoogte als het grid.
Grid Tablet
- De DNA-balk heeft een breedte van 96 pixels.
- Wanneer de resolutie onder de 960 pixels breed is wordt de layout van 4 kolommen gebruikt.
- Wanneer de resolutie boven de 960 pixels breed is wordt de layout van 6 kolommen gebruikt.
- Logo heeft een vaste positie
- Hoogte logo (inclusief bounding box): 96 pixels
Grid desktop
- Tot een resolutie van 1440 pixels breed heeft de DNA-balk een breedte van 96 pixels.
- Wanneer de resolutie groter is dan 1440 pixels breed, heeft de DNA-balk een breedte van 1/12 deel van de horizontale resolutie.
- Logo heeft een vaste positie
- Hoogte logo (inclusief bounding box): 96 pixels
