Gestaltungsrichtlinien für Redakteure

Dieses Dokument beschreibt verbindliche Regeln für die Pflege der Website der Mittelschule Dingolfing. Ziel ist ein einheitliches, barrierefreies und professionelles Erscheinungsbild. Wir streben strukturell möglichst konsistente Inhalte an – einiges davon verdient noch weitere Optimierung. Work in progress.

Wichtig: Sollte irgendetwas nicht wunschgemäß funktionieren oder fehlen, bitten wir darum, nicht eigenständig nach kreativen Umgehungslösungen zu suchen – diese führen häufig zu Darstellungsfehlern, Barrierefreiheitsproblemen oder einem uneinheitlichen Erscheinungsbild. Bitte melden Sie uns den Wunsch oder das Problem. Wir stellen für alle sinnvollen Verbesserungen zeitnah eine saubere Lösung bereit.

Datum & Uhrzeit

  • Uhrzeit immer im Format hh:mm Uhr (z. B. 09:30 Uhr)
  • Datum immer im Format TT.MM.JJJJ (z. B. 05.06.2025)

Text & Formatierung

Das System verhindert technisch, wo es möglich ist, grobe Formatierungsfehler. Es liegt jedoch in der Verantwortung jeder Redakteurin und jedes Redakteurs, diese Richtlinien gewissenhaft einzuhalten. Inhalte sollen für alle Menschen zugänglich gemacht werden – unabhängig von Einschränkungen beim Sehen, Lesen oder der technischen Ausstattung.

  • Textformatierungen nur zum vorgesehenen Zweck: Fett zur Hervorhebung einzelner Begriffe oder kurzer Passagen, Kursiv für Zitate oder Fachtermini
  • Keine Überschriften zur Hervorhebung einer Textstelle verwenden – Überschriften strukturieren Inhalte für Screenreader und Suchmaschinen; wer eine H2 nur wegen der Schriftgröße oder Fettung setzt, zerstört die Seitenstruktur
  • Keine ganzen Absätze fett formatieren – Fettdruck verliert seine Wirkung, wenn zu viel Text damit ausgezeichnet wird; er dient ausschließlich der gezielten Hervorhebung einzelner Wörter oder kurzer Phrasen
  • Überschriften sind hierarchisch aufgebaut: Nach H1 folgt H2, nach H2 folgt H3 – nie Ebenen überspringen
  • Eine Überschrift besteht aus wenigen prägnanten Wörtern – kein ganzer Satz, kein Punkt am Ende
  • Keine langen Textwüsten ohne Struktur – gliedern Sie durch Absätze, Listen und Überschriften
  • Keine Abstände durch Leerzeilen oder mehrfache Zeilenumbrüche erzeugen – dafür ein neues Inhaltselement anlegen
  • Keine Bindestriche „-" als Spiegelstriche verwenden – stattdessen echte Aufzählungslisten nutzen
  • Text aus MS Word oder ähnlichen Programmen immer mit STRG+UMSCHALT+V einfügen – damit werden unerwünschte Formatierungen entfernt

Bilder & Grafiken

  • Keine Grafiken aus Word oder PowerPoint in den Editor kopieren – diese sind nicht für das Web optimiert
  • Empfohlene Formate: JPEG für Fotos, PNG für Grafiken mit Transparenz, WebP wenn möglich
  • Jedes inhaltlich relevante Bild braucht einen aussagekräftigen Alternativtext (Alt-Text): Wer? Was? Wann? Wo?
  • Rein dekorative Bilder erhalten einen leeren Alt-Text – damit werden sie von Screenreadern übersprungen
  • Bildunterschriften bei Einzelbildern verwenden, um Kontext zu liefern
  • Keine Texte in Grafiken einbetten – diese sind für Screenreader unsichtbar und nicht suchmaschinenfreundlich
  • Keine Bildkompositionen (selbst erstellte Collagen, Poster oder Flyer aus mehreren Fotos und Texten) als ein einzelnes Bild hochladen – zusammengesetzte Bilder lassen sich nicht mit einem aussagekräftigen, einheitlichen Alt-Text versehen und enthaltener Text bleibt für Screenreader unsichtbar; stattdessen einzelne Bilder hochladen und Texte als normalen Inhalt anlegen
  • Kein Bild ohne Größenangabe verwenden

Tabellen & Listen

  • Tabellen nur für tabellarische Daten, niemals als Layout-Hilfsmittel
  • Tabellen immer mit Spaltenüberschriften (Header-Zeile) versehen
  • Aufzählungen konsequent als geordnete (nummeriert) oder ungeordnete Listen anlegen – nie als manuell getippte Bindestriche oder Ziffern

Kontaktdaten

  • Telefonnummern im Format 08731 71034 (Vorwahl Leerzeichen Rufnummer)
  • E-Mail-Adressen als klickbaren Link anlegen
  • Keine Fax-Nummern veröffentlichen – Fax ist technisch veraltet, datenschutzrechtlich problematisch (unkontrollierte Übertragung personenbezogener Daten) und wird praktisch nicht mehr genutzt

Links & Buttons

  • Linktexte müssen aussagekräftig sein: Nicht „hier klicken" oder „mehr lesen", sondern z. B. „Schulordnung herunterladen (PDF)"
  • Externe Links: Option „In neuem Fenster öffnen" aktivieren
  • Wichtige Einzellinks als Button mit dem Inhaltselement „Hyperlink" umsetzen (nicht als normaler Text-Link)
  • Verfügbare Button-Stile (CSS-Klasse am Hyperlink-Element):
Klasse Aussehen
btn btn-primary Haupt-Call-to-Action
btn btn-secondary Sekundär-Button

Dokumente & Downloads

  • Downloads immer als PDF anbieten (plattformunabhängig)
  • Downloads nicht als verlinkte Dateien im Texteditor speichern – dafür das Inhaltselement „Downloads" verwenden

Nachrichten (News)

  • Jede Nachricht besteht aus: Teaser, Text und ggf. Bildern
  • Der Teaser liefert einen bis zwei kurze einleitende Sätze – er erscheint in der Übersicht und muss auch ohne den Volltext verständlich sein
  • Bilder in Nachrichtentexten immer mit Kontext versehen: Wer? Was? Wann? Wo?
  • Keine Nachrichten löschen – sie werden archiviert und können für spätere Recherchen benötigt werden. Sie können aber deaktiviert werden
  • Veröffentlichungsdatum immer korrekt setzen (falls eine Nachricht rückwirkend eingetragen wird)

Termine (Events)

  • Datum, Uhrzeit und Ort vollständig angeben
  • Vergangene Termine nicht löschen – sie bleiben im Archiv auffindbar

Verfügbare CSS-Klassen für Inhaltselemente

Diese Klassen werden im Feld „CSS-ID/Klasse" des jeweiligen Inhaltselements oder Artikels eingetragen.

Ampel-System (farbige Hervorhebung)

Klasse Wirkung Einsatzzweck
red Roter Hintergrund, weiße Schrift Wichtiger Hinweis, dringender Handlungsbedarf
yellow Gelber Hintergrund, dunkle Schrift Ankündigung, „bitte beachten"
green Grüner Hintergrund, weiße Schrift Positive Meldung, erledigte/bestätigte Information
  • Die Klassen werden auf einzelne Inhaltselemente angewendet (z. B. einen Textabsatz), nicht auf ganze Artikel oder Seiten
  • Sparsam einsetzen – zu viele farbige Hervorhebungen verlieren ihre Wirkung

Barrierefreiheit (WCAG 2.1 AA)

  • Abkürzungen beim ersten Auftreten ausschreiben: z. B. „Qualifizierender Abschluss (QA)"
  • Keine blinkenden oder flackernden Inhalte (Gefahr für Menschen mit Epilepsie)

Sprache & Rechtschreibung

  • Auf korrekte Rechtschreibung, Grammatik und Interpunktion achten
  • Plenk (Leerzeichen vor Satzzeichen) und Klemp (kein Leerzeichen nach Satzzeichen) vermeiden
  • Gedankenstrich: – (Halbgeviertstrich, Alt+0150), nicht Bindestrich -

Suchmaschinenoptimierung (SEO)

  • Jede Seite braucht einen aussagekräftigen Seitentitel und eine Meta-Beschreibung (max. 160 Zeichen)
  • Die H1-Überschrift erscheint genau einmal pro Seite und enthält das wichtigste Schlüsselwort
  • Dateinamen für Bilder und Downloads sprechend wählen: schulversammlung-2025.jpg statt IMG_4711.jpg
  • Interne Verlinkungen nutzen: auf verwandte Seiten und Beiträge verweisen

Häufige Fehler vermeiden

Falsch Richtig
Leerzeilen als Abstandshalter Neues Inhaltselement
- als Aufzählungszeichen Ungeordnete Liste
„Hier klicken" als Linktext Aussagekräftiger Linktext
Bild aus Word kopiert Bild als Datei hochladen
Text fett als Überschriften-Ersatz Korrekte H2/H3 verwenden

Zum Schluss: Diese Richtlinien sind nicht als Schikane gedacht, sondern sollen die Website für alle – Schülerinnen und Schüler, Eltern und Kolleginnen und Kollegen – übersichtlicher, zugänglicher und professioneller machen. Dafür braucht es kein Ingenieursstudium, sondern nur ein paar einfache Standards, die mit etwas Übung schnell zur Gewohnheit werden. Jede Verbesserung kommt am Ende allen zugute – vielen Dank für Ihre Mitarbeit!