Im Zuge eines 2020 angestoßenen Marken-Relaunchs beauftragte uns die Versicherungsgruppe Alte Leipziger-Hallesche mit einem Redesign der bestehenden Website. Im Folgenden zeigen wir Ihnen hierfür ein exemplarisches Vorgehen, bezogen auf ein Content-Management-System.
Design-Analyse
In der ersten Phase machten wir uns mit dem neu erarbeiteten Design vertraut. Dieses stammt von der Kreativagentur Damm & Bierbaum Interactive (DBI).
Anschließend analysierten wir das Design mit Blick auf den Anpassungsbedarf im Frontend. Die Bereitstellung der Design-Vorlagen für die visuelle und technische Referenz erfolgte über InVision. So vereinfachten wir nicht nur den Prozess der Analyse. Vielmehr unterstützte uns dieses Vorgehen auch bei späteren Abstimmungen mit den Projektbeteiligten, wie auch bei der Projektumsetzung selbst.
Im Zuge des Redesign blieben bestehende Module und Funktionalitäten sowie Content-Struktur und Inhalte unverändert. Ebenso sollten einige wenige Elemente, für die eine Neugestaltung nicht vorgesehen war, ihr Aussehen möglichst unverändert beibehalten. Die Anpassungen planten wir daher minimalinvasiv, nach dem Prinzip „so viel wie nötig, so wenig wie möglich“.
Übergreifende Anpassungen berücksichtigten wir, soweit es für die Module erforderlich war, beispielsweise am Seitenlayout.
Umsetzung des Redesigns
Warum die eingehende Vorbereitung? Eine Website dieser Größe, gepaart mit den Umsystemen, muss man sich als Maschinenkonstrukt vorstellen. Zahnräder greifen ineinander und bilden Prozesse ab. Ändert man eines der Zahnräder, können sich automatisch Funktionen sowie bestehende Abhängigkeiten verändern.
In unserem Fall beschreibt ein Zahnrad beispielsweise Veränderungen am HTML-Code. Das Projekt nimmt mit jeder Änderung an Komplexität zu, zeitintensive Anpassungen, auch im Backend, können die Folge sein.
Beibehaltung der bestehenden Module im CMS
Website-Inhalte pflegt die ALH Gruppe in Sitecore mehrheitlich auf Basis von Modulen.
Für unterschiedliche Textlängen oder für die Nutzung und Präsentation von Medien existiert ein Set von Modulen. Diese befinden sich bedarfsorientiert auf einzelnen Webseiten und sind mit redaktionell gewünschten Inhalten befüllt.
Die Ablösung ganzer Module auf Grund des Redesigns hätte die Migration vorhandener Inhalte nach sich gezogen. Um solchem Aufwand entgegenzuwirken, behielten wir im Zuge des Redesigns alle Sitecore-Module bei. Erforderte das neue Design in einzelnen bestehenden Modulen das Hinzufügen eines neuen Elements, so stellten wir über Default-Voreinstellungen sicher, dass sich die redaktionelle Nachbearbeitung auf ein Mindestmaß reduziert.
Beibehaltung des vorhandenen HTML-Markup
Neben den Inhalten sollten auch interaktive Funktionalitäten der Websites im neuen Design unverändert bleiben. Dazu zählen etwa Slider, Schalter, Navigation. Da diese überwiegend an die HTML-Struktur einer Webseite geknüpft sind, galt es, das HTML-Markup der einzelnen Module beizubehalten und es lediglich mittels Stylesheet-Anweisungen gemäß dem neuen Design visuell neu zu gestalten.
Selbstverständlich konnten wir den Idealfall nicht bei allen Modulen anwenden.
Mussten wir Änderungen am HTML-Code vornehmen, berücksichtigten wir in unmittelbarer Konsequenz Anpassungen in JavaScript. Die darauf beruhenden Funktionalitäten blieben so bestehen.
Punzen – schöne Rundungen, aber die Ladezeit?
Bei jedem Redesign einer Website gibt es grafische Besonderheiten; das bringt der Wunsch nach Neuem mit sich. Bei der ALH Gruppe sind es die sogenannten Punzen.
Als symmetrische, aber auch asymmetrische Rundungen stellten sie eine besondere Herausforderung dar, auch weil das Internet nach wie vor ein 'rechteckiges' Pixel-Konstrukt ist.
Im Rahmen eines ‚Proof of concept‘ untersuchten wir mögliche Varianten, mit denen wir die Punzen am besten darstellen könnten. Uns war von Beginn an klar, dass wir mittels CSS nicht alle Rundungen Hundertprozentig CI-gerecht realisiert bekommen. Alternativ haben wir die Nutzung von Code-aufwändigen SVG-Dateien in Betracht gezogen.
Den Vorteil einer präzisen Umsetzung des gewünschten Designs erkauften wir also mit mehr Code. Nachteil: In Abhängigkeit von der erforderlichen Anzahl an SVG-Dateien wächst das ‚Gewicht‘ und somit die Ladezeit einer Webseite. Nicht zuletzt müssen bei jeder Änderung Designer:innen neue SVG-Dateien erstellen.
Am Ende entschieden wir uns gemeinsam mit dem Kunden, bei der Realisierung beide Wege zu beschreiten. Wo es möglich war, verwendeten wir auf Grund der guten Performance und hohen Flexibilität CSS als Gestaltungsmittel. An anderen Stellen verwendeten wir SVG-Files.
Mehrstufige Qualitätssicherung
Die Prüfung des Frontend-Codes erfolgte in mehreren aufeinander aufbauenden Schritten. In einem ersten Schritt sichtete ein zweiter Entwickler den Code nach dem Vier-Augen-Prinzip. Erst danach floss er in das Code-Repository ein. Von dort spielte das Team den Frontend-Code in eine dedizierte Vorschau-Umgebung ein, um ihn als Prototyp zu testen.
Im nächsten Schritt integrierten wir den Code in das Sitecore-Backend und ließen weitere Tests folgen. Um diese Tests möglichst realistisch und in einer hohen Qualität durchführen zu können, überführten wir zu Beginn des Projekts produktive Inhalte aus der Integrationsumgebung des Kunden in unsere Entwicklungsumgebung.
Nach diesem dreistufigen Prozess übergaben wir das neue Design dem Kunden. In dessen Integrationsumgebung fand ein abschließender Test statt, bevor die Änderungen in die einzelnen Webseiten flossen.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Jörg Nölke und Gerrit Taaks (von links nach rechts).
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Melanie Klühe, Stefanie Berger, Stephan Handschin und Philippe Surber (im Uhrzeigersinn).
