CP Registry

Redakteur Guide

Alles was Redakteure und Content-Ersteller wissen müssen: Inhaltsstruktur, Textlängen, Bilder, Barrierefreiheit, SEO und Design-Regeln. Dieses Dokument richtet sich an Nicht-Entwickler.

Inhaltsverzeichnis
  1. Überschriften-Hierarchie
  2. Textlängen & Lesbarkeit
  3. Bilder & Medien
  4. Barrierefreiheit (WCAG)
  5. Abstände & Whitespace
  6. Components richtig einsetzen
  7. SEO für Redakteure
  8. Responsive Design verstehen
  9. Content-Checkliste

Überschriften-Hierarchie

Überschriften sind das Inhaltsverzeichnis einer Seite. Screen-Reader-Nutzer navigieren primär über Überschriften — sie sind das Wichtigste für die Barrierefreiheit.

So nicht

Willkommen Unsere Leistungen Beratung Umsetzung H1 → H3 → H2 → H3. Die Hierarchie springt. Screen-Reader-Nutzer verlieren die Orientierung. Google versteht die Seitenstruktur nicht.

So richtig

Willkommen Unsere Leistungen Beratung Umsetzung H1 → H2 → H3 → H3. Logisch und nachvollziehbar. Jede Ebene folgt der vorherigen.

Die Heading-Ebenen

H1

Seitentitel

Nur EINMAL pro Seite. Beschreibt worum es auf der gesamten Seite geht.

H2

Hauptabschnitte

Die großen Themenbloecke der Seite: "Über uns", "Leistungen", "Kontakt".

H3

Unterabschnitte

Einzelne Punkte innerhalb eines H2-Blocks: z.B. einzelne Leistungen, Team-Mitglieder.

H4

Details

Selten nötig. Nur bei sehr tief gegliederten Inhalten.

Textlängen & Lesbarkeit

Die Lesbarkeit von Text hängt maßgeblich von der Zeilenlänge ab. Zu lange Zeilen sind anstrengend, zu kurze unterbrechen den Lesefluss.

Die goldene Regel: 45-75 Zeichen pro Zeile

Das System begrenzt Fließtext automatisch auf die optimale Breite. Aber: Bei breiteren Layouts (breakout, wide) muss der Redakteur selbst darauf achten.

Problem

Text in voller Breite

Dieser Absatz nutzt die volle verfügbare Breite. Bei einem breiten Monitor hat er weit über 100 Zeichen pro Zeile. Das Auge verliert am Ende der Zeile den Anschluss und findet den Anfang der nächsten Zeile nicht zurück. Das Lesen wird anstrengend und man hört schneller auf.

Lösung

Breite begrenzen

Dieser Absatz ist auf die optimale Lesebreite begrenzt. Das Auge kann muehelos von Zeilenende zum nächsten Zeilenanfang springen. Die Lesbarkeit ist deutlich besser, egal wie breit der Monitor ist.

Fließtext vs. Grid-Content

Fließtext

Absätze, Aufzählungen, Erklärungen — immer content-Breite (55rem) nutzen. Nie breiter.

Visueller Content

Cards, Bilder, Teaser, Galerien — dürfen breakout oder wide nutzen. Hier ist Breite gewünscht.

Bilder & Medien

Alt-Texte richtig schreiben

Jedes Bild braucht einen Alt-Text der beschreibt, was auf dem Bild zu sehen ist. Screen-Reader lesen diesen Text vor. Auch Google nutzt ihn für die Bildersuche.

Schlecht

  • alt="Bild"
  • alt="foto1.jpg"
  • alt="image"
  • alt="" (bei informativem Bild)

Gut

  • alt="Team bei der Arbeit im Büro"
  • alt="Projektfortschritt: 3 von 5 Phasen abgeschlossen"
  • alt="Logo der Firma XY"
  • alt="" (nur bei rein dekorativen Bildern!)

Bildformate & Größen

Bildformate und empfohlene Größen
Typ Format Max. Breite Hinweis
FotosWebP, AVIF2x AnzeiggroesseHero: 1920px, Cards: 800px
LogosSVG—Immer SVG, nie PNG/JPG
IconsSVG (inline)—Inline für a11y + Farbanpassung
ThumbnailsWebP400pxKleine Dateigröße wichtig

Barrierefreiheit (WCAG) für Redakteure

Barrierefreiheit ist kein technisches Feature — es ist eine Anforderung die jeden Content-Ersteller betrifft. Ca. 15-20% aller Menschen haben eine Form von Beeinträchtigung.

Kontrast

Text muss sich deutlich vom Hintergrund abheben.

Zu wenig Kontrast

Dieser Text ist kaum lesbar. Kontrast: ca. 1.5:1. Mindestens 4.5:1 für normalen Text, 3:1 für großen Text (ab 18pt/24px).

Guter Kontrast

Dieser Text ist gut lesbar. Kontrast: ca. 15:1. Die Brand-Tokens erfüllen die WCAG-Anforderungen automatisch, wenn man sie korrekt nutzt.

Farbe nie als einziges Unterscheidungsmerkmal

Ca. 8% aller Männer haben eine Form von Farbenblindheit. Informationen dürfen nie NUR über Farbe vermittelt werden.

Schlecht

"Die roten Felder sind Pflichtfelder." — Farbenblinde können rot nicht von grün unterscheiden.

Gut

"Pflichtfelder sind mit * markiert." — Zusätzlich zur Farbe gibt es ein Symbol.

Links richtig beschriften

Screen-Reader-Nutzer können alle Links einer Seite auflisten. Wenn alle "Mehr erfahren" heißen, ist das nutzlos.

Schlecht

  • "Hier klicken"
  • "Mehr erfahren"
  • "Link"
  • "www.example.com/seite/123456"

Gut

  • "Mehr über unsere Leistungen erfahren"
  • "Kontaktformular öffnen"
  • "PDF-Broschuere herunterladen (2.4 MB)"
  • "Projektdetails ansehen"

Formulare

  • Jedes Eingabefeld braucht ein sichtbares Label — nicht nur Platzhalter-Text
  • Pflichtfelder müssen gekennzeichnet sein (z.B. mit *)
  • Fehlermeldungen müssen verständlich sein und sagen wie man den Fehler behebt
  • Nutze passende Feldtypen: E-Mail-Feld für E-Mails, Tel-Feld für Telefonnummern (Mobilgeräte zeigen die richtige Tastatur)

Abstände & Whitespace

Grosszuegiger Whitespace ist kein verschwendeter Platz — er verbessert die Lesbarkeit, führt das Auge und wirkt professionell.

Naehegesetz (Gestalt-Prinzip)

Dinge die nahe beieinander stehen werden als zusammengehoerig wahrgenommen. Nutze Abstände bewusst:

  • Enger Abstand: Elemente gehören zusammen (Überschrift + Absatz, Icon + Label)
  • Mittlerer Abstand: Elemente sind verwandt (Cards in einer Gruppe, Formularfelder)
  • Grosser Abstand: Neues Thema beginnt (Section-Wechsel, thematische Trennung)

Spacing-Stufen im System

Spacing-Stufen und ihr Einsatz
Stufe Einsatz Beispiele
xsInnerhalb einer GruppeIcon + Text, Label + Input
smVerwandte ElementeCards untereinander, Listeneintraege
mdStandard-SectionsZwischen Text-Blöcken und Grids
lgThemen-TrennungZwischen "Über uns" und "Kontakt"
xl / 2xlStarke TrennungVor/nach Hero, vor Footer

Components richtig einsetzen

Jedes Component hat einen idealen Einsatzzweck. Hier die wichtigsten Regeln:

Accordion

Gut für

  • FAQ-Bereiche
  • Zusätzliche Infos die nicht jeder braucht
  • Lange Listen die den Seitenfluss stören

Nicht für

  • Pflichtinhalte (werden geschlossen nicht gelesen)
  • Nur 1-2 Items (dann einfach aufklappen lassen)
  • Navigation oder Formulare

Cards

Gut für

  • Teaser zu Unterseiten
  • Team-Mitglieder, Produkte
  • 2-4 Cards pro Reihe

Nicht für

  • Lange Texte (Cards sind für kurze Inhalte)
  • Mehr als 4 Cards pro Reihe (wird unuebersichtlich)
  • Alle Card-Texte sollten ähnlich lang sein

Tabs

Gut für

  • Verwandte Inhalte die man vergleichen will
  • Verschiedene Ansichten desselben Themas
  • Maximal 5-6 Tabs

Nicht für

  • Sequentielle Inhalte (dann besser untereinander)
  • Pflichtinhalte die jeder sehen muss
  • Zu lange Tab-Titel (brechen auf Mobile um)

Hero

  • Bilder mindestens 1920px breit (besser 2560px für Retina)
  • Overlay-Text kurz halten: 1 Headline + 1 Satz + 1 CTA
  • Immer prüfen ob der Text auf dem Bild lesbar ist (Kontrast!)
  • Nicht auf jeder Unterseite einen Hero verwenden — nur auf der Startseite und wichtigen Landingpages

Gallery & Slider

  • Gallery: Für Bildsammlungen die man durchstoebern will (Projekte, Team, Räume)
  • Slider: Für sequentielle Inhalte (Testimonials, Schritt-für-Schritt)
  • Wichtige Inhalte nicht nur im Slider — manche Nutzer wischen nicht
  • Alt-Texte für jedes einzelne Bild in der Gallery

SEO für Redakteure

Suchmaschinenoptimierung beginnt beim Content. Die technische Basis ist im System eingebaut, aber Redakteure beeinflussen die wichtigsten Faktoren.

Meta-Description

Wird in Google-Suchergebnissen angezeigt. 120-160 Zeichen. Beschreibt was den Nutzer auf der Seite erwartet. Kein Keyword-Stuffing.

Seitentitel (H1)

Enthalt das Hauptkeyword. Beschreibt den Inhalt präzise. Nicht identisch mit dem Seitentitel im Browser-Tab.

Alt-Texte

Google nutzt Alt-Texte für die Bildersuche. Beschreibend, nicht mit Keywords vollgestopft.

Interne Verlinkung

Verlinke verwandte Inhalte miteinander. Hilft Google die Seitenstruktur zu verstehen und hält Nutzer länger auf der Seite.

Responsive Design verstehen

Die Website wird auf Geräten von 320px (altes Smartphone) bis 2560px+ (Ultra-Wide-Monitor) angezeigt. Das System handhabt die meisten Anpassungen automatisch, aber Redakteure müssen einige Dinge wissen:

Was passiert automatisch

  • Schriftgrößen skalieren fluid (kleiner auf Mobil, größer auf Desktop)
  • Grids werden zu einer Spalte auf schmalen Bildschirmen
  • Navigation wechselt zum Hamburger-Menu
  • Abstände passen sich proportional an
  • Bilder skalieren auf die verfügbare Breite

Worauf Redakteure achten müssen

  • Lange Wörter: Zusammengesetzte deutsche Wörter wie "Versicherungsvermittlungsverordnung" können auf Mobil aus dem Rahmen laufen
  • Tabellen: Breite Tabellen mit vielen Spalten sind auf Mobil schwer lesbar. Weniger Spalten = besser
  • Bilder mit Text: Text der im Bild eingebettet ist (z.B. Infografiken) wird auf Mobil zu klein
  • Testen: Den Browser schmaler ziehen oder Chrome DevTools (F12 → Mobile View) nutzen

Content-Checkliste

Vor der Veröffentlichung prüfen:

Struktur

  • ☐ H1 nur einmal pro Seite
  • ☐ Heading-Hierarchie lueckenlos (H1 → H2 → H3)
  • ☐ Fließtext max. 75 Zeichen/Zeile
  • ☐ Genuegend Whitespace zwischen Sections

Bilder

  • ☐ Alle Bilder haben beschreibende Alt-Texte
  • ☐ Bilder sind im richtigen Format (WebP/SVG)
  • ☐ Keine zu großen Dateien (max. 200KB pro Bild)
  • ☐ Hero-Bilder mindestens 1920px breit

Barrierefreiheit

  • ☐ Links haben aussagekräftige Texte
  • ☐ Farben haben ausreichend Kontrast
  • ☐ Info nie nur über Farbe vermittelt
  • ☐ Formular-Labels vorhanden
  • ☐ Tabellen haben Kopfzeilen
  • ☐ Videos haben Untertitel

SEO & Technik

  • ☐ Meta-Description gepflegt (120-160 Zeichen)
  • ☐ Seite mit Tastatur bedienbar (Tab-Test)
  • ☐ Seite auf Mobile getestet
  • ☐ Interne Links funktionieren