Muster

Diese Musterseite dient als redaktionelle Orientierungshilfe für den Aufbau und die Pflege von Inhalten im CMS. Sie zeigt exemplarisch verfügbare Inhaltselemente und gibt Hinweise zur strukturierten und konsistenten Formatierung von Texten, Bildern und weiteren Inhalten.

Ziel ist eine einheitliche Gestaltung und eine klar nachvollziehbare Seitenstruktur – sowohl für Nutzende als auch für Suchmaschinen und assistive Technologien.

Gestaltungsraster

full
volle Breite
centered-wide
5% Außenabstand
centered
5% Außenabstand, 1440 px Maximalbreite
centered-narrow
5% Außenabstand, 952 px Maximalbreite

Stiloptionen im RTE für die Textgestaltung

H1 Headline

H2 Sub-Headline

H3 Sub-Sub-Headline

H4 Sub-Sub-Sub-Headline

Introtext – größer als normaler Fließtext.

Fließtext mit Link im Text und fettem Text lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Aufzählungspunkt Eins
  • Aufzählungspunkt Zwei
  • Aufzählungspunkt Drei

Zitat

externer Link in neuem Fenster
Download-Link
+49 761 123456
info@domain.tld
Pfeil-Link

Call-to-Action Link

Sektionen (Hintergrundfarbe) und Element-Abstände

„Standard“ mit kleinem Abstand davor und danach.

„Helle Hervorhebung“ mit mittlerem Abstand davor und danach.

„Standard“ mit großem Abstand davor und danach.

Inhaltselemente (vorgestellt auf separaten Beispielseiten)

Basiselemente

Menüelemente

Sonstige Features dieser Website

  • Tastaturbedienbarkeit – inkl. Schnellnavigation (Skiplinks zu Menü, Inhalt und Suche) für verbesserte Zugänglichkeit.
  • Info-Banner – bei Bedarf kann eine wichtige Mitteilung prominent am oberen Rand der Website eingeblendet werden. Der Banner erscheint auf allen Unterseiten, kann von Besuchenden geschlossen werden und bleibt darauf für die Dauer der aktuellen Sitzung ausgeblendet.
  • Dropdown-Navigation – zur übersichtlichen Navigation innerhalb der Website.
  • Responsive Darstellung – optimiert für verschiedene Endgeräte und Bildschirmgrößen.

  • Suchfunktion – für das schnelle Auffinden von Inhalten auf der Website.

  • Brotkrümel-Navigation – zur besseren Orientierung innerhalb der Seitenstruktur.
  • Automatisch generierte Sitemap (sitemap.xml) – für eine effizientere Indexierung durch Suchmaschinen.
  • To-Top Button – blendet sich automatisch ein

Redaktionelle Hinweise

Barrierefreiheit

  1. Alternativtexte für Bilder eingeben (entweder im Inhaltselement, oder im Modul "Dateiliste")
    Nicht verlinkte informationsorientierte Grafiken und Bilder müssen mit Alternativtexten versehen werden. Die Alternativtexte ersetzen das Bild, sie sollen also (wenn möglich) dieselbe Aufgabe erfüllen wie das Bild.
    Siehe BIK BITV-Test – Prüfschritt 9.1.1.1b
    Eine Grafik, die keine informative Funktion hat, benötigt keinen Alternativtext.
    Siehe BIK BITV-Test – Prüfschritt 9.1.1.1c
  2. Überschriften zum gliedern der Inhalte in semantisch korrekten Abfolge nutzen, s.u. bei „Verwendung von Überschriften“.
  3. Keine doppelten Umbrüche eingeben, Text-Absätze nutzen.
    Siehe BIK BITV-Test – Prüfschritt 9.1.3.1d

    Technisch etwas anspruchsvoller wird es, wenn Absätze in Punkt- oder Aufzählungslisten genutzt werden sollen (wie hier in diesem Beispiel). Das geht bislang nur über den Quellcode (<p>…</p>), wird aber nur sehr selten benötigt.

  4. Aussagekräftige Linktexte
    Ziel oder Zweck des Links sollen aus dem Linktext hervorgehen oder aus dem direkten Kontext des Links ermittelbar sein.
    Falls Links nicht auf HTML-Seiten verweisen, soll der Link über das Dateiformat des Zieldokuments informieren.
    Siehe BIK BITV-Test – Prüfschritt 9.2.4.4
  5. Sinnvolle Seitentitel
    Siehe Title Tag: was ist er und wie nutze ich ihn? - SISTRIX
    Hinweis: Die Seitentitel werden automatisch ergänzt durch den angehängten Zusatz " | Firmenname". Ausgenommen hiervon ist die Startseite.

Typografie und Textstrukturierung

Verwendung von Überschriften

Überschriften gliedern den Seiteninhalt und machen die Struktur einer Seite besser erfassbar – für Besucher ebenso wie für Suchmaschinen und unterstützende Technologien wie Screenreader.

Jede Seite sollte genau eine H1-Überschrift enthalten – in der Regel im oberen Bereich des Inhalts als übergeordnete Überschrift der Seite. Weitere Überschriften wie H2 und H3 können im Verlauf der Seite eingesetzt werden, um Inhalte klar zu strukturieren.

Wichtig ist dabei eine semantisch korrekte Reihenfolge: Die Gliederung soll die inhaltliche Hierarchie widerspiegeln. Eine H3 sollte nur verwendet werden, wenn zuvor eine H2 gesetzt wurde – also nicht direkt nach der H1 ohne Zwischenschritt.

Beispiel: Eine H2 mit der Überschrift Anfahrt kann durch H3-Überschriften wie Lageplan und Parkmöglichkeiten sinnvoll ergänzt werden.

Eine konsistente, semantisch sinnvolle Überschriftenstruktur verbessert die Lesbarkeit, erhöht die Barrierefreiheit und unterstützt die Suchmaschinenoptimierung.

Typografische Feinheiten

  • Bei Wert-, Gewichts- und Maßangaben sollte ein schmales Leerzeichen verwendet werden. Es kann aus folgenden Beispielen kopiert werden:

    • 24 px
    • 10 kg
    • 14:00 Uhr
    • 25° C

    Im HTML-Modus (Quellcode) kann es als &thinsp; eingegeben werden.

    Dieses Zeichen ist nicht zu verwechseln mit dem geschützten Leerzeichen (&nbsp; – non-breaking space), welches nicht umbricht, aber die normale Breite eines Leerzeichens hat.

    Wenn ein schmales und zugleich nicht umbrechbares Leerzeichen benötigt wird, kann das narrow no-break space &#8239; verwendet werden. Für dieses gibt es allerdings keine gängige Bezeichnung oder Tastenkombination.

  • Anführungszeichen sollten zur jeweiligen Textsprache passen:

    • Für deutsche Texte: „…“ und ‚…‘ (verschachtelt) oder seltener »…« (Buchdruck, Belletristik, optisch gestaltete Texte)
    • Für englische Texte: “…” (amerikanisch) und ‘…’ (britisch und für Verschachtelung im amerikanischem)
    • Für französische Texte: « … » (mit schmalem Leerzeichen innen)

    Einheitliche typografische Anführungszeichen verbessern die Lesbarkeit und die formale Qualität des Textes. Wo nötig, lassen sie sich manuell einfügen oder im RTE über das Sonderzeichen-Menü auswählen.

  • Für Einschübe, Gliederungen oder Spannweiten sollte der typografische Gedankenstrich (–) verwendet werden, nicht der kurze Bindestrich (-).

    Beispiel: Die Veranstaltung findet von 14–18 Uhr statt.

    Der Gedankenstrich kann entweder über die Tastenkombination Alt + 0150 (Windows) bzw. ⌥ + - (Mac) eingegeben oder im HTML-Modus als &ndash; geschrieben werden.