Hauptinhalt

Gestaltungsraster

Ein Gestaltungsraster ist ein unsichtbares System aus Linien, an dem die verschiedenen Gestaltungselemente einer Website ausgerichtet werden. Durch den Einsatz eines Gestaltungsrasters kann ein strukturiertes Layout umgesetzt werden. Zudem unterstützt das Raster bei der Weiter- und Neuentwicklung von Gestaltungselementen sowie Inhaltskomponenten.

Das definierte Gestaltungsraster berücksichtigt die Vielfalt der Auflösungen und Endgeräte. Inhalte werden entsprechend positioniert, Texte und Bilder neu skaliert. Dadurch kann für alle Endgeräte ein einheitliches Design gewährleistet werden.

Desktop

Raster Aufteilung 1220 px Desktop
Raster Desktop 1200px   © Sächsische Staatskanzlei

Tablet Landscape

Raster Aufteilung 960px Tablet Landscape
Raster Tablet Landscape 960px  © Sächsische Staatskanzlei

Tablet Portrait

Raster Aufteilung Tablet Portrait 750px
Raster Tablet Portrait 750px  © Sächsische Staatskanzlei

Smartphone

Raster Aufteilung Smartphone 100% des Displays
Raster Smartphone 100% des Displays  © Sächsische Staatskanzlei

Layoutspalten

Es gibt folgende Layout-Spalten:

  • ASide links
  • Content-Bereich
  • ASide rechts

Diese können vom Redakteur in 3 verschiedenen Stufen angezeigt werden:

  • 1-2-1: Content-Bereich doppelt so groß wie ASide
  • 1-3-0: keine rechte ASide und Content-Bereich 3-mal so groß
  • 0-4-0: keine ASide (außer den Seitentitel) und Content-Bereich geht über volle Breite

Gridspalten

Für die Layout-Spalten gibt es je nach Einteilung folgende Grid-Spalten-Einteilung:

1-2-1
ASide links: 14 Grid-Spalten
Content-Bereich: 30 Grid-Spalten + 1 Grid-Spalte Abstand links
ASide rechts: 14 Grid-Spalten + 1 Grid-Spalte Abstand links

1-3-0
ASide links: 14 Grid-Spalten
Content-Bereich: 45 Grid-Spalten + 1 Grid-Spalte Abstand links
ASide rechts: 0 Grid-Spalten

0-4-0
ASide links: 0 Grid-Spalten
Content-Bereich: 60 Grid-Spalten
ASide rechts: 0 Grid-Spalten

Grafische Darstellung der Layoutspalten
Grafische Darstellung der Layoutspalten  © Sächsische Staatskanzlei
zurück zum Seitenanfang