Mit dem Relaunch des Webseitenlayouts 2019 wurde das Design vollständig modernisiert und auch für mobile Geräte optimiert. Hier erklären wir was ihr wissen müsst, um eure Gliederungswebseite erfolgreich umzubauen.

Hinweis: Die Umstellung des Jugendlayouts erfolgt analog, die Ergebnisse sehen natürlich etwas anders aus.
Hintergründe dazu, weshalb es jetzt schon wieder ein neues Layout für die Jugend gibt, gibt es hier: https://www.dlrg-jugend.de/service/infos-zum-layout/.

Was muss ich auf jeden Fall vor dem Layout-Umbau 2019 wissen und beachten?

Ein Webauftritt im Layout 2019 muss von Grund auf neu aufgebaut werden. Ein einfaches Übernehmen der Inhalte wäre möglich, würde aber zu einem unattraktiven Ergebnis führen. Um die Arbeit möglichst einfach zu machen, wird bei Erstellen des "Layout 2019" im ISC direkt eine Webstruktur mit den wichtigsten Inhalten angelegt. 


Die wichtigsten Informationen zum neuen Layout:

  • Keine PHP-Vorlage
    • Das Layout 2019 wird nur noch in TYPO3 veröffentlicht. PHP-Gliederungen können über die App Homepage (Gliederungswebsite) einfach auf TYPO3 wechseln. Die TYPO3-Seite kann zunächst erstellt und aktiviert werden, wenn sie fertig erstellt ist. 
  • Nach dem Aktivieren des Layout 2019 müssen zunächst im ISC Rechte vergeben werden.
  • Rechter Bannerbereich entfällt
    • Der Bannerbereich auf der rechten Seite der 2013-Layouts für Elemente, die auf allen Seiten eingeblendet werden, ist vollständig entfallen.
  • Full-Responsive-Layout
    • Das Layout 2019 passt sich automatisch an jede Bildschirmgröße an und ist immer gut lesbar. 
  • Slider im Kopfbereich auf jeder Seite
    • Jeder Seite kann eigene Slider (durchlaufende Bilder im Kopfbereich) haben. Im Layout 2013 war dies nur für die Startseite vorgesehen.
  • Bilder, Bilder, Bilder
    • Wie die unten gezeigten Beispiele und https://dlrg.de zeigen, benötigst du für den Umbau jede Menge Bilder in guter Qualität. Die Auflösung ist dabei weitgehend egal. Die Bilder werden vom Layout meistens automatisch angepasst (Ausnahme Slider; diese sollen im Format 2200 x 978 Pixel erstellt werden).  Zugeschnitten werden muss nur, wenn das Motiv nicht mittig liegt und das automatische Zuschneiden somit einen falschen Bildausschnitt generiert.
    • Die Textanteile sollen deutlich reduziert werden.
    • Die optimalen Bildergrößen unterscheiden sich vom 2013er-Layout.
  • Vier Hauptmenü-Punkte (1. Level)
    • Es stehen nur vier (2019), anstatt sieben bis acht (2013) Hauptmenü-Punkte zur Verfügung. Daher müssen alle Inhalte neu sortiert werden. Allerdings wird kein Menüpunkt für "Kontakt" benötigt, da dieser Menüpunkt ständig am rechten Rand eingeblendet wird. Die Empfehlung für Gliederungen lautet: Kurse und Sicherheit, Mitmachen, Die Ortsgruppe, Spenden.
      • Kurse und Sicherheit: Alles was (quasi) öffentlich für "Jedermann" ist
        • Beispiele: Erste-Hilfe-Kurse, Schwimm- und Rettungsschwimmausbildung, Aquafitness, Baderegeln, Sicherheitshinweise
      • Mitmachen: Der Webseitenbesucher möchte tiefer in die Gliederungsarbeit einsteigen und sich vielleicht engagieren:
        • Beispiele: Wasserrettungsdienst, Schwimmausbilder werden, KatS, Jugend, Sanitätsdienst
      • Die Ortsgruppe: Information über Struktur und Aufbau der Gliederung
        • Beispiele: Vorstand, Kontakt, Neuigkeiten, Vereinsheim, Satzung, Regelungen
      • Spenden: Spenden haben einen immer größer werdenden Anteil an der Finanzierung; daher haben sie einen eigenen Hauptmenüpunkt.
        • Beispiele: Spezielle Spendenprojekte
  • Zwanzig Untermenü-Punkte (2. Level)
    • Es stehen maximal 20 Untermenü-Punkte zur Verfügung.
  • Zehn Unteruntermenü-Punkte (3. Level)
    • Es stehen maximal 10 Unteruntermenü-Punkte zur Verfügung.
  • Zentrierung
    • Das Layout 2019 ist in seiner Gesamtheit auf eine zentrierte Ausrichtung angelegt; das 2013-Layout war linksbündig ausgerichtet. Trenner (Divider) sollten immer zentriert eingesetzt werden. Längere Texte, die sich nicht vermeiden lassen (Satzung, Teilnahmebedingungen), können unabhängig davon linksbündig ausgerichtet werden. 
  • Block-Layout (2013) wird zu Zickzack-Layout (2019)
    • Im Layout 2013 wurden die Inhalte in Boxen, meistens mit grauem Hintergrund, nebeneinander und auch untereinander gesetzt.
    • Eine Webseite im Layout 2019 folgt einem Zick-Zack-Muster. Dabei wechseln sich in der Regel trennende Elemente (genannt "Divider") und Bereiche mit Inhalt ab (genannt Content) ab.  Bereiche mit Inhalt haben 1 bis max. 4 Spalten. Trenner/Divider gehen über die gesamte Breite und trennen zwei Inhaltsbereiche voneinander. Divider können auch Überschriften und Text sein und sind dadurch gekennzeichnet, dass sie entweder als Bild über die gesamte Breite gehen, oder viel freie Fläche um eine zentrierte Überschrift oder Text haben.
    • Das Muster wurde im rechten Bild visualisiert.
  • Benutzer auf Folgeseite oder Zielseite leiten
    • Am Ende einer jeden Webseite (langer Scrollweg nach oben und unten) wird der Benutzer mitgenommen und hat zum Beispiel die Möglichkeit, sich für das zuvor Gelesene anzumelden, Kontakt aufzunehmen oder zu spenden.  Er wird also auf die Folgeseite geleitet.


Jetzt kannst du dich entweder weiter über die einzelnen Elemente informieren oder einfach loslegen und ausprobieren.

Bevor du einen Fehler meldest, prüfe in Jira, ob er schon bekannt ist:

Immer dran denken:

  • Wenn eine Änderung nicht sichtbar wird → TYPO3-Cache löschen,

Bilder

Bitte beachtet, dass die Bilder beim Hochladen keine Leerzeichen oder Umlaute im Dateinamen haben dürfen. Ein Umbenennen im ISC reicht hier NICHT.










Hinweis zur Medienverwaltung

Die Medienverwaltung ist nicht über die links im Menü verfügbare "Dateiliste" aufzurufen. Es ist stets der in jedem Element verfügbare "Datei hinzufügen" Button zu nutzen.

 

Die Ordnerstruktur der Medienverwaltung wird in dieser Ansicht NICHT dargestellt.

Im Auswahldialog innerhalb der TYPO3 Elemente ist die Ordnerstruktur dann aber verfügbar.

Weiterführende Informationen zum Layout 2019


Layout-Beispiele von dlrg.de

  • Keine Stichwörter