Styleguide für Redakteure

Beiträge und News

Die Beiträge zu den verschiedenen Seiten werden wie die News im Bereich "Nachrichten" gepflegt.

Jede News besteht aus zumindest einer Headline und einem Teasertext, der auf der Startseite und in der News-Liste erscheint.

Zum Teasertext kann ein Bild eingestellt werden (Ablage im Dateiverwaltungsbereich "News" bzw. dem Websitebereich und der entsprechenden Jahreszahl, Einstellungen: Proportional, Breite 180).

Danach sind in einer News beliebig viele "Inhaltselemente" möglich.

Artikel

Bis auf wenige Ausnahmen werden alle Inhalts-Beiträge im Bereich "Nachrichten" gepflegt (s.o.). Nur wenige Seiten werden direkt unter dem Menü-Punkt "Artikel" gepflegt. Das sind:
Editorial, Kontakt, Impressum, Datenschutz, Styleguide

Das betrifft dort auch meist nur die "Hauptspalte", in der "Rechten Spalte" stehen oft kryptische Programmierangeben - daran sollte tunlichst nichts geändert werden.

Inhaltselemente

Das wichtigste Inhaltselement ist "Text". Meist mit Überschrift, oft mit Bild.

Andere Elemente sollten die Ausnahme bleiben.

Beim Inhaltselement "Bild" steht das Bild alleine und mit Abstand. Wenn das Bild zum Text gehört besser das Inhaltselement "Text" benutzen.

Mehr als 1 Bild pro Inhaltselement sind nicht vorgesehen, dafür setzt man dann das Inhaltselement "Galerie" ein - oder halt mehrere Inhaltselemente.

Inhalt

Bemühen Sie sich um eine hierarchisch logische Struktur der Überschriften auf einer Seite. Sie unterstützen damit z. B. blinde Besucher, da diese den Inhalt eines Textes mithilfe einer guten Überschriftenhierarchie leichter erfassen können, und Suchmaschinen! Das heißt z.B.: Nur einmal "h1" auf der gesamten Seite. (Contao-Handbuch)

Bitte Abkürzungen möglichst vermeiden (nicht barrierefrei). Unvermeidbare, wie BMFSFJ, sollten mit dem abbr-Tag ausgezeichnet werden. Diese werden dann meist unterstrichelt dargestellt und von Screenreadern (ent-)sprechend wiedergegeben.

Text-Formatierungen

Grundsätzlich werden alle Texte durch die Style-Sheets (CSS) für die ganze Site einheitlich formatiert. Das gilt auch und vor allem für die Schriftgröße.

Im Texteditor sind nur fett, kursiv, Listen und Links erlaubt.

Alle anderen Formatierungen (div, small, sub, ... ) führen meist zu unschönen Ergebnissen, z.B. auf Mobilgeräten. Sie sollten nur in seltenen, unvermeidbaren, wirklich wichtigen Ausnahmefällen benutzt werden - und dann mir Vorsicht und anschließender Kontrolle auf allen möglichen Geräten.

Texte aus der Zwischenablage

Aus der Zwischenablage gepastete Texte bringen in der Regel die Formatierungen (auch Font, Schriftgröße und Zeilenabstand) mit, was zu einem uneinheitlichen Schriftbild auf der Website führt.

Nur so wird man die alten Formatierungen von Word oder anderen Websites los:

Eingesetzte Texte bitte komplett (alles) markieren und dann den "Formatierung entfernen"-Button  (großes "I" mit kleinem "x") anklicken. Das gilt für die Redaktion der Kritiken (siehe Foto). Leider gibt es Sachen (z.B. Blocksatz), die trotzdem hartnäckig drin bleiben - da bleibt nur die dritte Möglichkeit.

In Contao gibt es 2 Möglichkeiten:
- die obige Editor-Funktion findet sich unter "Format - Formatierung entfernen"
- Unter "Bearbeiten - Als Text einfügen" kann man den Editor vorher umstellen. (EDIT: Dies ist aus diversen Gründen jetzt die Voreinstellung.)

(Eine dritte Möglichkeit: Text aus Word kopieren, in einen reinen Texteditor einfügen, dort wieder markieren und ausschgneiden, dann erst im CMS einfügen.)

Upload Dateien, Bilder etc.

Für alle Uploads (Bilder, PDFs, ...) gilt: Dateinamen dürfen keine Umlaute oder Sonderzeichen enthalten, möglichst auch keine Leerzeichen. Nur Ziffern, Buchstaben, Bindestrich und Unterstrich!

(Sonst sind Backups nicht möglich und die Datei mt Umlaut im Namen ist eventuell später verschwunden.)

Es sollten nur Bilder eingebunden werden, die in der Dateiverwaltung verfügbar sind.

In der Dateiverwaltung werden alle Dateien hochgeladen, auch PDFs und Bilder. Bilder nur als JPG, GIF oder PNG, damit die Browser sie darstellen können.

Das CMS ersetzt keine Bildbearbeitungssoftware: Bitte nur Bilder mit maximal 1376 Pixeln Breite, 900 Pixeln Höhe (größere Bilder werden beim Upload heruntergerechnet) und maximal 2 MB hochladen! Mehr als 688 Pixel Breite sind nicht erforderlich.

Erscheint beim Upload eines Bildes das kleine Vorschaubildchen NICHT, hat die Datei eine zu große Auflösung, d.h. der Server kann sie nicht umrechnen. Dann bitte vorher das Bild in der Bildbearbeitungssoftware verkleinern.
Bilder, mit denen Contao nicht umgehen kann, können zwar positioniert werden, erscheinen aber in voller Auflösung im Frontend, was Google gar nicht gut findet, mobile User ebenso nicht.

Größere Bilder (Presse) gezippt, plus entsprechendes Vorschaubildchen, hochladen.

Bitte die Ordnerstrucktur einhalten, damit auch andere Redakteure die Bilder wiederfinden. Und auch mal ans Löschen ungenutzter Dateien denken.

Links

Hyperlinks innerhalb der Site/Domain sollen im gleichen Fenster öffnen. Links zu externen Seiten "in neuem Fenster öffnen" - bitte die entsprechende Auswahl treffen. Letzteres gilt auch für PDF-Dokumente, da dort die Navigation "zurück" oft nicht richtig funktioniert, und dann unsere Website weg ist aus dem Browserfenster.

Bilder

Bilder, die die ganze Spaltenbreite einnehmen sollen, müssen folgende Mindestbreite im Original haben und werden im Backend auf diese Werte gesetzt:
688px breit

Bilder, die linksbündig und textumflossen sind, müssen folgende Mindestbreite im Original haben und werden im Backend auf diese Werte gesetzt:
300px breit (bei Hochformat: ca. 170 bis 220 Pixel breit, aber auf einer Seite jeweils einheitlich).

Die Bilder zu den Kritiken werden vom Server automatisch passend gemacht :-)

Andere Bildgrößen und -positionen bitte nur in Ausnahmefällen benutzen, und (nur dann) die Angaben zu Bildabstand etc. im Backend entsprechend setzen.

Bilder linksbündig: "Ein Bild hinzufügen" anklicken/markieren, Bild aussuchen (Quelldatei ändern), Bildbreite auf "proportional" und 300 setzen, Bildhöhe leer lassen, Bildausrichtung auf linksbündig und textumflossen (2. Button) setzen. Wegen der Barrierefreiheit bitte unbedingt immer einen "Alternativen Text" angeben!

Im Bereich Neustarts keine individuellen Abstandswerte eingeben, das wird per CSS geregelt. Dazu erhält das Inhaltselement die Class "neustart".

Exkurs: Bild-Qualität

JPG-Bilder können in verschiedenen Qualitätsstufen gespeichert werden - je besser die Qualität, desto größer die Datei und desto langsamer wird das Bild im Browser geladen ( = schlechter Google-Rank!). Also auf keinen Fall nach dem Motto "am besten beste Qualität" handeln.

Die Kompressionsmöglichkeit ist stark abhängig vom Motiv, daher hier nur Anhaltspunkte: Alle Werte über 80 % (Photoshop 8 von 10) sind mit bloßem Auge nicht unterscheidbar, so dass für's Web je nach Motiv und Verwendung zwischen 60 % und 85 % völlig ausreichen.

Völlig egal ist im Web dagegen die Auflösung in dpi, und damit auch die Angabe in cm oder inch. Das gibt es nur im Print-Bereich.

Backup

Zu einem vollständigen Backup gehören alle Dateien der Dateiverwaltung und alle Datenbanken. Das macht bis auf Weiteres mal Udo.

... natürlich haben wir alle die Hoffnung, dass wir sowas niiiieee brauchen werden :-)

Typo

'Open Sans', Arial, Helvetica, sans-serif (in dieser Reihenfolge werden die Schriften vom Browser je nach Vorhandensein eingesetzt, Open Sans wird local mitgeliefert)

Einzelne Symbole kommen aus einem speziellen KJF-Zeichensatz (Font), der Bei Bedarf auch für Desktop-Rechner zur Verfügung steht.

Die Schriften und deren Größe und Farbe werden vom Design festgelegt (css), und es sollte nicht versucht werden einzelene Absätze zu ändern.

Grundfunktionen

Der Webmaster richtet eine neue Ausgabe jeweils technisch ein, dazu braucht er den (finalen) Titel der neuen Ausgabe.
Eine neue Ausgabe ist online sichtbar, damit die Bearbeitungen kontrolliert werden können. Aber sie ist noch nirgend verlinkt.
Die Freigabe macht wieder der Webmaster. Dazu wird der Menü-Eintrag auf die aktuelle Ausgabe umgeleitet, und die Liste in der rechten Spalte um den aktuellen Eintrag ergänzt.

Bilder

Alle Bilder und Medien kommen in einen entsprechend benannten Ordner in der Dateiverwaltung.
Für jeden Beitrag einer Ausgabe, also für jedes Element des "Bild-Tableaus" muss es genau ein Bild geben in genau diesen Abmessungen: 672 Pixel breit, 378 Pixel hoch!

Um Bilder auf genau diese Pixelzahlen zu bekommen, gibt es vielerlei Windows-Programme, in macOS geht das mit Bordmitteln (Vorschau) - siehe meine Anleitung für Vorschau, Photoshop, Affinity und Irfanview.

Für die Inhalte sind natürlich beliebige weitere Bilder hochladbar.

Beitrags-Artikel

Die Artikel "Ich-sehe-was_Header" und "Fuss_Text" können bearbeitet werden. Der Artikel "Liste rechts Verweis" bitte nicht anrühren.

Einen neuen Beitrags-Artikel fängt man am besten an, indem man einen bestehenden Artikel, oder den "Dummy-Beitrag" kopiert. Und dann bearbeitet:
In den Einstellungen des Artikels (Icon gekreuzte Werkzeuge) muss
- der Titel (möglichst kurz) aktualisiert werden
- das Feld "Artikelalias" leeren, damit es automatisch neu gesetzt wird
- Häkchen bei "Teasertext anzeigen" muss gesetzt sein
- ins Feld "Teasertext" muss das definierte Bild (672x378 Pixel, s.o.), sonst nichts dort eingeben.

Das Veröffentlichen des Artikels nicht vergessen.

Die Inhaltselemente innerhalb eines Beitrags sind frei gestaltbar (Texte, Bilder, Videos, ...).

Links zu Filmkritiken: Inhaltselemente, die im Text einen schwarzen Button für einen Link anzeigen sollen, müssen die "Klasse" (Experteneinstellungen) "filmlink" erhalten.

Der übergeordnete Artikel "Liste Ich sehe was" beinhaltet die vom webmaster gepflegte Liste der Ausgaben und den Text zur Coop. Dieser Artikel erscheint automatisch auf allen Seiten.

Anmerkung zum Design

Der Designer hat seinerzeit alle Elemente festgelegt, die benutzt werden sollen. Diese sind auch entsprechend gestyled (CSS) worden.

Das CMS bietet aber noch hunderte von Funktionen und Elementen an, die natürlich zum aller größten Teil nicht im Layout berücksichtigt sind. D.h. sie erscheinen überhaupt nicht, oder sehen auf manchen Bilschirmgrößen sehr unschön aus. Jede neu benutzte Funktion und jede neu eingeführte Formatierung (außer fett, kursiv, Liste, Link) muss also vorher einen Eintrag im CSS erhalten.