Darstellung
Breakpoints
Das Setzen von Breakpoints ermöglicht eine flexible und automatische Anpassung des Layouts auf das jeweilige Anzeigegerät. Je nach Breakpoint variieren fixe und variable Werte. Dies lässt ein flexibles und responsives Gestaltungsraster zu.
Die definierten Breakpoints wenden wir für Webseiten, Web-Applikationen und Services an.
Grundlayout
Das Gestaltungsraster der Website ist auf einem Spaltensystem aufgebaut. Das Raster ist immer zentriert im Inhaltsbereich und verfügt über einen variablen Einzug sowie über eine variable Spaltenanzahl abhängig von der Viewport-Breite.
Die maximale Ausdehnung ist 1440px, darüber hinaus sind nur noch die Hintergrundelemente auf die volle Breite hinausgezogen. Die Möglichkeiten des Layouts in den Spalten sind in allen Variationen möglich. Die Mindestbreite für Gestaltungselemente beträgt zwei Spalten.
Verwendung
Layout für Websites
Grundaufbau horizontal
Für das Layout das kantonalen Webauftritts und von Microsites verwenden wir 12, beziehungsweise 6 Spalten auf mobilen Geräten (< 600px). Die Spalten sind weit voneinander getrennt.
Grundaufbau vertikal
- Hauptnavigation
- Seitenkopf
- Inhaltselemente
- Footer oder Footer minimal
Layout für Services
Services sind meist Formularprozesse oder Datenverzeichnisse. Sollen Services auch unabhängig vom kantonalen Webauftritt zugänglich sein, können wir diese mit einem vereinfachten Layout zur Verfügung stellen.
Das Layoutraster entspricht dem für Webseiten. Einzig der Grundaufbau unterscheidet sich. In Services wird typischerweise mit Inhaltsnavigationselementen (Stepper, Akkordeon, Filter usw.) navigiert.
Services sind wie folgt aufgebaut:
- Seitenkopf für Services
- Inhaltsbereich mit Komponenten wie Formulare, Filter, Listen usw.
- Kontakt
- Footer für Service
Layout für Webapplikationen einspaltig
Dieses Grundlayout setzen wir für funktionale Webapplikationen ein, wie zum Beispiel eigenständige Kartenapplikationen oder Verwaltungstools.
Das einspaltige Layout für Applikationen verwendet 12 Layoutspalten, beziehungsweise 6 Spalten auf mobilen Geräten. Die Spalten sind eng gesetzt.
Applikationen sind wie folgt aufgebaut:
- Applikationsheader mit Logo, Navigation (optional) und Metanavigation (optional)
- Inhaltsbereich mit Komponenten wie Karten, Filter, Listen u.s.w.
- Applikations-Footer
Layout für Webapplikationen zweispaltig
Das Layout von Applikationen kann im Inhaltsbereich mehrspaltig (mehrere Scrollbereiche) gelayoutet werden. So sind Layouts mit seitlicher Navigation oder Funktions- und Filterspalten möglich. Die Navigationsspalte wird bei kleineren Screens (< 1024px) in eine Menu Navigation zugeklappt.
Applikationen werden wie folgt aufgebaut:
- Applikationsheader mit Logo, Navigation (optional) und Metanavigation (optional)
- Inhaltsbereich mit Navigationsspalte links und Inhaltsspalte rechts
- Applikations-Footer in der Inhaltsspalte rechts (Hauptscrollbereich)
Kontakt
Digitale Verwaltung - ZHweb
Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!