NZZ Connect

Aus 12 wird 1
Für NZZ Connect haben wir ein Statamic Multisite CMS konzipiert und entwickelt, welches die Erstellung und Pflege von verschiedenen Websites wesentlich vereinfacht.
Kunde
Neue Zürcher Zeitung AG, Zweigniederlassung NZZ Connect
Seit
2023
Kategorien
Webentwicklung, Konzept und Design

Über NZZ Connect

NZZ Connect, Zweigniederlassung der NZZ, organisiert national relevante Konferenzen und Events, wie das Swiss Economic Forum, die FutureHealth Konferenz oder das Open-i. Dabei schaffen sie einen Austausch zwischen Akteur*innen aus Wirtschaft, Politik, Wissenschaft und Behörde, um zentrale und aktuelle Themen zu diskutieren.

Ausgangslage - 12 individuelle Websites

Die Events, Programme und Formate von NZZ Connect werden auf ihren jeweiligen Websiten präsentiert.
Bisher waren diese Webseiten eigenständig, was bedeutete, dass dafür über 12 verschiedene Setups mit individuellen Content Management Systemen und Technologien im Einsatz waren. Diese musste einzeln und unabhängig voneinander verwaltet und gepflegt werden, was natürlich ein entsprechend grosser Aufwand zur Folge hatte, insbesondere für das Content Management Team. Für jede Seite mussten alle Inhalte individuell erstellt und gepflegt werden, auch wenn sich Inhalte in ihrer Struktur ähnlich sind (z.B. Programm) oder sogar identisch (z.B. das Portrait einer Speakerin die an zwei der Events auftritt). Zusätzlich war die Bedienung der Systeme nicht einheitlich, was grossen Aufwand für Einarbeitung und Schulung bedingte und letztlich war natürlich das Management und die Koordination mit unterschiedlichen Agenturen mit Aufwand verbunden.

Ziel war es also, eine Lösung zu finden, welche diese Aufwände zukünftig minimiert und den Unterhalt aller Websites erleichtert. Dazu haben wir in mehreren Workshops mögliche Ansätze und Lösungen diskutiert.

Dominic Lüthy und Michale Schranz am Workshop bei Apps with love
Post-its mit gesammelten Ideen am Discovery Workshop mit NZZ und Apps with love
Gesammelte Ideen werden gemeinsam diskutiert
In gemeinsamen Workshops wurden Hypothesen aufgestellt, verschiedene Lösungsansätze entworfen und vor allem ganz viele Fragen diskutiert.

Lösung: Zentrales Content Management System

Die einzelnen Events benötigen weiterhin ihre eigenen Websites, da sie jeweils ein eigenständiges Thema, Erscheinungsbild, Zielgruppe und Corporate Identity haben. Das oder die Systeme dahinter jedoch werden abgelöst und mit einem einzigen System ersetzt, über welches die Sites zentral verwaltet werden können. Zum Einsatz kommt dafür Statamic als unser «CMS des Vertrauens» - mehr Details zur Technik führen wir weiter unten aus.

Das Vorgehen in der Umsetzung

In einem ersten Schritt haben wir die bestehende «Website-Landschaft» von NZZ Connect analysiert. Wir haben Gemeinsamkeiten identifiziert und eine umfassende Auflistung der existierenden Komponenten und Modulen gemacht. Damit schafften wir eine Auslegeordnung, basierend auf welcher wir die zukünftig benötigten Komponenten und Features priorisieren konnten.

Ausschnitt aus Storybook worin die UI-Komponenten erstellt wurden

Dadurch dass ein Grossteil der Inhalte als wiederverwendbare Komponenten umgesetzt wurde, können Inhalte, die auf unterschiedlichen Seiten eingesetzt werden (wie beispielsweise Speaker oder Sponsoren) und einfach wiederverwendet werden. Der Einsatz von wiederverwendbaren Inhalten garantiert einheitliches Design & Konsistenz über die verschiedenen Seiten hinweg, während gleichzeitig die Designs und Brandings der verschiedenen Events eingehalten werden können. Für jede Seite können eigene Schriften, Farben, Favicons etc. festgelegt werden.

Weil Statamic als alleinige API für alle Inhalte genutzt wird, kann das Content Management Team Inhalte zentral editieren oder hinzufügen, welche dann automatisch auf allen gewünschten Seiten aktualisiert werden. Dies macht das Pflegen von verschiedenen Seiten besonders effizient.
Mit Hilfe der Content Preview Funktion von Statamic kann dann sichergestellt werden, dass alle Inhalte so aussehen wie gewünscht, bevor sie publiziert werden

Dominic Lüthy

«Das Vorgehen von Apps with love mit einer intensiven Phase mit Workshops, Anforderungserhebung und Diskussion hat effektiv zu einem gemeinsamen Verständnis für unsere Herausforderungen geführt. Das wiederum hat ermöglicht, termingerecht auf den Stichtag die erste mit dem neuen System realisierte Seite für das Swiss Economic Forum live zu schalten. Die Webauftritte für alle unsere Events konnten wir Schritt für Schritt in das CMS integrieren und damit Synergien nutzen. Ziel erreicht!»

Dominic Lüthy, Director Marketing & Communication

Technische Umsetzung

Die grosse Herausforderung bei einem Multisite-CMS, respektive bei den Überlegungen ob eines überhaupt sinnvoll ist, ist unter anderem der Aufwand für Automationen und die Frage ob man sich mit standardisierten Komponenten und über Seiten hinweg geteilten Inhalten am Schluss nicht mehr Arbeit und mühsame Abhängigkeiten einhandelt. Durch die Flexibilität von Statamic und einer cleveren Architektur, haben wir es geschafft diese Herausforderung zu meistern. In der Übersicht ist die Architektur (relativ) simpel, die Komplexität liegt in den Details. Die zu beschreiben würde hier den Rahmen sprengen und sind in Zukunft vielleicht mal Thema für einen Blogpost.

Architektur der neuen Lösung für NZZ Connect
Architektur der neuen Lösung für NZZ Connect

Kernstück ist die Kombination von Statamic als zentraler headless-Content-Hub und Vercel als Infrastruktur als Service (IaaS) und massiver «Deployment-Vereinfachung» mit GitLab: Der Deployment-Prozess ist vollständig automatisiert. Sobald eine Codeänderung in das Repository (GitLab) hochgeladen wird, erfolgt die Bereitstellung der Website automatisch über Vercel. Das bedeutet, dass keine manuelle Installation oder Aktualisierung notwendig ist, was Zeit spart und Fehler reduziert.

Aufgrund des Einsatzes von Vercel ergab sich die Nutzung von Next.js, ein modernes Framework, das auf React basiert, im Frontend. Next.js handelt die Requests auf die jeweilige Domain und leitet diese weiter. Durch effiziente Serveranfragen und optimierte Darstellungsprozesse sogt Next.js dafür, dass die Websites schnell laden und die Gesamtperformance verbessert wird.

Das eingesetzte CMS Statamic basiert auf Laravel. Laravel bietet viele nützliche Werkzeuge, um die Datenverarbeitung und API-Anpassungen effizient zu gestalten. Mit Funktionen wie Validierung und Listenern lässt sich das Backend flexibel anpassen und der Code bleibt dabei übersichtlich und wartungsfreundlich. Dank dem Headless-Einsatz von Statamic kann der Content nun einfach über die API abgerufen und somit auch in der NZZ Connect App, die Semabit entwickelt hat, genutzt werden. Das heisst auch Informationen wie zum Beispiel das Verzeichnis der Redner*innen an einem spezifischen Event, können an einem Ort gepflegt werden und dann unabhängig ob Website oder App genutzt werden.

Fazit - Vereinfachung und mehr Effizienz

Die neue Lösung stellt eine beachtliche Vereinfachung für das Content Management Team und die Event-Organisator*innen von NZZ Connect dar. Sie müssen sich nicht mehr mit verschiedenen Systemen und deren Eigenheiten auskennen, sondern nur noch mit einem einzigen. Neue Seiten können schnell und einfach erstellt werden und das Erfassen und Pflegen von Inhalten wird effizienter. Wo früher mehrere Tage für eine neue Seite erforderlich waren, brauchen wir jetzt nur noch 6–8 Stunden, um eine neue Website einsatzbereit zu machen.

Die Events behalten ihr eigenes visuelles Erscheinungsbild, während sie durch die wiederverwendbaren Komponenten trotzdem als NZZ Connect Events erkennbar sind. 
Dazu kommt, dass die API auch für die mobile App verwendet wird, wodurch der gesamte Inhalt zentral an einem Ort gepflegt wird und sowohl auf der Website als auch in der App einheitlich dargestellt wird.

Durch die zentralisierte Lösung hat sich auch die Anzahl Ansprechpersonen und Serviceverträge für NZZ Connect deutlich reduziert, wodurch auch aus administrativer Sicht ein schlankeres Setup erreicht wurde.

Zur Übersicht
Sara Weibel
Sara Weibel
Co-Head of Project Management
Sie bringt zu Ende was am Anfang aussah als hätte es kein Ende. Ihre Vorfahren arbeiteten schon an den Pyramiden von Gizeh, der Chinesischen Mauer und dem Eiffelturm.
Stefan Spieler
Stefan Spieler
Concept & Design
Design Profi in allen Belangen. Trägt jetzt Bart, ist aber trotzdem für jeden Blödsinn zu haben, wenn es mit Design, Games, 3D, Ping Pong, schwimmen, reiten oder lesen zu tun hat. Einer der ersten in diesem Laden und immer noch einer der besten.
Nick Gerber
Nick Gerber
Concept & Design
Er kennt jeden Shortcut und jedes Easteregg, kein Softwaretool, welches er nicht schon getestet und verflucht hat. Die klare Gewinnerin: Notion. Damit arbeitet er so strukturiert, dass nebst dem Konzipieren, Designen und Entwickeln von Websites Zeit bleibt, um die wirklich wichtigen Fragen des Lebens zu stellen. Zum Beispiel, wer die Töggeli-Eigentor-Statistik anführt.
Alessandro Pittori
Alessandro Pittori
Web Development
Was Alessandro tagein tagaus genau hört wissen wir nicht - aber seine Kopfhörer oder was er darüber abspielt scheinen ihm Kraft für die Umsetzung von Web-Frontends aller Art zu geben - solange er sich nicht zu viel mit PHP rumschlagen muss, das mag der Basler mit Wahlheimat Bern nämlich nicht.
Eduard Zielke
Eduard Zielke
Project Management | Support & Help Desk
Unser Geheimagent par excellence: Tagsüber getarnt als Projektmanager, spioniert er nachts beim Schütteln von Martinis die Kundschaft als Barkeeper aus, verständigt sich problemlos in jeder erdenklichen Sprache und sollte es mal ganz brenzlig werden, kann er immer noch auf die Kunst des Kampfsports zurückgreifen. Sein Name ist Zielke - Eddy Zielke.
Rémy Böhler
Rémy Böhler
Head of Web Development
Wenn er wollte könnte er eine Webseite mit seinem kleinen Zeh und verbundenen Augen programmieren, will er aber nicht. Unser Crack wenn es um Webentwicklung geht.
Valentin Naegeli
Valentin Naegeli
Head of Marketing & Sales
Wer mit uns eine App entwickeln möchte, bekommt von ihm erste Infos und Tipps. Er kennt sich mit dem ganzen App-Ökosystem aus und weiss, ob sich eine App lohnt oder ob besser zuerst in das Marketing oder eine Webseite investiert werden müsste. Wir nennen ihn auch „The Wolf of Landoltstreet“.
Kim Jeker
Kim Jeker
Web Development
Er träumt von den wildesten Backend-, Frontend-, API-, und CMS-Konzepten und wenn man ihn fragt ob die auch realisierbar sind, ist seine Antwort ein simples «Jä». Kein Wunder bei so einer Schatztruhe an Erfahrung!
das Logo des Unternehmens Opinov8 auf weissem Hintergrund
Opinov8
Web & App Entwicklung
Wir haben grad gemerkt, dass du mit Internet Explorer surfst. Unsere Webseite sieht damit leider nicht so schön aus.

Du willst erfahren warum das so ist?
Wir haben darüber geschrieben.

Zum Blog

Du brauchst Hilfe bei der Umstellung?
Melde dich. Wir helfen gern.

Kontakt

Einen neuen Browser installieren?
Hier gibt es Auswahl.

Browser