Die Gestaltung des Seitenkopfes
Der Seitenkopf prägt maßgeblich das Erscheinungsbild Ihrer Website. Im LINKEN CMS können Sie entweder ein einziges Bild für alle Unterseiten festlegen, oder jeder einzelnen Seite Ihres Webauftritts ein individuelles Aussehen geben. Sie können sich dabei auf das professionell gestaltete Standarddesign verlassen oder Sie entscheiden sich für eine freiere Gestaltung mit individueller Höhe des Seitenkopfes auf einer oder auf allen Seiten. Welche technischen Voraussetzungen die Bilder und Videos erfüllen müssen, mit denen Sie Ihre Website gestalten, erläutern wir Ihnen am Ende dieser Seite.
Bearbeiten des Seitenkopfes
Um Änderungen am Seitenkopf vorzunehmen, klicken Sie - während Sie sich im Modul Seite befinden - die Seite im Seitenbaum an, die Sie bearbeiten möchten. Wollen Sie eine Gestaltung für alle Unterseiten festlegen, sollten Sie die Wurzelseite, also die mit dem Globussymbol anklicken. In der rechten Spalte der Backendansicht klicken Sie auf das Symbol zum Bearbeiten der Seiteneigenschaften. Wählen Sie den Reiter Erscheinungsbild.
Welches Seitenlayout Sie gewählt haben, ist für die Gestaltung des Seitenkopfes nicht relevant. Wollen Sie ein Bild für alle oder mehrere Unterseiten festlegen, arbeiten Sie mit der Palette Seitenkopfgestaltung standard. Wollen Sie ein Video in den Seitenkopf einfügen oder eine individuelle Höhe für den Seitenkopf festlegen, arbeiten Sie mit der Palette Seitenkopfgestaltung erweitert. Letztere müssen Sie erst über den Schieberegler aktivieren.
Seitenkopfgestaltung standard
Zunächst haben Sie die Möglichkeit, das Standardlogo durch Ihr eigenes Logo zu ersetzen. Außerdem können Sie den Namen Ihrer Struktur hier so setzen, wie er im Logo erscheinen soll, falls das von dem Wert abweicht, den Sie im Modul Mein LINKES CMS eingegeben haben. Diese Einstellungen werden sinnvollerweise auf der obersten Ebene im Seitenbaum gesetzt, da die Werte für alle Unterseiten übernommen werden. Sollen einzelne Seiten in der Gestaltung abweichen, können auf diesen konkreten Seiten später alle Werte individuell überschrieben werden.
Als Hintergrundbild wählen Sie bitte das Bild aus, das im Seitenkopf Ihrer Website zu sehen sein soll. Bitte beachten Sie, dass das Bild immer über die ganze Seitenbreite verläuft und gegebenenfalls oben und unten beschnitten wird. Sie sehen also in der Regel nur einen Ausschnitt Ihres gewählten Bildes.
Anzeigebereich des Hintergrundbilds in Abhängigkeit vom Ausgabegerät
Das LINKE CMS ist responsiv. Das bedeutet: Je nach Ausgabegerät wird das Kopfbild in einem anderen Ausschnitt angezeigt. Es wird auf einem Smartphone also anders aussehen als auf dem großen Bildschirm eines Desktopcomputers. Hier sehen Sie drei Beispiele, um diese Unterschiede zu verdeutlichen. Alle Beispiele zeigen den Seitenkopf der gleichen Seite. Das erste ist die Darstellung auf einem Mobilgerät mit einer logischen Bildschirmbreite von 320px, das zweite die Darstellung auf einem Bildschirm mit einer logischen Breite von 768px und schließlich auf einem Bildschirm mit einer logischen Breite von 2560px. Auf dem großen Bildschirmen ist das Bild sehr breit, auf dem mittleren hat es etwa klassisches Kinoformat und auf dem kleinen eher ein quadratisches Format.
Beschneidung des Hintergrundbilds
Durch den Browser wird immer das komplette Hintergrundbild geladen. Je nach Ausgabegerät wird es jedoch unterschiedlich beschnitten. So wird der zur Verfügung stehende Anzeigebereich immer vollständig ausgefüllt, ohne dass das Bild verzerrt wird.
Das Hintergrundbild in unserem Beispiel, liegt im Seitenverhältnis 4:3 vor. Ist der verfügbare Anzeigebereich für das Hintergrundbild quadratisch, rücken rechts und links jeweils kleine Teile des Bildes aus dem sichtbaren Bereich. Ist der Anzeigebereich breit, rutschen Teile des Bildes oben und unten aus dem Anzeigebereich.
Es lässt sich gut erkennen, warum dieses Hintergrundbild auf allen Ausgabegeräten gut „funktioniert“:
- Es gibt keine wichtigen Bildinhalte, die bei Beschnitt in der Horizontalen oder Vertikalen verloren gehen.
- Der Bereich im Foto auf den die Betrachter*in fokussiert, befindet sich mit dem Übergang von Hügel zu Himmel vertikal genau in der Bildmitte. Er gerät also auch bei vertikalem Beschnitt auf einem sehr breiten Bildschirm nicht aus dem Fokus.
Seitenkopfgestaltung erweitert
Um den neuen Header zu nutzen, muss die erweiterte Seitenkopfgestaltung aktiviert werden. Legen Sie unter Seitenkopfgestaltung erweitert den Schieberegler bei Aktiv um. Bestätigen Sie den sich öffnenden Dialog mit dem Titel Aktualisierung erforderlich mit OK.
Nun können Sie bei Hintergrundbild oder –videos ein vorbereitetes Hintergrundbild auswählen oder hochladen. (Informationen zu Videoformaten weiter unten auf dieser Seite)
Mit den Schiebereglern Kopfhöhe Desktop und Kopfhöhe Smartphone geben Sie die gewünschte Headerhöhe an. Die Angabe ist in Prozent. 100% entspricht der Höhe des Bildschirms. Bitte nicht vergessen die Änderungen zu speichern, z.B. mit dem Knopf Speichern und Schließen. Dann können Sie sich das Ergebnis in der Vorschau ansehen.
Bildformate und Bildmaterial
In Bezug auf Bildformate und das beste Bildmaterial ist einiges zu beachten.
Seitenverhältnis
Am besten eignen sich Bilder in einem Seitenverhältnis von 4:3 oder 3:2, notfalls auch 16:9. Die meisten Fotoapparate oder Smartphones beherrschen diese Formate von Hause aus oder können auf Wunsch Fotos oder Videos in einem dieser Seitenverhältnisse aufnehmen.
Auflösung von Bildern
Nehmen Sie immer die höchste Auflösung, die Ihnen zur Verfügung steht. Hat Ihr Original z.B. ein Breite von 5000px oder mehr, laden Sie es genau so hoch. Das LINKE CMS kümmert sich im Hintergrund darum, für unterschiedliche Anzeigeräte jeweils passende Versionen zu skalieren.
Dateiformat
Verwenden Sie für Ihre Seitenkopfbilder immer das JPEG-Format. Gibt Ihre Kamera die Dateien bereits als JPEG aus, müssen Sie nichts weiter tun. Wenn Sie Bilder bearbeiten oder selbst erstellen, sollten Sie sie ebenfalls im JPEG-Format speichern. Wählen Sie beim Speichern bitte die Option Qualität: hoch oder Qualität: maximal.
Dateiformate wie BMP oder PNG sind aus unterschiedlichen Gründen weniger gut geeignet. Erstens sind die Qualitätsgewinne gegenüber gering komprimierten JPEG-Dateien minimal, während die Dateigröße unverhältnismäßig ansteigt: unser 4592x3448 Pixel großes Beispielbild hat als JPEG (hohe Qualität) eine Dateigröße von knapp 4,7MB, während die Dateigröße als 24-Bit-PNG schon auf 22,2MB anwächst. Je größer die Datei, desto länger warten die Besucher*innen Ihrer Seite auf die Anzeige des Hintergrundbilds. Für Nutzer*innen mit geringerer Bandbreite, schlechtem Mobilnetz o.ä. bedeutet das eine massive Einschränkung.
Für Logos ist PNG aufgrund seiner Eigenheiten dagegen i.d.R. sehr gut geeignet und erzeugt bei wesentlich höherer Qualität deutlich kleinere Dateien als das für Logos vollkommen ungeeignete JPEG-Format.
Vorsicht bei Text und Portraits
Sehen Sie unbedingt davon ab, Hintergrundbilder mit eingefügten Texten zu verwenden! Durch den Beschnitt der Bilder können z.B. Teile des Textes wegfallen und der Text so sinnentstellt werden.
Portraits sind aus dem gleichen Grund mit Vorsicht zu genießen. Verwenden Sie Hintergrundbilder, auf denen Personen sichtbar sind und unbedingt sichtbar sein sollen, testen Sie die Seiten auf jeden Fall mit unterschiedlichen Bildschirmbreiten um verschiedene Endgeräte zu simulieren. Wenn Köpfe von Personen dabei z.B. ungünstig abgeschnitten oder überdeckt werden, sollten Sie das Bild nicht verwenden.
Videoformate
Im neuen Header können Sie Videos verwenden. Diese Videos müssen in TYPO3 hochgeladen werden. Es ist nicht möglich Youtube- oder Vimeo-Videos im Header einzubinden. Als Dateiformate zum Upload zugelassen sind mp4 und wbm.
Die Dateigröße des Videos sollte nicht größer als 10MB sein. Beachten Sie deshalb folgende Hinweise:
Videomaterial
- Wir empfehlen für den Header 10s bis 20s lange Clips ohne Tonspur.
Videogröße
- Bei den Maßen wählen Sie am besten 720p oder 1080p. Trotz stärkerer Artefakte sieht ein 1080p-Clip mitunter besser aus als ein 720p-Clip bei gleicher Bitrate.
Bildrate
- Reduzieren Sie die Bildrate auf 25fps (bei 50fps Ausgangsmaterial) bzw. 30fps (bei 60fps Ausgangsmaterial).
- Nutzen Sie die Einstellung Variable Bildrate.
- Bei Animationen sind auch mitunter geringere Bildraten von 15-20fps möglich.
Bitrate
- Bitrate zwischen 1 und 3 Mbit/s sind empfehlenswert (je nach Bildmotiv/Szenenwechsel ist mehr oder weniger Bitrate für einen guten Gesamteindruck nötig).
- Nutzen Sie die Einstellung für Variable Bitrate nutzen (VBR)
- Nutzen Sie Multipass-Encoding.