Überschriften: Hero, Header, Subheader
Überschrift im Subheader
Für den Subheader besteht die Möglichkeit eine Art Teaser zu formulieren, der die Überschrift ergänzt. Der Bereich könnte aber auch frei gelassen werden.
Uns stehen 3 Überschriften-Elemente* zur Verfügung:
- Der Hero, der mit mehreren Bildern zum Hero-Slider wird, für die Startseite (H1).
- Der Header, der mit einem Bild hinterlegt oder als einfacher blauer Balken angelegt werden kann (H1).
- Der Subheader, der in der Regel dem Header nachgeordnet wird (H2).
Grundsätzlich kann für jedes Content-Element eine Überschrift angelegt werden. Als sichtbare Überschrift ist dies fürs Frontend allerdings selten sinnvoll. Im Backend (als versteckte Überschrift) kann es jedoch helfen, sich zu orientieren und Ordnung zu halten.
*Zusätzlich können aber auch in einem einfachen Text-Element (Zwischen-)Überschriften angelegt werden.
Auch Akkordeon-Titel sind Überschriften (H2).
Für alle Überschriften gilt: Im Sinne der Barrierefreiheit müssen sie in korrekter Hierarchie eingesetzt werden. Eine Seite muss immer mit einer H1-Überschrift beginnen. Alle nachfolgenden Überschriften müssen in einer Hierarchie-Ebene logisch zum Inhalt passen, zum Beispiel:
H1: Arbeitsunfähigkeit
H2: Was bedeutet "arbeitsunfähig"?
H3: Wenn eine Erkrankung verhindert, dass Sie Ihre berufliche Tätigkeit ausüben können
Text: Ausführung zur H3
H3: Wenn die Ausübung Ihrer beruflichen Tätigkeit Ihre Erkrankung verschlimmern könnte
Text: Ausführung zur H3
H2: Folgen von Arbeitsunfähigkeit
H3: Lohnausfall
Text: Ausführung zur H3
So könnte eine beispielhafte Hierarchie aussehen. Aber natürlich ist es möglich mit weniger Überschriften auszukommen. So lässt sich auch fragen, ob der Subheader, der lediglich dem Ausspielen eines alternativen Titels und evtl. noch eines Teasers dient, im Sinne der Barrierefreiheit wirklich sein muss oder allenfalls ein dekoratives Füllelement ist.
Die Content-Elemente Header und Hero/Hero-Slider verwenden immer eine H1-Überschrift. Deswegen sollten sie auch nur zu Beginn einer Seite verwendet werden und nicht mitten drin.
Die Überschrift im Subheader ist grundsätzlich eine H2-Überschrift.
Akkordeon-Überschriften sind ebenfalls immer H2-Überschriften. Demnach ist es nicht sinnvoll auf einer Seite einen Subheader und ein Akkordeon (das eigentlich dem Subheader untergeordnet sein müsste) anzulegen.
Bildmaße für Hero und Header
Ein Bild, das in einem Hero oder einem Header eingesetzt werden soll, sollte die Maße
1620 x 680 px
haben bzw. den Proportionen 81:34 entsprechen.
Weiterhin ist zu beachten, dass im Bild eingearbeiteter Text nicht von einem Screenreader vorgelesen werden kann. Der Text sollte also entweder Bestandteil des (zwingend notwendigen) Alt-Texten zum Bild sein. Oder noch besser: in einem Textfeld ausgegeben werden (z.B. als Überschrift).
Grundsätzlich sind unsere Seiten immer alle responsive – also auch die verwendeten Bilder. Das bedeutet, dass sich die Formate je nach Ausgabe-Bildschrim verändern: Ein Bild wird auf einem Desktop anders ausgegeben als auf einem Handy und selbst von Desktop zu Desktop und von Handy zu Handy gibt es so viele Unterschiede wie es Displays gibt. Das sollte auch beim Bildinhalt bedacht werden! Also wählen Sie ein Bild, das einen entsprechenden Verschnitt verkraftet.
Anleitung
Anleitung: Hero und Hero-Slider
Hero und Hero Slider
Ein Hero ist, im Wording des gemeinsamen CMS, ein Header für die Startseite, nicht für die Unterseiten (das wäre des Header bzw. Seitentitel).
Der Hero wird immer mit einem Foto (idealerweise aus dem CD-Fotopool, Passwort: md-fotopool) befüllt.
Es ist Ihnen überlassen, wird aber dringend empfohlen, den barrierefreien Modus auszuwählen. Dies hat zur Folge, dass eingefügte Überschriften auf einem blauem Feld platziert werden und damit den Kontrastanforderungen genügen. (Dieses Design wurde 2023 in der Medienarbeitsgruppe konsentiert.)
In der Regel werden Sie bereits einen Hero auf der Startseite haben und gelegentlich das Bild austauschen wollen. Dazu gehen Sie in den bestehenden Hero und löschen oder ergänzen den bestehenden Slide (1. Reiter: Allgemein, unten). Eine Slideshow ist erst ab 2 Slides möglich. Dann erst erscheinen auch die Pfeile zum Navigieren der Slides im Hero.
Sollten Sie aus irgendeinem Grund einen neuen Slider anlegen, gehen Sie in das Feld Hero (das 1. Feld der Seite) und klicken Sie Neues Inhaltselement erstellen an. Wählen Sie in dem sich öffnenden Menü den Reiter Teaser und Slider und wählen Sie Hero aus.
Legen Sie anschließend einen Slide und ggf. eine Überschrift an. Das Anlegen der Überschrift ist nicht zwingend erforderlich, wird aber empfohlen, um eine sinnvoll platzierte H1 als Seitenüberschrift zu haben, z. B. "Willkommen beim Medizinischen Dienst". Die Überschrift lässt sich mit einem Link belegen, was insbesondere für einen schnellen direkten Einstieg in ein (aktuelles) Thema hilfreich ist.
Das Bild wird im 2. Reiter des Slides Bild angelegt und kann aus der Dateiliste geladen oder vom lokalen Laufwerk hochgeladen werden.
Die Slideshow läuft nie automatisiert, da dies ein Verstoß gegen die Barrierefreiheit wäre. User müssen also selbstständig aktiv sliden, damit sie alle Slides sehen.
Anleitung
Anleitung: Header
Header
Ein Header ist eine prominente Seitenüberschrift.
Grundsätzlich gibt es vier Header-Typen:
- hellblaues Banner mit weißer H1-Überschrift
- hellblaues Banner mit Icon rechts
- Foto-Header
- Foto-Header mit reduzierter Bildhöhe
Obwohl bei allen Banner-Typen die Möglichkeit besteht, eine reduzierte Bildhöhe anzuwählen, greift dies nur beim Foto-Header. Die Möglichkeit wurde ergänzt, weil die Foto-Header teilweise sehr einnehmend sein können und der eigentliche Seiteninhalt entsprechend weit nach unten verschoben wird.
Anleitung
Anleitung: Header
Zum Anlegen eines Headers gehen Sie in das Feld Hero (das 1. Feld der Seite) und klicken Sie Neues Inhaltselement erstellen an. Wählen Sie in dem sich öffnenden Menü den Reiter Text & Bild und wählen Sie Header / Seitentitel aus.
Anschließend legen Sie die Seitenüberschrift fest.
Falls Sie ein Icon oder ein Bild verwenden möchten, gehen Sie in den 2. Reiter des Header-Elements Bild/Icon:
Wählen Sie entweder ein Icon aus dem Drop-Down-Menü aus. Die verfügbaren Icons sind alphabetisch geordnet.
Oder gehen Sie auf Mediendatei hinzufügen und wählen Sie ein Foto aus der Dateiliste aus oder laden Sie eines vom lokalen Laufwerk hoch. Es empfiehlt sich, die reduzierte Bildhöhe anzuwählen.
Auswahl eines Icons
Auswahl eines Bildes (Mediendatei hinzufügen) öffnet Dateiliste