Layout und Raster

Inhaltsverzeichnis

Hauptkapitel
Designsystem
Unterkapitel
Grundlagen
Gilt für
Websites & Webapplikationen (mit Login)

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

  1. Hauptnavigation
  2. Seitenkopf
  3. Inhaltselemente
  4. 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:

  1. Seitenkopf für Services
  2. Inhaltsbereich mit Komponenten wie Formulare, Filter, Listen usw.
  3. Kontakt
  4. 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:

  1. Applikationsheader mit Logo, Navigation (optional) und Metanavigation (optional)
  2. Inhaltsbereich mit Komponenten wie Karten, Filter, Listen u.s.w.
  3. 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:

  1. Applikationsheader mit Logo, Navigation (optional) und Metanavigation (optional)
  2. Inhaltsbereich mit Navigationsspalte links und Inhaltsspalte rechts
  3. Applikations-Footer in der Inhaltsspalte rechts (Hauptscrollbereich)

Kontakt

Digitale Verwaltung und E-Government – ZHweb

Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!

Mehr erfahren