Redaktionelle Informationen

Dateiliste - Zentrale Medienverwaltung (Bilder, Dateien etc.)

Über die Dateiliste werden Medien hochgeladen und können dort auch zentral bearbeitet werden. Sie können dort bspw. die folgenden Felder bei einem Bild direkt für die Bildatei pflegen:

  • Titel (erscheint nur, wenn man mit der Maus über das Bild fährt)
  • Beschreibung (erscheint als Beschreibung sichtbar unterhalb vom Bild) 
  • Alternativer Text (nciht sichtbare Beschreibung des Bildes für die Barrierefreiheit der Seite bspw. für Screenreader sichtbar, aber auch für Suchmaschinen, daher sehr wichtig)

Durch die zentrale Pflege können Sie die Informationen direkt beim Bild pflegen. Wenn Sie es auf mehreren Seiten einsetzen, müssen Sie diese Informationen so nur einmal setzen. 
Selbst wenn Sie auf einer Seite die Beschreibung abwandeln möchten, ist das trotz der zentralen Pflege möglich, da sich diese Werte beim Einpflegen des Bildes optional auch immer überschreiben lassen. 

Dateinamen

Dateinamen sollten ohne Sonderzeichen geschrieben werden. Zur Trennung von Worten kann man den Bindestrich "-" oder einen Unterstrich "_" nutzen . Die Dateinamen sollten auch sinnvoll benannt werden, damit sie schnell zuordenbar sind und durch Suchmaschinen auffindbar sind. .

Falsch: Außenkarosserie in grüner Farbe.jpg
Richtig: Aussenkarosserie-in-gruener-Farbe.jpg

Billdformate

Normale Bilder

Elemente: Bilder, Text und Bild, Text und Media

Bilder über die gesamte Browserbreite (Layout: Full Width)

Für das Bildmaterial sollte immer die obere Grenze des Cropping-Bereichs ausgewählt werden:

  • Desktop: 1920px
  • Tablet: 1025px
  • Mobile: 430px

Wann wird welcher Bildausschnitt angezeigt?

  • Cropping Desktop: >= 1025px
  • Cropping Tablet: 430px - 1024px
  • Cropping Mobile: <= 429px

Bilder im Inhaltsbereich (mittlere große Spalte)

Für das Bildmaterial sollte immer die obere Grenze des Cropping-Bereichs ausgewählt werden:

  • Desktop: 1200px
  • Tablet: 992px
  • Mobile: 768px

Wann wird welcher Bildausschnitt gezeigt?

  • Cropping Desktop: >= 992
  • Cropping Tablet: 769px - 991px
  • Cropping Mobile: <= 768px

Weitere Formate

  • Startseiten Slider (Webseite): 1920px Breite, 650px Höhe
  • Startsetien Slider (Shop): 1920px Breite, 500px Höhe
  • og_image: mind. 1200 x 630 Pixel
  • Bild im Inhaltsbereich (mittlere große Spalte): 1200px Breite

Umgang mit Videos

Bei Videos ist vor allem die Dateigröße der entscheidende Faktor, ob man dieses über YouTube oder direkt auf der Webseite integriert.

Generell sollte ein Video max. 20 MB groß sein, um die Ladegeschwindigkeit nicht zu sehr zu beeinträchtigen.

YouTube Videos

Werden mit dem Modul "Zwei Klick Lösung für iframes" mit der Link-Option "nocookie" eingebunden, da bei Klick auf ein YouTube Videos Cookies gesetzt werden und Nutzerdaten an die Server von YouTube übertragen werden.

Videos auf dem eigenen Server

Hier wird keine extra Einverständniserklärung vom Nutzer benötigt und das Video kann direkt angezeigt werden. Für eine verbessertes Ladeverhalten gibt es außerdem das Mask-Element "Video mit Lazy-Loading", welches für Videos verwendet werden sollte.

Überschriftentypen H1 - H6

Es gibt die Überschriftentypen H1 - H6 (Heading 1 - Heading 6). H1 ist dabei die wichtigste Überschrift (auch für die Suchmaschine) und wird auch optisch größer dargestellt. Die H1 als Hauptüberschrift sollte pro Seite nur einmal eingesetzt werden. Die Zahl bei der Überschrift definiert die Hierarchie Ebene. Daher folgt auf die H1 auch die H2, die H3 und so weiter. Die Überschriften unterhalb der H1 können mehrfach verwendet werden: 

Falsch (es darf nur eine Hauptüberschrift geben):

  • H1 - Hauptüberschrift
  • H1 - Hauptüberschrift
    • H2 - Überschrift
  • H1 - Hauptüberschrift
    • H2 - Überschrift


Richtig:

  • H1 - Hauptüberschrift
    • H2 - Überschrift
      • H3 - Überschrift
    • H2 - Überschrift
      • H3 - Überschrift
        • H4 - Überschrift
    • H2 - Überschrift

Umgang mit Fließtext

Weiche Umbrüche (Umschalttaste + Enter) sollten vermieden werden, da die Seite auf verschiedenen Ausgabegreräten angezeigt werden kann. Diese Umbrüche können ansonsten unschöne Lücken im Fließtext verursachen.

Leeren des Caches, falls Änderungen nicht sichtbar sind

TYPO3 hat einen eigenen Cache in dem generierte Seiten zwischegespeichert werden. Wenn ein Seitenbesucher die Seite aufruft, wird die Seite nicht bei jedem Aufruf neu generiert, sondern aus diesem sogenannten Cache geladen. Diese Funktion ermöglicht ein viel schnelleres Laden der Seite und damit eine bessere Performance.

Sollten Sie Ihre Änderungen nicht auf der Seite sehen, macht es Sinn diesen Cache zu leeren.

Leerung des TYPO3 Caches für eine einzelne Seite
Am einfachsten geht das, wenn Sie die betroffene Seite in der Listenansicht auswählen und anschließend den Cache oben rechts über das kleine Blitzicon (Cache dieser Seite löschen) leeren. 

Leerung des TYPO3 Caches für alle Seiten
In der oberen Menüleiste links von Ihrem Benutzernamen gibt es auch ein übergeordnetes Blitzsymbol. Hier kann der Cache für alle Seiten geleert werden. Hier ist aber zu beachten, dass diese Seiten dann auch wieder einmalig im Cache generiert werden müssen und somit der Aufruf aller Seiten erstmal langsamer ist als mit dem Cache.

Leerung des Browser Caches
Sollte das alles nicht helfen, können gerade Dateien noch zusätzlich in Ihrem internen Browser Cache liegen. Der Browser speichert ebenfalls Dateien in einem Zwischenspeicher, um den Aufruf von oft besuchten Seiten schneller zu ermöglichen. Sie können hier auf einfachem Weg den Seitencache mit "Strg + F5" (Windows) / "Umschalttaste + Apfel + R" (Mac) leeren und die Seite so neu laden.