Web Technology: headless with strategy part I

Herausforderung von Marketing-Webseiten

Für eine Firma, die vereinfacht gesagt Webseiten erstellt, haben wir uns mit unserer eigenen oft erstaunlich schwer getan. Das liegt daran, dass wir getrieben von der Komplexität der Herausforderungen denen wir normalerweise begegnen einen hohen Anspruch an die Qualität haben. Dieser Anspruch bezieht sich insbesondere auf das Nutzererlebnis. Die Art, wie wir in unseren Projekten diesem Anspruch gerecht werden – und mit denen wir uns wohlfühlen weil wir uns täglich damit beschäftigen – eigneten sich bislang nicht für Marketing Webseiten. Zwar sind diese technisch perfekt, leider im Kontext von Marketing Webseiten jedoch sehr starr (weil größtenteils selbst entwickelt), viel zu teuer und aufwändig in der Pflege.

Die einzige Alternative für “gut selbst machen” war lange ein CMS (Wordpress, Typo3, Webflow, o.ä.) zu nehmen. Hier gibt es leider nur zwei Möglichkeiten: Man bleibt weitestgehend in vorgegeben Designs (was nicht mit unserem Qualitätsanspruch vereinbar gewesen wäre) oder muss so tief ins CMS einsteigen (inklusive etwaiger Templatesprachen), dass es schlicht nicht wirtschaftlich gewesen wäre. Auch ist die Flexibilität selbst Fluch und Segen: Es erlaubt sehr schnell ein Bruch mit dem Designsystem, inkonsistente Darstellung, etc. Letztendlich gibt es tolle Designagenturen, die tief in den jeweiligen Technologien zu Hause sind – kurzum: Es ist nicht sinnvoll, dass wir als Zweitag uns damit beschäftigen.

Seit einigen Jahren gibt es jedoch eine spannende Entwicklung, die wir uns zunutze gemacht haben: Die Möglichkeit, fertige Systeme (sog. Headless CMS) einzukaufen, die Besucherseite der Website aber komplett selbst zu gestalten (technologisch wie gestalterisch). Das versetzt uns in die Lage, unseren hohen Qualitätsanspruch und gelernte Abläufe und Technologien bei der Entwicklung von Software mit einer bereits fertigen, flexiblen Lösung zu kombinieren, die uns die schweren Aufgaben abnimmt. Anders als bei klassischen CMS Systemen sind wir nicht an das System selbst gebunden, sondern nutzen offene Schnittstellen, um die Lösung an unsere selbstgebaute Oberfläche anzuschließen. Wir arbeiten also effizienter, kümmern uns nur um den für uns wichtigen Teil und müssen keine Abstriche in Qualität und Nutzererlebnis machen. Trotzdem gibt es ein User Interface, welches allen Mitarbeitenden erlaubt, Inhalte zu erstellen und zu bearbeiten.

Das führt uns zurück zu zweitag.de: Zweitag V3, die Vorgängerversion der aktuellen Website, war ein Ergebnis der Option “alles selbst machen”. Technisch auf höchstem Niveau, jedoch nur von Mitarbeitenden zu bearbeiten und zu pflegen, die sich mit Ruby, Markdown, git und anderen Technologien auskannten. Regelmäßig mussten Abhängigkeiten erneuert werden, was im Zweifel dazu geführt hat, dass das Veröffentlichen eines neuen Blogposts zu aufwendig war. Das hat lange gut für uns funktioniert, stand zuletzt aber einem Wachstum von Zweitag (insbesondere im Bereich Content Marketing) im Wege.

Unsere Lösung

Die Website komplett neu zu machen, ist genau die Art von Vorgehen, die wir schon oft bei anderen scheitern gesehen haben: Man beschäftigt sich mit so vielen Dingen gleichzeitig (Design, Inhalt, Technologie, …), dass man zu langsam ist. Das Projekt droht zu einem “schwarzen Loch” zu werden, indem sich die Zeit selbst krümmt und verdichtet wird und die trivialsten Tasks Wochen dauern und die Tasklast dabei selbst nie abnimmt. Immer im Hintergrund hat man dabei eine bestehende Lösung, die erstmal der Benchmark für Neues ist, was den Prozess zusätzlich schwierig macht.

"Wir haben uns daher für eine Strategie entschieden, die sich bei Zweitag in verschiedenen Projekten bewährt hat: Statt “Big Bang” eine inkrementelle Verbesserung des Systems."

Grob legten wir folgenden Ablauf fest:

Phase 1:

• Kurzfristiges Anbinden eines Headless CMS an die alte Website (um uns Zeit zu kaufen). Wir haben uns hier für Contentful entschieden, da es – zu recht – sehr beliebt ist und sich verhältnismäßig gut in unser altes System integrieren ließ. Andere Headless CMS (wie GraphCMS, StoryBlok, etc.) boten diese Integration nicht und wir hätten erst selbst Adapter schreiben müssen. Statische Inhalte werden nach und nach abgelöst, angefangen bei unseren Blog Posts.
• Replizieren der alten Website in einem neuen, geeigneteren Technologiestack (dazu mehr im parallelen Blog Post)

Durch den neuen Technologiestack ermöglichen wir uns, die folgenden Punkte sehr viel effizienter zu bearbeiten (Phase 2):

• Inkrementelle Verbesserungen des Designs und Komponentensystems
• Neue Funktionen und Inhalte
• Frei Gestaltveränderungen der Seiten im CMS (hierfür – und das wussten wir vorher – mussten wir von Contentful weg zu einem anderen CMS – bei uns ist die Wahl auf Dato gefallen)

Mittlerweile sind Phase 1 und 2 abgeschlossen und das Ergebnis freut uns sehr.Die Website ist nicht nur flexibler geworden ohne Qualität eingebüßt zu haben, der Fortschritt macht sich auch an anderen Stellen bemerkbar. So dauert es sieben statt 20 Minuten, eine neue Version der gesamten Website zu veröffentlichen (viel Zeit davon geht in Tests, die bei jeder Veröffentlichung ausgeführt werden. Zeit sparen wir vor allem, da Bilder dynamisch und nicht mehr bei Veröffentlichen optimiert werden). Blog Einträge können ohne veröffentlicht zu werden in einer Vorschauversion der Website angezeigt werden, während sie geschrieben werden. Neue Features können wesentlich schneller umgesetzt werden – zum einen, weil wir in der Technologie mehr zu Hause sind, zum anderen, weil es eine größere Community gibt, die fertige Pakete für unser System liefert. Und – vielleicht sogar das wichtigste: Die Website fühlt sich nochmals viel schneller an, da intelligent Inhalte vorgeladen werden, bevor überhaupt auf einen weiteren Menüpunkt geklickt wurde und Bilder dynamisch an das Endgerät des Benutzers angepasst werden.

Learnings

Wieder einmal hat sich ein iteratives Vorgehen bewährt: Wir konnten sehr schnelle Erfolge feiern und ein gutes Tempo an den Tag legen, was wiederum die Motivation und Akzeptanz hochgehalten hat. Ob der Schritt, erst ein Headless CMS in die bestehende Seite einzubauen, der richtige war, ist schwer zu sagen, hat uns aber Zeit erkauft größere Veränderungen in der neuen Technologie voranzutreiben.

Der Umzug bietet uns folgende Vorteile:

• Flexible Gestaltung von neuen Seiten / Landingpages mit einem vorgegeben Design-System, hochwertigen Komponenten und einem hierdurch bedingten hochwertigen Look and Feel
• Änderungen an Inhalten der Website kann ohne Änderung der Programmierung der Website vorgenommen werden
• Durch den Einsatz von Services und einem weit verbreiteten Stack verringert sich der Wartungsaufwand merklich und der Pflegeprozess der Website ist sehr viel schneller und robuster geworden
• Dadurch, dass wir trotzdem selbst entscheiden wo und wie die Website gehostet ist können wir unserer Standard-Prozesse nutzen und haben so Silowissen abgebaut.
• Nicht zuletzt ist jede:r in der Lage die Website zu bearbeiten