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. 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.

Beim Aufbau von Layouts spielen heute nicht nur optische Aspekte eine Rolle – ebenso wichtig ist die Barrierefreiheit. Damit Inhalte für alle Menschen verständlich und nutzbar sind, müssen Inhalte klar strukturiert werden. Ein wesentlicher Bestandteil ist dabei die richtige Reihenfolge der Überschriften. Jede Seite benötigt zuerst eine eindeutige Hauptüberschrift (H1), die das Thema der Seite beschreibt. Darunter folgen Abschnittsüberschriften der Ebene H2, anschließend – falls nötig – weitere Unterebenen wie H3 oder H4. Diese Reihenfolge darf nicht übersprungen werden, da Screenreader und andere Hilfsmittel diese Struktur nutzen, um Besucherinnen und Besuchern eine Orientierung zu geben. Eine saubere Hierarchie verbessert somit nicht nur die Lesbarkeit, sondern stellt sicher, dass alle Inhalte barrierefrei zugänglich bleiben.

• Gibt es genau **eine** H1?
• Beginnen alle Inhalte logisch mit H2, nicht mit H3 oder H4?
• Sind die Hierarchie-Ebenen in der richtigen Reihenfolge (ohne Sprünge)?
• Beschreiben Überschriften klar, worum es im folgenden Absatz geht?
• Bleibt die Struktur auch bei komplexeren Seiten nachvollziehbar?

Diese Leitlinien helfen dabei, Inhalte klar zu gliedern, verständlich zu halten und für alle Nutzerinnen und Nutzer zugänglich zu machen.

Links sollten stets eindeutig und verständlich benannt werden, damit Nutzerinnen und Nutzer sofort erkennen, wohin sie führen. Verlinke daher niemals nur Wörter wie „hier“ oder „mehr“, da sie keinen Hinweis auf den Zielinhalt geben. Stattdessen sollte der Linktext den Inhalt beschreiben, zum Beispiel „Formular zur Anmeldung“ oder „Leitfaden für Bildnutzung“.

Weiterführende Inhalte – etwa Unterseiten oder Aktionen – werden idealerweise als gut sichtbare Buttons oder als separate Linkelemente dargestellt.

Im Fließtext sollten ausschließlich echte Querverweise gesetzt werden, also Links, die direkt zum Verständnis des aktuellen Inhalts beitragen.

Dateien wie PDFs werden nicht im Text versteckt verlinkt. Stattdessen sollten sie als klar gekennzeichnete Dateilinks oder in Form einer Dateiliste am Ende eines Textabschnitts bereitgestellt werden. Das erhöht die Übersichtlichkeit und hilft Nutzerinnen und Nutzern, schnell zu erkennen, was heruntergeladen wird.