Tipps und Tricks für die redaktionelle Pflege im TYPO3

Tipps und Tricks für die redaktionelle Pflege im TYPO3

Hinweise zur Vorbereitung von Bildern, Videos, Texten & Co.

Die Contentpflege einer Destinations-Website ist eine große, zeitintensive Aufgabe, die einer guten Vorbereitung und Planung bedarf. Dieser Artikel greift hilfreiche Tipps und Tricks für die redaktionelle Pflege auf, um effizienteres Arbeiten zu ermöglichen und technische Vorteile nutzen zu können. Von der Vorbereitung der Mediendatenbank über die optimalen Voraussetzungen einer schnellen Medienladezeit bis hin zu Tipps für den strategischen Aufbau einer Landingpage ist alles ganz verständlich aufgeführt.

Vorbereitung der Mediendatenbank

Der erste Schritt zur Befüllung Ihres CMS besteht darin, dass Du zunächst die benötigten Dateien wie Bilder, Videos und PDFs in die sogenannte Mediendatenbank Ihres CMS hochlädst. Wir empfehlen, dies als ersten Schritt direkt nach der CMS Schulung anzugehen. Die Bilder grundsätzlich vorbereiten, z.B. im Hinblick auf den Dateinamen, kannst Du aber auch schon vor der CMS-Schulung.

Info
Hinweis: bevor Du die unterschiedlichen Medien in Deine Seite integrieren kannst, müssen alle Medien, die Du auf Deiner neuen Webseite nutzen möchtest, vorab in die Mediendatenbank hochladen. Dies ist nicht zwingend notwendig, wenn eine DAM-Anbindung besteht. Bei einer DAM-Anbindung kann direkt auf die Bilder aus der Datenbank destination.data zugegriffen werden. Ein erneuter Upload der Bilder im TYPO3 ist dann nicht notwendig.

Sinnvolle Ordnerstruktur überlegen und anlegen

Damit Du später Bilder und andere Dateien leichter wiederfinden kannst, solltest Du Dir eine sinnvoll strukturierte und übersichtliche Ordnerstruktur der Mediendatenbank überlegen, in der Du Deine Dateien ablegen möchtest. Wenn nötig, kannst Du neben Hauptordnern auch Unterordner anlegen, um Deine Mediendatenbank übersichtlich zu gestalten.


Idea
Viele Kunden folgen dabei einem der beiden Varianten:
Variante 1: Pro Landingpage ein Ordner. Also bspw. Startseite, Veranstaltungskalender, ...
Variante 2: Je nach Bildtyp ein Ordner. Also bspw. Headerbild, Kacheln, ...
Du kannst dir aber natürlich auch was völlig eigenes ausdenken und nutzen.

Bilder vorbereiten

Zur Vorbereitung der Bilder, die Du in der Mediendatenbank ablegen möchtest, möchten wir Dir gerne verschiedene Tipps mit auf den Weg geben. Lege Dir dazu auf Deinem PC oder einer zentralen Datenbank eine übersichtliche Ordnerstruktur an und sammele dort alle Bilder, welche Du zum Projektbeginn benutzen möchtest.

Richtlinien für Bilder
  1. Headerbilder und Hintergrundbilder sollten min. 2560px breit sein.
  2. Die Bilder sollten mit hoher Qualität, also mit wenig Kompression abgespeichert werden.
  3. Es empfiehlt sich der Einsatz eines Bild-Optimierungstools, welche die Bildgrößen ohne Qualitätsverlust deutlich reduzieren können. Viele Kunden nutzen dafür bspw. https://tinyjpg.com/ .
  4. Wenn Kopfbilder optimiert wurden, sind Dateigrößen von bis zu 4 MB kein Problem
  5. PNG als Dateiformat ist bei großen Bildern sehr ineffizient, hier sollten am besten immer JPGs verwendet werden (PNG am besten nur, wenn Transparenz benötigt wird)

Der Dateiname eines Bildes

Vor dem Hochladen eines Bildes ins CMS solltest Du diesem Bild einen aussagekräftigen Dateinamen geben. Mehrere Worte trennst Du durch einen Bindestrich, bspw. Moewe-Strand-Wangerland. Bei der Wahl der Begriffe für den Dateinamen kannst Du Dich an einem Thema, Zeit und Ort orientieren. Also was stellt das Bild dar, zur welcher Jahreszeit und an welchem Ort wurde das Bild gemacht, sofern diese Angaben für das Bild relevant sind.
Info
Vorteil: über das Such-Eingabefeld im CMS kannst Du durch einen aussagekräftigen Namen die Datei schnell und einfach wiederfinden. Nutze bitte keine Sonderzeichen in Dateinamen also bspw. kein Copyrightzeichen oder Umlaute. Wenn Du den Urheber im Dateinamen
angeben möchtest, dann bitte die Wörter wie oben beschrieben durch Bindestriche trennen.

Folgende Infos können im CMS je Bild hinterlegt werden:

Der Titel:
Der Bildtitel gilt als zusätzliche Information und wird angezeigt, wenn der Nutzer bei nicht verlinkten Artikelbildern mit der Maus über das Bild fährt.

Beschreibung:
Hier kann eine zusätzliche Beschreibung zum Bild hinterlegt werden.

Alternativer Text (Alt-Text):
Der alternative Text wird dem Nutzer nur angezeigt, wenn das Bild nicht geladen werden kann. Weiterhin dient er aber auch dazu, einem sehbehinderten Nutzer das Bild zu beschreiben. Deshalb ist es natürlich relevant, hier eine aussagekräftige Beschreibung zu wählen. Auch für
Google sind diese Bildinformationen interessant.

Urheberrecht:
Im CMS hast Du die Möglichkeit im Feld „Urheberrecht“ ein Copyright zu hinterlegen. Ausgespielt wird dieses standardmäßig auf den Bildern. Wenn Du nicht selbst Urheber des Bildes bist, kläre mit dem Urheber ab, welche Anforderungen hinsichtlich der Copyright-Angabe bestehen.

Vorbereitung von Videos

Du möchtest in einer Bühne ein Hintergrundvideo einsetzen? Dies ist möglich. Hierzu wäre zunächst einmal zu beachten, dass das Video nicht zu unruhig und nicht zu lang (< 20 Sek.) ist. Videos sollten als MPEG-4 (mp4) (H.264) vorliegen. Wichtig ist, dass das Video wie bei Hintergrundbildern richtig komprimiert wird. Sprich dazu die Agentur an, die Dir die Videos erstellt oder nutze ein Tool aus dem Internet, das ein MP4 für den Einsatz im Web optimiert. Eine generelle Empfehlung zur Auflösung können wir nicht geben, da dies immer abhängig von der Art und dem Inhalt des Videos ist, welches Du einsetzen möchtest. Videos werden vom Browser vor dem Abspielen nicht direkt vollständig geladen, daher sind Dateigrößen von 4 bis 15 MB kein Problem.

Alert
Achtung bei Videos mit Ton: 
Videos mit Tonspur werden nicht abgespielt.
Grund:
Browser erlauben Hintergrundvideos nur ohne Ton.

Das Laden des Videos dauert bei schlechter Verbindung natürlich lange. Daher sollte zu einem Video auch ein alternatives Bild im CMS angelegt werden, welches zuerst erscheint, so dass der User bereits etwas sieht, solange das Video geladen wird.

Alternativ kannst Du die Videodateien auch bei Youtube hochladen und diese über einen Link ins CMS einbetten. Hier muss eine Textdatei mit der Endung .youtube erstellt werden, die dann den Link zum Youtube-Video enthält (z.B. https://www.youtube.com/watch?v=jKx3QL4CVpM). Als Hintergrundvideos empfehlen wir immer den direkten Upload der Videodatei ins CMS. Werden Youtube-Videos als Hintergrundvideos eingesetzt, kann es zu unschönen Übergangseffekten kommen, wenn das Video in Dauerschleife abgespielt wird.

Vorbereitung der Texte

Die Texte, die auf Deiner Website zum Einsatz kommen sollen, kannst Du bereits vor der CMS Schulung vorbereiten. Hier findest Du eine Schritt für Schritt Anleitung zur Sammlung der Inhalte für Deine Website:

Schritt 1:

Finalisierung Sitemap / Menüstruktur: Erstelle eine sinnvolle Menüstruktur, um Deine Inhalte in 3-6 Hauptmenüpunkte zu strukturieren (Anzahl der Menüpunkte hängt vom Layout ab).

Schritt 2:

Sammle pro Seite alles, was Du an Content dazu hast: Bilder, Videos, Gästestimme, Texte, Links etc.
Lege dann z.B. über Google Drive pro Seite der Sitemap einen eigenen Ordner an, wo Du die jeweiligen Dateien ablegen kannst.

Schritt 3:

Überarbeite und optimiere Deine vorhandenen Texte.
Idea
Tipps dazu: 
Jede Deiner Seiten sollte ein bestimmtes Ziel haben, welches Du Dir vorab überlegen kannst. Soll der Text inspirieren oder informieren? Hat die Seite ein vertriebliches Ziel? Wenn Du eine Seite vorbereitest, schreibe Dir zunächst das Ziel der Seite auf, damit Du dieses stets im Blick hast. Überlege Dir beim Texten stets, wonach der User bei Google sucht und was ihn interessieren würde zu lesen. Vermeide unnötige Floskeln und Füllsätze.
Notes
Themenseiten nutzen:
Es hat sich gezeigt, dass User vor allem nach Themen suchen, weniger nach Destinationen direkt. Schaffen daher auf Deiner Webseite Einstiege über inspirative Themenseiten, die zu Deiner Destination passen und leite den User darüber auf Deine vertrieblichen Seiten. Viele User geben zudem verstärkt ganze Fragen bei Google ein. Warum nicht auch das inhaltlich aufgreifen? Frage in Deiner Tourist-Info nach, was dort häufig gefragt wird. Daraus lassen sich oft für User interessante Inhalte für die Webseite schaffen.
Alert
Achtung bei Überschriften:
Hinweis zur Verwendung von Überschriften: bei den sogenannten H-Auszeichnungen sollte die H1 Überschrift immer nur ein Mal pro Seite genutzt werden.

Schritt 4:

Mach Dir die Flexibilität unserer Bühnenlogik zunutze und überlege Dir bei jeder Landingpage, welches Ziel diese Seite verfolgt, welche Anordnung der Bühnen Sinn macht und wann ein Gleichgewicht zwischen Inspiration, Wissen und Conversion erreicht ist.
Idea
Tipp:
Drucke Dir hierzu die Bühnen aus Deinem finalen Klickdummy aus und klebe diese einzeln auf Pappen. So kannst Du schon vorher das Kombinieren der Bühnen üben und bekommst ein Gefühl dafür, welche Wirkung Du mit dem Arrangieren der Bühnen erzielst.

Aufbau von Bühnen

Zum Aufbau der Bühnen und Texte haben wir auch noch ein paar allgemeine Hinweise für Dich:
  1. Kurze Absätze: Faustregel max. 3-4 Sätze pro Absatz
  2. Kurze und prägnante Sätze: Faustregel max. 16 Wörter pro Satz
  3. Zwischenüberschriften verwenden
  4. Aufzählungslisten verwenden: diese werden besser wahrgenommen als lange Texte und sind einfach zu verarbeiten
  5. Bilder einfügen: gelten als „Augensüßigkeit“ und verleiten den Leser, die Seite weiterzuscrollen
  6. Zitate verwenden: diese lockern den Text auf und verleihen ihm Authentizität
  7. Text linksbündig ausrichten: das Auge findet nachweislich den Anfangspunkt einer Zeile am besten, wenn ein Absatz links ausgerichtet ist. Rechtsbündig Ausrichten macht nur bei Tabellen Sinn, nicht aber bei Fließtext
  8. Call to Actions Buttons verwenden: der User kann so tiefer in die Website einsteigen
  9. Bühnen mit großem Bild und Text abwechselnd einsetzen
  10. Wenig Text auf großen, inspirativen Hintergrundbildern verwenden
Info
Hinweis: 
Bedenke bei der Planung der Inhalte nicht nur die Desktop-Ansicht, sondern auch die mobile bzw. responsive Ansicht und überlege Dir, wie Deine Website nach dem Prinzip „mobile first“ aussehen wird.

    • Related Articles

    • Mandantenstruktur: Kontaktdaten für Autor und Organisation

      Kontakt Daten für Mandanten und Autoren pflegen Hier geht es um die pers. Autoren Einstellungen - Pflege hier die Kontaktdaten, die standardmäßig bei allen Benutzern eures Mandanten erscheinen sollen Wo kann ich den Standardwert beim Autor pflegen ...
    • Tipps und Tricks zu den Pages Builder Filtern

      Allgemeine Tipps zum Filtern In diesem Artikel geht es um die Filtermöglichkeiten und deren korrekte Anwendung. 1. Sonderzeichen maskieren Da in den Kategorie-Bezeichnungen auch Slashes (Schrägstriche "/") vorkommen, aber Slashes auch feste ...
    • Bühnen und Inhalte - TYPO3

      Rahmenbühnen, Inhaltsbühnen, Inhalte, Plug-Ins uvm. Dieser Artikel zeigt dir die grundlegende Struktur des Inhaltsbereichs unter "Seite" in TYPO3. Ein Überblick Wir starten im Bereich "Seite" im Menü. TYPO3 bietet grundlegend verschiedene ...
    • destination.data: Datensatzpflege - Inhalt für das Feld "Beschreibung (Content Distribution)"

      Neben einem kurzen und langem Beschreibungstext, der standardmäßig in Deinen Ausgaben verwendet wird, kann zusätzlich ein Kurz- und Lang-Text für die Content-Distribution erfasst werden (vgl. Screenshot). Damit der Content, den Du in Deinen Kanälen ...
    • destination.youtube - TYPO3

      destination.youtube - YouTube auf der Landingpage Darstellung im Frontend Wer das Modul einmal selbst testen will, kann dies über folgenden Link machen: LINK Hinweis: Für die Anzeige im Frontend müssen Cookies akzeptiert werden. Pflege im Backend ...