Sitecore & Redesigns

Webseiten stehen unter ständigem Wandel und meist wirkt ein „State of the Art“ Design bereits nach 2 oder 3 Jahren wieder veraltet.
Im Gegensatz zu einzelnen Weiterentwicklungen, die sich in der Regel sehr gut step-by-step in eine bestehende Solution ausliefern lassen, steht bei einem Redesign oft bereits wieder ein grösserer Projektkontext dahinter (ja, man denkt sogar an eine neue Solution?). Zu guter Letzt sitzt man aber doch auf einer bereits beträchtlich angewachsenen „Datenbasis“ bestehend aus Seiten, Dokumenten und anderen Elementen die nur ungern ausgemistet, überarbeitet oder gar ganz neu erstellt werden müsste.

Oft stellen sich in Sitecore auch noch weitere Herausforderungen wie:

  • Multisite Solution mit unterschiedlichen Designs oder einem schrittweisen Ausrollen des Design auf einzelne Seiten
  • Nachvollziehbarkeit für die Autoren wie eine Seite vorher/nachher ausgesehen hat
  • Schulung für Autoren, wenn sich der Editierprozess bedeutend ändert
  • Umstellung des Designs ohne Content-Freeze (Zeit während der Umstellung, in der die Autoren keinen neuen Content erfassen können)

Ein möglicher Ansatz mit einer solchen Situation umzugehen zeige ich hier anhand eines einfachen Standard Sitecore Bordmittels auf: den Devices!

Das Sitecore Layouting bietet mit seinem „Devices“-Ansatz die Möglichkeit unterschiedliche Layouts und damit verbundenen unterschiedlichen Inhalt für die ein- und dieselbe Seite anzuzeigen. Das typischerweise von Sitecore mitgelieferte Beispiel sind „Mobile“-Devices oder „RSS Feeds“-Devices. Mit den zunehmend responsive entwickelten Designs finden Mobile-Devices nur noch selten einen Einsatz und damit auch die Device-Funktionalität von Sitecore.

Tatsächlich bietet sie aber eine wunderbare Möglichkeit ein komplett neues Design auf einer bestehenden Seite anzuzeigen; top aktuell mit den darunter liegenden Daten und jederzeit vergleichbar für den Autor.

Dazu stellen wir uns zwei Devices vor:

  • Default: aktuell produktives Design (Stand vor Redesign)
  • Redesign: neues Design mit neuen Layout und Rendering Komponenten

Daraus ermöglicht sich direkt, dass der Autor über den Page/Experience-Editor jederzeit bequem seine Device-Ansicht ändern kann. Dadurch kann er kontrollieren, ob seine Daten aus dem alten Design auch wirklich noch verfügbar sind und korrekt im neuen Design angezeigt werden. Und das mit seiner aktuellen Datenbasis!
Für die Entwicklung kann dies bedeuten, dass Komponenten des Layouts, Stück für Stück entwickelt und ausgeliefert werden können, was insbesondere in einer agilen Entwicklung vorteilhaft ist.

Die Frage die noch zu lösen bleibt ist: Wie wird das alte Design auf das neue Design? Wie funktioniert der Switch?

Dazu gibt es zwei Möglichkeiten die sich nach meiner Erfahrung bewähren:

  1. Es wird dafür gesorgt, dass die Seite standardmässig das „Redesign“-Device verwendet
  2. Oder wir sorgen dafür, dass das Device umgetauscht wird, sprich das Redesign auf dem Default Device landet

Der erste Ansatz ist vermutlich mit wenigen Griffen (oder Codezeilen) zu lösen. Einerseits gibt das Sitecore Device-Item bereits ein Feld vor (Default), das über den Checkbox Wert „1“ bestimmt, bei welchem Device es sich um das Standard-Device handelt, zum anderen liesse sich auch die httpRequestBegin Pipeline manipulieren (DeviceResolver), um dasselbige Ziel zu erreichen. Ich denke hier sind dem Entwickler kaum Grenzen gesetzt.

Es gibt allerdings aber auch Situationen in welchen die zweite Option vorteilhaft ist. Stellt man sich eine Sitecore Solution mit mehreren Sites vor. Und jede Site hat ihr eigenes Design oder soll zu unterschiedlichen Zeitpunkten umgestellt werden.

Grundsätzlich ist es – wenn möglich – auch ratsam sich auf den Sitecore Standardwegen fortzubewegen, da diese von Sitecore auch am besten getestet sind.

Ein Switch auf das neue Design lässt sich einfach über den „CopyTo“ Befehl arrangieren. Das heisst man bräuchte nichts weiteres zu tun, als über die Presentation Details mit dem CopyTo Button des Redesign Devices das gesamte Layouting auf das „Default“-Device zu kopieren. So ist es theoretisch auch möglich nur einzelne Seiten auf das neue Design zu migrieren! Leider verliert man dadurch das alte Design, wobei es aber auch dafür eine Lösung gibt:

Ergänzen wir unsere Device-Liste um ein Backup (oder altes Design) Device.

  • Default: aktuelles produktives Design (Stand vor Redesign)
  • Redesign: neues Design mit neuen Layout und Rendering Komponenten
  • Backup Design: vor dem Switch gesichertes „Default“ Device-Design

Das ermöglicht es beim Switchen einer (oder aller Seiten) zuvor ein CopyTo vom „Default“ aufs „Backup“ Device zu tätigen. Danach ein CopyTo vom „Redesign“ aufs „Default“. Damit haben wir eine Rochade der Devices gemacht, um das neue Design aufzuschalten und das alte Design weiterhin zugänglich zu machen.

DeviceSwitchVorher

Dieser Switch kann mit wenigen Zeilen Code / oder Script (Powershell) umgesetzt werden.

Danach würde es in etwa so aussehen:

DeviceSwitchNachher

Einige Nachteile oder nennenswerte Charakteristik hat diese Lösung allerdings schon. Wird der Switch nicht auf Template-Ebene gemacht, weil eben beispielsweise andere Sites im alten Design weiterlaufen müssen, werden neue Seiten beispielweise im alten Design erzeugt. Das heisst, dass man um eine gewisse Logik zum Umstellen einer Seite für den Autor nicht herumkommen wird.

Zudem sollte bei einer solchen Umstellung die folgenden Fragen und Gedanken nicht vergessen werden:

  • Muss ich das neue/alte Design besonders schützen?
  • Rechteverteilung für Autoren: Ab wann darf und soll editiert werden?
  • Wie ist das Handling nach der Designumstellung?
  • Aufräumarbeiten: Löschen des Redesign Devices?
  • etc.

Fazit: Devices eignen sich sehr gut um „Redesigns“ umzusetzen. Die Kleinigkeiten und Hindernisse bei der Umsetzung sollte man allerdings nicht unterschätzen. Der Einsatz bereits vorhandener Sitecore-Bordmittel ist dabei das besonders charmante an diesem Ansatz.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>