Sie sind hier: Start Strukturelemente und Seitenaufbau Inhaltsbereich
Theme "lightBlue" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/%VERSION_ALIAS%/css/app.css" -->

<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/%VERSION_ALIAS%/css/themes/lightBlue.css"/>
                

Inhaltsbereich

Der Inhaltsbereich ist Träger der Hauptinformationen und kann in bis zu maximal 4 Spalten aufgeteilt werden. Sollten Social-Media-Icons (siehe Kapitel 5.4 Icons) zum Einsatz kommen, so können diese unter dem Suchfeld innerhalb der Marginalspalte (der sehr markanten, rechten Spalte) im Inhaltsbereich platziert werden.

Beispielhafte Abbildung des Inhaltsbereichs
Position / Platzierung
  • Der Inhaltsbereich ist das 8. Element sowie Hauptelement der Seite. Er befindet sich in der Mitteder Seite.
  • Das Element beginnt innerhalb der 6. Zeile in der 1. Spalte.
  • Sämtliche Inhalte an den äußeren Seitenbereichen beginnen und enden an den Seiten-Fluchtlinien.
Aufbau
  • Die Breite beträgt 12 Spalten. Die Höhe und der Aufbau können flexibel gestaltet werden.
  • Der Inhalt auf einer optischen Zeile kann maximal auf 4 sichtbare Spalten aufgeteilt werden.
  • Die Schriftstile folgen dem definierten Schriftbild.
  • Die Marginalspalte wird durch eine Linie (1px) in HELLGRAU abgegrenzt.
Spezifische Anforderungen
  • Die Spaltentrennung bei Inhalten ist durch Konturlinien (1px breit) in HELLGRAU möglich.
  • Fließtext soll maximal über ¾ der Seitenbreite angezeigt werden (Empfehlung 80-90 Anschläge pro Zeile).
  • Bei Beiträgen mit mehr als 4 Absätzen sind Zwischenüberschriften einzufügen.
  • Die Mindesthöhe des Inhaltsbereiches beträgt 400px.
Responsive Design
  • Durch das Umbrechen der Inhaltselemente auf kleineren Geräten muss darauf geachtet werden, dass die Hauptinformation der Seite in der Lesereihenfolge führend bleibt.
  • Weiterführende Inhalte sollten sich hinter der Hauptinformation einreihen (bspw. die Marginalspalte).
  • Schutzabstände bei kleinen Viewport (siehe Kapitel 2.5.3 Seitenbegrenzung, Spalten- und Schutzabstände) werden automatisch vom Framework berechnet.
Barrierefreiheit
  • Die Textstruktur erfolgt mittels validem HTML (Überschriften, Absätze usw.).
  • Markante und funktionale Textstellen sind nach den Vorschriften der BITV, bspw. Betonungen mit „<strong>“ statt „<b>“ etc., auszuzeichnen.
Aktionsverhalten

Buttons und Hyperlinks zur Interaktion („Like“, „Teilen“, „Drucken“,…) werden rechts unterhalb des Inhalts als Fußnote angezeigt. Dabei sind die Icons an die Schriftgröße der Fußnote anzupassen.

Zusatzinformationen

Häufig wird die Marginalspalte im rechten Bereich eingesetzt, um Navigationshilfen zu speziellen oder weiterführenden Inhalten, bspw. Kontaktinformationen oder Teaser, zu ermöglichen. Diese Leiste ist kein fest vorgeschriebener Bestandteil des Seitenaufbaus und ein reines Gestaltungsmittel für den Inhaltsbereich. Des Weiteren gilt:

  • Bilder sowie Videos oder Tonaufnahmen sollten bedacht eingesetzt werden (siehe Kapitel 5. Komponenten).
  • Der Content-Bereich beinhaltet keine seitenübergreifende und inhaltsunabhängige Navigation.