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
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 Call-to-Action Outline Link
| Eigenschaft | Wert |
|---|---|
| Farbe | Rot |
| Größe | Mittel |
| Gewicht | 12 kg |
| Status | Aktiv |
| Variante | Standard |
Sektionen (Hintergrundfarbe) und Element-Abstände
„Standard“ mit kleinem Abstand davor und danach.
„Helle Hervorhebung“ mit mittlerem Abstand davor und danach.
„Dunkle Hervorhebung“ mit großem Abstand davor und danach.
Inhaltselemente (vorgestellt auf separaten Beispielseiten)
Spezielle 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.
- Mehrsprachigkeit – inkl. Sprachwechsler. Ist vorbereitet, aber zur Zeit nicht benötigt, daher inaktiv.
- To-Top Button – blendet sich automatisch ein
- Strukturierte Daten – zur Bereitstellung zusätzlicher maschinenlesbarer Informationen für Suchmaschinen und KI-Systeme.
Zum Betrachten kann das JSON-LD Viewer Bookmarklet genutzt werden.
Redaktionelle Hinweise
Barrierefreiheit
- 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 Überschriften zum Gliedern der Inhalte in semantisch korrekten Abfolge nutzen:
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.
- Keine doppelten Umbrüche eingeben, sondern Text-Absätze nutzen.
Siehe BIK BITV-Test – Prüfschritt 9.1.3.1d - 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
Suchmaschinenoptimierung (SEO)
- 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. - Meta-Description (Seitenbeschreibung)
Siehe Meta Descriptions – Definition, Bedeutung und Optimierungstipps - SISTRIX
Im Reiter SEO → Beschreibung: kurze Seitenzusammenfassung für Suchergebnisse (ca. 120–160 Zeichen, für jede Seite separat formulieren, nicht den Titel wiederholen).
Hinweis: Die oben unter „Barrierefreiheit“ beschriebenen Maßnahmen kommen ebenfalls der Suchmaschinenoptimierung zugute.
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   eingegeben werden.
Dieses Zeichen ist nicht zu verwechseln mit dem geschützten Leerzeichen ( – 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   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 amerikanischen)
- 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 – geschrieben werden.
- Bei sehr langen Wörtern (z. B. zusammengesetzte Begriffe) kann ein weicher Trennstrich gesetzt werden: Er ist im Fließtext unsichtbar und erscheint nur, wenn das Wort am Zeilenende umbrochen wird – dann als Trennstrich an dieser Stelle. So vermeidet man unschöne Lücken oder zu breite Zeilen, ohne im sichtbaren Text überall Bindestriche zu setzen. Eingabe im Texteditor über Soft-Hyphen in der Toolbar oder im Quellcode als ­. Unter Windows zusätzlich Alt + 0173 auf dem Ziffernblock. Das Zeichen kann auch von robinson2.com/shy kopiert werden.