Zum Inhalt springen

Ü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:

  1. hellblaues Banner mit weißer H1-Überschrift
  2. hellblaues Banner mit Icon rechts 
  3. Foto-Header
  4. 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