Das Gestaltungsraster ist der unsichtbare Helfer in der Entwicklung konsistenter Designs. Es garantiert ein durchgängiges Layout über alle Seiten hinweg, minimierte Aufwände und höhere Qualität in den CSS-Regeln, schnellere Entwicklung von Prototypen, Reduktion der Komplexität und verlässliche Unterstützung aller Browser, die unterstützt werden müssen. Das Gestaltungsraster („Layout-Grid“) für Mobile, Tablet & Desktop übernimmt das etablierte 12er-Raster von Bootstrap.
Wann welches Gestaltungsraster benutzen?
Als stark an Formular-Prozessen orientierte Anwendungen benutzen das Zoll-Portal und die angeschlossenen Dienstleistungen im Inhaltsbereich <main> der Anwendungen ein einspaltiges Design, insbesondere auch, um den linearen Ablauf solcher Formulare und Formular-Prozesse zu betonen.
Bei eher von Textinhalten getriebenen Seiten (Hilfeseiten, Übersichtsseiten und Vergleichbare), die oftmals um eine zusätzliche Navigation, Filterkomponente oder eine Marginalspalte erweitert werden müssen, bietet sich hingegen ein 2-spaltiges Design in der Aufteilung 1/3 + 2/3 (= 4 + 8 Grid-Spalten) an.
Verhalten des Grids
Als besonders effizient hat sich erwiesen, den Aufbau der Seiten nach dem Prinzip „Mobile First“ vorzunehmen. Hierbei wird zunächst die mobile, oftmals einspaltige Ansicht erstellt und darauf aufbauend danach die mehrspaltige Desktop-Version.
Das Design System trifft keine Annahmen, welche Geräte und Bildschirmgrößen Nutzende verwenden müssen, um die Anwendung nutzen zu können. Daher ist das Layout grundsätzlich fluid, d. h. dass innerhalb gewisser Grenzen die komplette Breite des jeweiligen Ausgabemediums ausgenutzt wird. Wird der Ausgabebereich verkleinert, passt sich der Inhalt bis zu definierten Punkten kontinuierlich an.
An diesen Punkten (Breakpoints) kann eine Anpassung des Layouts durch Umbrechen so erfolgen, dass eine optimale Nutzung des Ausgabemediums gewährleistet wird. Grenzen werden lediglich gesetzt, indem die Darstellung auf sehr großen Monitoren in der Breite so begrenzt wird, dass die Lesbarkeit der Inhalte gewährleistet, und eine Untergrenze definiert ist, ab der die Nutzung einer stark Formular- und Datentabellen-zentrierten Anwendung nicht mehr sinnvoll erscheint.
Ebenso möglich ist die fixe, nicht-liquide Bemaßung ganzer Masken mit den gängigen Breakpoints 576px, 768px, 992px, 1200px und 1400px, wenn die Inhalte und ihre Darstellung dies zwingend benötigen.
Ausrichtung und Positionierung in Grids und Sub-Grids
Das Gestaltungsraster teilt die verfügbare Fläche in Zeilen und Spalten. Dazu wird ein Container-Element zunächst in Zeilen (Rows) mit variabler Höhe aufgeteilt. Zellen des Rasters werden durch anteiliges Zusammenfügen von Spalten gebildet. Beispielsweise kann die Aufteilung 4/12 zu 8/12 oder 6/12 zu 6/12 betragen. Die aus Spalten und Zeilen gebildeten Zellen können wiederum durch Zeilen und Spalten geteilt werden (Schachtelung).
Insbesondere in Formularen definieren die eingesetzten Grid-Spalten die Breiten der enthaltenen Formular- und Text-Elemente, da diese selbst generell flexibel angelegt sind und sich auf den zur Verfügung stehenden Platz ausdehnen.
Platzierungen außerhalb des Rasters
Grundsätzlich müssen alle Elemente innerhalb einer Seite auch innerhalb ihres Gestaltungsrasters platziert werden. Ausnahmen von dieser Regel bestehen bei eigenständig gestalteten Bereichen wie dem Header und dem Footer der Seiten. Dynamische Elemente, die sich wie z. B. Navigationsmenüs, Dialoge, Fehlermeldungen und Tooltips über den Inhalt legen, stehen ebenfalls nicht im Raster.
Horizontale und vertikale Abstände und Stege
Abstände und Stege ergeben sich automatisch aus der Verwendung der Grid-Klassen, da diese dort bereits definiert sind. Wenn keine horizontalen oder vertikalen Abstände erwünscht sind, so bietet das zugrunde liegende Bootstrap-Grid hierfür eine entsprechende Klasse, um diese aufzuheben (g-0).
Bitte beachten Sie, dass vertikale Intervalle grundsätzlich in der Einheit rem angegeben sind, horizontale Abstände hingegen oftmals in der Einheit px. Hintergrund ist einerseits ein gleichmäßiger typografischer Rhythmus auf der y-Achse durch die Einheit rem, andererseits wird damit verhindert, dass bei Schriftskalierung durch die Nutzenden der zur Verfügung stehende horizontale Raum unnötig verkleinert wird.