Der Webseite liegt ein 6-spaltiges Gestaltungsraster zugrunde. Alle Elemente sind innerhalb des Rasters angeordnet und bilden so eine harmonische Einheit. Alle vordefinierten Module orientieren sich ebenfalls an diesem Raster.
Die Anzahl der Spalten variiert je nach Bildschirmauflösung (auf dem Smartphone sind es z.B. nur zwei Spalten). Dementsprechend brechen die Inhalte um und passen sich dynamisch der Größe des Ausgabegeräts an.
Bei einer responsive Webseite werden verschiedene Breakpoints definiert (Desktop, Laptop, Tablet Portrait + Landscape, Smartphone Portrait + Landscape). Nach diesen Breakpoints richtet sich u.a. die Anzahl der Spalten.
| Breakpoint | Breite |
|---|---|
| xs | 520 Pixel |
| sm | 1050 Pixel |
| md | 1280 Pixel |
| lg | 1350 Pixel |
Bei einer Monitorgröße von 1920x1080px beträgt die nutzbare Fläche 1350px. Dies entspricht 100% Fläche, die für Inhalte zur Verfügung steht. Diese Maße sind alle relativ und verändern sich abhängig zur Größe des Ausgabegerätes.
Die jeweiligen Spalten werden sofern nicht anders gewünscht stets nebeneinander dargestellt:
Die Spalten werden umgebrochen und untereinander dargestellt:
Der Content wird ursprünglich in 2 Varianten angezeigt. Auf Seiten ohne eine Seitennavigation entspricht der Content immer 100% der Seitenbreite.
