Bei der Online-Redaktion in TYPO3 – ganz gleich, ob es um das Einpflegen von Inhalten für einen Relaunch oder die laufende Betreuung einer bestehenden Seite geht – gibt es ein paar Basics, die immer berücksichtigt werden müssen.

Abgleich mit dem Screendesign

Wenn Inhalte initial für einen Relaunch eingepflegt werden sollen, wirf vorab einen Blick auf das Screendesign im Jobordner. Neben der Startseite wird auch meist eine Unterseite gestaltet.

Zudem bereitet die Programmierung auch immer eine Testseite vor. Schau sie dir im Backend an, damit du weißt, welche Elemente benötigt werden und ob besondere Einstellungen zu berücksichtigen sind.

Kleiner Tipp:
Bevor du beginnst, sprich kurz mit dem Programmierer und frag nach, ob es Besonderheiten gibt. Bei dieser Gelegenheit könnt ihr auch prüfen, ob der Redakteursaccount mit allen notwendigen Rechten ausgestattet ist.

Wenn du eine Seite gepflegt hast, gleiche sie zur Sicherheit nochmal mit dem Design ab.

Stimmen alle Abstände?
Sind die Headlines korrekt gestylt?
Sind die Linkstyles korrekt?
Sind die Einrückungen korrekt?
Sind Aufzählungen gestylt?

Notiere alle Punkte, die dir während der Pflege auffallen, und gib sie gesammelt als Feedback an die Programmierung und die Projektleitung weiter.

Aufzählungen werden niemals händisch eingepflegt.

Nutze zur Formatierung stets das Icon für die Bulletpoints.

Nur so kannst du sicherstellen, dass die Einrückungen und Abstände in allen responsiven Stufen korrekt sind. Wenn bei einer neuen Seite noch keine Aufzählungszeichen gestylt sind (das erkennst du im Frontend), wende dich damit an den Projektleiter oder die Programmierung.

Markierungen vor Links werden nicht händisch eingepflegt.

Wenn du einen Link einpflegst, bitte keine Zeichen à la „-->“ einfügen. Der Screendesigner legt ein einheitliches Design für Links fest, an dem wir uns orientieren und das die Programmierung stylt. Häufig reicht es, einfach nur den Link einzufügen, ggf. findest du im Feld „Stil“ aber auch weitere Styles (z. B. Link mit Pfeil, morelink oder buttonlink).

Wenn du unsicher bist, wie Links gestylt werden sollen, wende dich an den Programmierer oder den Grafiker. Falls du Anmerkungen zum Linkstil hast (z. B. weil du der Meinung bist, dass er im Fließtext nicht gut aussieht o. Ä.), gib diese Info gerne an den Projektleiter und den Grafiker weiter.

Wichtiger Unterschied: Absatz und geschützter Umbruch

Um lange Texte übersichtlicher zu gestalten, können Absätze (mit Hilfe der Enter-Taste) eingefügt werden. Wie groß der Abstand nach einem Absatz sein soll, ist im Screendesign festgelegt.

Achtung: Bei offiziellen Pressemeldungen etc. unbedingt an den Aufbau aus der Kundenvorlage halten! Keine zusätzlichen Umbrüche einfügen oder Umbrüche weglassen!

Bei Adressangaben oder Ähnlichem wird ein geschützter Umbruch eingefügt, um direkt in die nächste Zeile zu gelangen. Drücke dazu Shift+Enter. Geschützte Umbrüche sind auch empfehlenswert, wenn du mehrere Links untereinander einfügst. Dies ist aber vom Screendesign und Linkstil abhängig. Teste aus, welche Variante besser aussieht.

Zwischenheadlines einheitlich formatieren

Wenn ein Text durch Zwischenheadlines strukturiert werden soll, nutze hierfür die „Überschrift 3“. Wenn diese nicht formatiert ist oder die Abstände nicht passen, wende dich an den Programmierer.

Abstände kontrollieren

Bitte keine Abstände – etwa vor einem Bild – durch Einfügen von Leerzeilen generieren! Dies kann zu fehlerhaften Darstellungen in den responsiven Ansichten führen. Wende dich stattdessen an den Programmierer, damit er die Abstände zentral und gemäß Screendesign festlegt.

Beim Einfügen von Inhalten kann es auch passieren, dass unsichtbare Abstände nach dem Text generiert werden. Um diese zu prüfen, rufe die Seite im Frontend auf und markiere den Text – Leerzeilen werden dann mit markiert.

Ebenso kannst du auch den Quellcode überprüfen.

Generelles zu Bilddateien

Bilddateien grundsätzlich als jpg einpflegen. PNGs haben meistens eine höhere Dateigröße, was sich negativ auf das SEO-Ranking auswirkt.

Bei der Benennung ausschließlich Kleinbuchstaben verwenden. Dies gilt sowohl für die Dateien als auch für die Ordner in der Dateiliste.

Responsive Ansichten

Es empfiehlt sich immer, neue Seiten oder Elemente auch in den responsiven Stufen (also die Ansichten auf Tablet oder Smartphone) zu prüfen. Hierfür gibt es in Chrome, Firefox und Safari eigene Tools, mit Hilfe deren man die Ansichten auf verschiedenen Geräten prüfen kann.

Eine Anleitung, wie du den Responsive Mode in Safari aufrufen kannst, findest du hier: https://thesweetsetup.com/use-responsive-design-mode-safari/

SEO

Für neue Seiten verfassen wir Titles und Metas für alle Seiten. Falls unklar ist, ob eine SEO erstellt werden soll, vorab immer an den Projektleiter wenden!

Dieses Tool ist empfehlenswert, um die Länge von Title und Meta zu prüfen:
https://app.sistrix.com/de/serp-snippet-generator

Eine Anleitung, wie SEO-Daten schnell in TYPO3 7 eingepflegt werden könne, findest du hier:
SEO-Daten in TYPO3 einpflegen

Alle Grundlagen sind auch in unseren Schulungsunterlagen erklärt.