Mit dem Relaunch des Layouts 2019 wurde das Design in allen Bereichen modernisiert und auch für mobile Geräte optimiert. Hier erklären wir was ihr wissen müsst um eure Webseite 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ür aber zu einem unattraktiven Ergebnis. Um die Arbeit möglichst einfach zu machen, wird bei Erstellen des "Layout 2019" direkt einen Basishomepage mit den wichtigsten Inhalten angelegt.
Die Gründe für die Erforderlichkeit eines vollständigen neuen Aufbaues sind:
- 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 wurden im Gegensatz deutlich reduziert.
- Nur noch 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 ständig, am rechten Rand eingeblendet wird.
- Full-Responsive-Layout
- Dies bedeutet, dass das Layout sich automatisch an jede Bildschirmgröße anpasst und "immer" sieht gut lesbar ist. Dadurch sind die Elemente auf einem PC-Bildschirm, teilweise sehr groß und die Homepage ist sehr lang.
- Kein rechter Banner mehr
- Der Bannerbereich auf der rechten Seite der 2013-Layouts ist vollständig entfallen.
- Zentrierung
- Das Layout 2019 ist zentriert-ausgerichtet. Das 2013 Layout war linksbündig ausgerichtet.
- Slider im Kopfbereich auf jeder Seite
- Jeder Seite kann einen Slider (durchlaufende Bilder im Kopfbereich) haben. Im Layout 2013 war dies nur für die Startseite vorgesehen.
- 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 informieren oder einfach loslegen und ausprobieren.
Weiterführende Informationen zum Layout 2019
- Anleitung zum Layoutwechsel im ISC
- Layout-Beispiele
- Inhalts-Elemente (Content)
- Trennende-Elemente (Divider)
- Spalten-erläutert.
- Tipps und Tricks bzw. Besonderheiten.
Layout-Beispiele von dlrg.de
