In dieser Fallstudie präsentieren wir den Relaunch der Website der CHS Container Gruppe, der durch modernes Design, benutzerfreundliche Technologie und Barrierefreiheit überzeugt.
Grundanforderungen an die neue Website
Warum ein Relaunch?
- Die alte Website wurde ursprünglich 2015 entwickelt. Seitdem haben sich sowohl das Layout als auch die Technologie im Web erheblich weiterentwickelt.
- Mit der neuen Website sollte ein modernes Layout im Rahmen des neuen Corporate Designs umgesetzt werden.
- Das CMS wurde auf eine benutzerfreundlichere Lösung umgestellt.
- Die Website wurde barrierefrei gestaltet, insbesondere im Hinblick auf das bald in Kraft tretende Gesetz zur Barrierefreiheit.
- Ziel war es, die Website auf den aktuellen technologischen Stand zu bringen, mit besonderem Fokus auf mobile Optimierung, schnelle Ladezeiten und eine sinnvolle URL-Struktur.
Worauf lag der Fokus?
- Schaffung von Übersichtlichkeit über das vielfältige Angebot der CHS Container Gruppe.
- Einheitliches Erscheinungsbild für die gesamte Gruppe.
Screenshots der alten Website
Entwicklung eines Web Styleguides
Anhand des neuen Corporate Designs von CHS wurde ein passender Webdesign Styleguide entwickelt, in dem die wichtigsten Elemente definiert sind:
- Überschriften
- Fließtexte
- Links
- Aufzählungen
- Buttons
- Farbpalette mit genügend Abstufungen
Berücksichtigt wurde bei der Farbpalette und der Schriftsetzung die Einhaltung der Barrierefreiheit.
Konzept für den Footer
- Der Footer ist ein wiederkehrendes Element, das am Ende jeder Unterseite erscheint.
- Enthaltene Inhalte: Kontaktinformationen, Hervorhebung des Karrierebereichs und Social Media Icons.
- Links werden als Schnellzugriffe angeboten, sodass das Hauptmenü nicht geöffnet werden muss.
- Rechtliche Links wie Impressum, AGB und Datenschutz werden am unteren Ende des Footers platziert, da diese dort erwartet werden und auf jeder Seite leicht zugänglich sein sollten.
Entwicklung eines Navigationskonzepts
- Definition und Neustrukturierung der Inhalte, um eine klare Gliederung der Unterseiten zu ermöglichen.
- Aufgrund der Komplexität der Inhaltsstruktur wurde ein Slide-In-Menü anstelle eines einfachen Dropdown-Menüs verwendet.
- Sinnvolle Kategorisierung der Unterseiten zur besseren Strukturierung der Verlinkungen.
- Wichtige Seiten, wie die Kontakt- und Standortseite, wurden als Shortcuts direkt in der Menüleiste integriert.
- Einsatz einer Breadcrumb-Navigation auf stark verschachtelten Unterseiten, um die Seitenstruktur leichter nachvollziehbar zu machen.
Layout der Seitentemplates
Um jede Unterseite inhaltlich gut aufzubereiten und übersichtlich darzustellen, wurden für die folgenden Seiten jeweils individuelle Templates entwickelt:
- Startseite
- Containerseite
- Aktuelle
- Meldungen
- Übersicht
- Kontakt / Anfrage inkl. Formular
- Ansprechpartner
- Standorte
- Übersicht
- Karriereseite
- Stellenanzeige
- Über uns
Die übrigen Seiten wurden mit einem Standardtemplate versehen.
Schrittweise Fertigstellung des Layouts in engem Dialog mit dem Kunden, im Rahmen einer agilen Entwicklung und Korrekturschleifen.
Umsetzung als Wordpress Multi-Site
Warum die Umsetzung mit WordPress?
Die Website wurde als zentrale WordPress-Multi-Site aus folgenden Gründen aufgebaut:
- Einheitliches Theme: Alle Unterseiten und Niederlassungen basieren auf einem zentralen Theme.
- Zentrale Steuerung: Updates für Plugins und das Theme können zentral verwaltet werden, ohne dass jede Unterseite einzeln aktualisiert werden muss.
- Einfache Erweiterbarkeit: Neue Seiten können leicht aufgesetzt werden und es wird eine einheitliche Linkstruktur gewährleistet.
- Individuelle Templates: Die zuvor designten Templates wurden als eigene WordPress-Templates neu programmiert, um eine barrierefreie Umsetzung zu ermöglichen.
- Benutzerfreundliches CMS: WordPress ermöglicht die eigenständige Verwaltung von Text- und Mediainhalten, ohne dass HTML- oder Webdesign-Kenntnisse erforderlich sind.
- Konsistente Inhalte: Wiederkehrende Elemente, wie z.B. Ansprechpartner, werden zentral in WordPress angelegt. Änderungen, z.B. an Telefonnummern, müssen nur an einer Stelle vorgenommen werden, wodurch Fehler und vergessene Anpassungen vermieden werden.
Projektablauf
Die Laufzeit für dieses Projekt wurde mit etwa 5-6 Monaten kalkuliert. Stark abhängig ist die Projektlaufzeit einer so großen Website auch immer von Faktoren wie Verfügbarkeit von Content und Antwortzeiten.
Überzeugen Sie sich selbst vom Ergebnis
de.chs-containergroup.com