Baukastensystem für flexible Layouts
Website Styleguide
Das CMS-Baukastensystem basiert auf einem flexiblen Raster aus zwölf Spalten, das die Grundlage für alle Inhaltslayouts bildet. Dieses 12-Spalten-Grid ermöglicht es, Inhalte in unterschiedlichen Breiten zu platzieren, indem Elemente über 1, 2, 3 oder 4 Spalten hinweg aufgespannt werden.
12 Spalten ermöglichen einspaltige, zweispaltige, dreispaltige und vierspaltige Layouts. So lassen sich flexibel unterschiedlichste Inhalte darstellen.
Grid-System
Auf diese Weise entstehen vielfältige Layoutvarianten – von schmalen Textelementen bis hin zu vollbreiten Bild- oder Modulbereichen. Durch die klare Struktur des Rasters bleiben Seiten übersichtlich, visuell ausgewogen und leicht anpassbar. Gleichzeitig unterstützt das System ein responsives Verhalten: Spalten können sich je nach Bildschirmgröße neu anordnen oder untereinander fließen, sodass Inhalte auf allen Endgeräten optimal dargestellt werden.
Zum besseren Verständnis des Gridsystems und der darauf resultierenden frei definierbaren Layoutspalten lassen sich diese im Manual sichtbar schalten. Das erlaubt die Analyse aller Layouts und Beispielseiten des Styleguides. Die Funktion lässt sich über nachfolgende Buttons oder über die Buttons in der Navigationsleiste ein- und ausschalten.
Seitenaufbau
Der Aufbau jeder Seite folgt dem klaren Prinzip Header – Content – Footer. Der Header bildet den oberen Bereich der Seite und enthält Navigation, Logo oder andere zentrale Elemente. Wird für eine Seite kein eigener Header definiert, übernimmt das System automatisch den Header der übergeordneten Seite, sodass ein konsistentes Erscheinungsbild gewährleistet ist.
Der Content-Bereich ist der zentrale Teil der Seite, in dem die eigentlichen Inhalte platziert werden. Hier wird das Seitenlayout über Inhaltscontainer aufgebaut. Diese Raster-Elemente definieren die jeweiligen Layoutspalten, beispielsweise einspaltig, zweispaltig oder dreispaltig. In jede Spalte werden anschließend die gewünschten Inhaltselemente eingefügt, wie Texte, Bilder, Linklisten oder andere Module. Durch diese Struktur lassen sich flexible und übersichtliche Layouts erstellen, die konsistent bleiben und sich leicht anpassen lassen.
Der Footer hingegen ist auf allen Seiten identisch und wird vom Bearbeiter nicht verändert. Er enthält Elemente wie Kontaktinformationen, rechtliche Hinweise oder die sekundäre Navigation und sorgt dafür, dass am unteren Seitenende ein einheitlicher Abschluss jeder Seite gewährleistet ist.
Content
Content-Container sind die grundlegenden Rasterelemente, mit denen das Seitenlayout innerhalb des Content-Bereichs strukturiert wird. Sie definieren die Spaltenaufteilung und erlauben flexible Kombinationen wie gleichmäßige Spalten (1:1, 1:1:1, 1:1:1:1), aber auch asymmetrische Aufteilungen wie 2:1 oder 1:2, bei denen breite Hauptspalten und schmalere Marginalspalten entstehen. So lassen sich Inhalte gezielt anordnen und verschiedene Layoutvarianten innerhalb einer Seite realisieren.
Weiterhin lassen sich – insbesondere bei einspaltigen Containern – Einzüge links und rechts definieren, sogenannte X-Offsets. Ein X-Offset von 1:10:1 hat einen Einzug von einer Grid-Spalte links und rechts. Der Inhalt läuft dann über 10 Gridspalten (statt über 12). Ein X-Offset von 2:8:2 hat demzufolge einen Einzug von zwei Grid-Spalten links und rechts. Der Inhalt läuft in diesem Fall nur über 8 Grid-Spalten. Dieser Offset wird beispielsweise für Vortexte genutzt, damit sie besser lesbar sind und versetzt zur Headline angeordnet werden.
Neben der Spaltenstruktur bieten Content-Container auch die Möglichkeit, Hintergrundfarben zuzuweisen. Dadurch können Inhalte in klar abgegrenzten horizontalen Streifen dargestellt werden, was die visuelle Hierarchie stärkt und die Lesbarkeit verbessert. Als Hintergrundfarben kommen hauptsächlich Weiß (Standard) sowie abgestufte Grautöne zum Einsatz, um unterschiedliche Bereiche optisch voneinander zu trennen, ohne dass das Gesamtbild unruhig wirkt.
Praxis-Tipp: Bei der Vergabe von Hintergrundfarben sollte darauf geachtet werden, dass die Farbwahl konsistent bleibt. Einfarbige Container eignen sich für zusammenhängende Inhalte, während abwechselnde Grautöne für unterschiedliche Sektionen genutzt werden, um horizontale Streifen zu erzeugen. Auf diese Weise lassen sich Abschnitte klar voneinander abgrenzen, ohne dass das Layout überladen wirkt.
In den einzelnen Spalten der Content-Container werden anschließend die Inhaltselemente platziert. Durch diese Kombination aus Rasterstruktur und flexibler Farbgebung lassen sich moderne, klare und konsistente Seitenlayouts umsetzen.
Nachfolgend findet sich eine Übersicht der Hintergrundfarben, die einem Content-Container zugewiesen werden können.
Hintergrundfarbe rot
Nur für spezielle Anwendungen mit Signalcharakter. Wird in der Regel nicht für die Seitengestaltung verwendet, sondern für spezielle Teaser-Elemente wie auf der Startseite.
Hintergrundfarbe Weiß – ohne Eintrag (als Standardwert)
Standardeinstellung für Container: weißer Hintergrund
Hintergrundfarbe hellgrau1
Hellste graue Fläche. Standardwert für Abgrenzung zu weißem Hintergrund.
Hintergrundfarbe hellgrau2
Wird benötigt als Abgrenzung zu Flächen mit der Farbe hellgrau1
Hintergrundfarbe Startseite rot
Rote Fläche mit 80% Deckung (20% Transparenz). Wird ausschließlich für Elemente verwendet, die über einem Hintergrundbild liegen, wie beispielsweise bei der Header-Galerie der Startseite. Durch die Transparenz kann das Hintergrund durch die Farbfläche durchscheinen.
Hintergrundfarbe Startseite grau
Graue Fläche mit 80% Deckung (20% Transparenz). Wird ausschließlich für Elemente verwendet, die über einem Hintergrundbild liegen, wie beispielsweise bei der Header-Galerie der Startseite. Durch die Transparenz kann das Hintergrund durch die Farbfläche durchscheinen.
Neue Seiten erstellen
Bevor eine neue Seite im Backend angelegt wird, ist es hilfreich, zunächst die Inhalte zu analysieren, die auf der Seite erscheinen sollen. Überlegen Sie: Welche Texte, Bilder oder andere Elemente sollen gezeigt werden, und wie lassen sie sich am besten anordnen.
Die Seitenüberschrift wird in einem einspaltigen Container über die gesamte Breite gesetzt. Der Vortext folgt in einem ebenfalls einspaltigen Container, der jedoch seitlich einen kleinen Abstand hat (X-Offset 2:8:2), damit der Text optisch aufgelockert wird. Darunter werden dann die eigentlichen Inhalte platziert.
Eine pauschale Seitenstruktur gibt es nicht, da sie von den jeweiligen Inhalten abhängt: Wie viele Textblöcke gibt es, wie lang sind die Texte, wie viele Bilder sollen eingebunden werden und wo sollen sie stehen? Daher empfiehlt es sich, vorab eine Layoutstruktur zu entwerfen, die zu den geplanten Inhalten passt.
Um den Arbeitsaufwand zu erleichtern, können Inhaltselemente oder komplette Seiten kopiert und angepasst werden. So lassen sich bewährte Layouts und Strukturen schnell für neue Seiten übernehmen. Die Beispielseiten in diesem Manual dienen dabei als Orientierung.
Praktische Hinweise:
- Texte lassen sich besser lesen, wenn sie auf mehrere Spalten aufgeteilt werden, statt über die volle Breite zu laufen.
- Bilder im Hochformat passen in schmalere Spalten, Querformatbilder eher in breitere Spalten.
- Wenn mehrere Bilder nebeneinander stehen sollen, empfiehlt sich ein separater Container, in dem die Bilder auf gleiche Formate zugeschnitten werden. Typo3 bietet dafür das Crop-Tool, um einheitliche Bildgrößen zu gewährleisten.
- Achten Sie beim Einpflegen der Inhalte auf Barrierefreiheit, z. B. durch aussagekräftige Bildbeschreibungen und gut erkennbare Links (siehe dazu den separaten Abschnitt zur Barrierefreiheit).