Sie zeigen eine alte Version dieser Seite an. Zeigen Sie die aktuelle Version an.

Unterschiede anzeigen Seitenhistorie anzeigen

« Vorherige Version anzeigen Version 27 Nächste Version anzeigen »

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.

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

Eine Homepage im Layout 2019 muss von Grund auf neu aufgebaut werden. Ein einfaches Übernehmen der Inhalte ist möglich, führt aber zu einem unattraktiven Ergebnis. Um die Arbeit möglichst einfach zu machen, wird bei Erstellen des "Layout 2019" im ISC direkt eine Basishomepage mit den wichtigsten Inhalten angelegt. 


Die Gründe für die Erforderlichkeit eines vollständigen neuen Aufbaus sind:

  • rechter Bannerbereich enfällt
    • Der Bannerbereich auf der rechten Seite der 2013-Layouts ist vollständig entfallen.
  • keine PHP-Vorlage mehr
    • Das Layout 2019 wird nur noch in TYPO3 veröffentlicht.
  • Full-Responsive-Layout
    • Das Layout passt sich automatisch an jede Bildschirmgröße an und ist immer gut lesbar. 
  • Slider im Kopfbereich auf jeder Seite
    • Jeder Seite kann einen eigenen 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 Textanteile sollen deutlich reduziert werden.
  • Vier Hauptmenü-Punkte
    • Es stehen nur vier (2019), anstatt 7-8 (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
  • Zentrierung
    • Das Layout 2019 ist zentriert ausgerichtet. Das 2013 Layout war linksbündig ausgerichtet. Divider sollten immer zentriert eingesetzt werden sein.
  • Block-Layout (2013) wird zu Zickzack-Layout (2019)
    • Im Layout 2013 wurden die Inhalte in Boxen, meisten 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. 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.
    • Vereinfacht wurde das Zick-Zack-Muster im rechten Bild dargestellt.
  • Benutzer auf Folgeseite oder Zielseite leiten
    • Am Ende einer jeden Webseite (lange 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 meldst, prüfe in JIRA, ob er schon bekannt ist:

Weiterführende Informationen zum Layout 2019




Layout-Beispiele von dlrg.de

  • Keine Stichwörter