Auszeichnungen
Für eine nachhaltige Energiezukunft braucht es alle! EnergieSchweiz mobilisiert Privatpersonen, Unternehmen und die öffentliche Hand. www.energieschweiz.ch ist ein zentrales Instrument des nationalen Programms, das unter dem Dach des Bundesamtes für Energie agiert. Als eine der ersten Websites in der Bundesverwaltung setzt EnergieSchweiz auf eine Headless-Architektur. Das Zusammenspiel zwischen den verschiedenen Bausteinen funktioniert nahtlos: Contentful agiert als zentraler Contenthub, GatsbyJS generiert auf Basis von React statische HTML-Seiten und GitLab und Kubernetes sorgen für automatisierte Deployment-Prozesse.
Diese innovative Gesamtarchitektur ist energiegeladen: Sie erlaubt schlanke Prozesse, einen flexiblen Umgang mit Inhalten und beeindruckt mit unglaublich kurzen Ladezeiten. Unsere Expert:innen waren verantwortlich für die technische Konzeption und Architektur, die Frontend- und Backend-Umsetzung, die SEO-Konzeption, die Inhaltsmodellierung sowie die Content-Erstellung und -Migration.
- Kunde
- EnergieSchweiz, Bundesamt für Energie
- Kunde seit
- 2020
- Go-Live
- März 2021
- Website
- www.energieschweiz.ch
5
Monate von Kick-off bis Go-live
1
einziges nicht-virtuelles Meeting – das Kick-off
95,6%
Core Web Vitals Zielerreichung
47
erstellte Miro-Whiteboards
Content First!
Die Energielandschaft ist hoch dynamisch. Neue Entwicklungen aufgreifen und für nachhaltige Massnahmen sensibilisieren, ist der Schlüssel. Die entkoppelte und flexible Headless-Architektur setzt genau hier an: Der Fokus liegt auf den Inhalten. Sie mobilisieren, informieren, klären auf und motivieren. Contentful als zentraler Contenthub erlaubt es EnergieSchweiz, intuitiv Inhalte zu erfassen und zu verwalten. Inhaltliche Anpassungen können flexibel und unabhängig vom Backend vorgenommen werden. Inhalte aus Umsystemen werden über Schnittstellen einfach einbezogen. Zum effizienten Deployment tragen auch die automatisierten CI/CD-Prozesse bei. Innert kurzer Entwicklungszeit ist so eine zukunftsfähige Plattform entstanden, die EnergieSchweiz flexibel, agil und kostengünstig unterstützt, alle Stakeholder auf dem Weg zu einer nachhaltigen Energielandschaft einzubinden.
Inhaltsmodell als Herzstück
Im Zentrum des Contenthub steht das strukturierte, ausbaufähige Inhaltsmodell. Es definiert die Inhaltselemente, deren Struktur und Abhängigkeiten im Detail. Um die Ansprüche ganzheitlich abzubilden, wurde es mit allen Inhaltsverantwortlichen bei EnergieSchweiz in mehreren Workshops und unter Berücksichtigung der Designvorgaben Schritt für Schritt entwickelt. Das Inhaltsmodell schafft die Balance zwischen zentraler Struktur und Bewirtschaftung und individuellen Gestaltungsmöglichkeiten. Dies stellt die hohe Qualität und Einheitlichkeit der Inhalte sicher – unabhängig von Format und Kanal. Zu Beginn der Inhaltsmigration haben wir das Inhaltsmodell validiert und ergänzt.
Unic hat mit einem hochprofessionellen Team und viel Leidenschaft das Projekt zum Fliegen gebracht. Die Zusammenarbeit war geprägt von Respekt, Verständnis und Einsatz.
Laura Curau
Fachspezialistin digitale Medien, EnergieSchweiz
Headless und blitzschnell
Die Headless-Architektur entkoppelt das CMS als Inhaltssystem und Frontend als darstellendes Medium. Der Fokus liegt damit auf den Inhalten, ihren Zusammenhängen sowie ihrer effizienten Bewirtschaftung. Die auf Basis von GatsbyJS statisch generierte Website beeindruckt auch Besucher:innen: Die Seiten werden blitzschnell transferiert. Selbst mit einer 3G-Verbindung ist der Inhalt innerhalb weniger Sekunden verfügbar. Die Besucher:innen müssen einzig auf das eine oder andere Bild warten. Das Setup mit modernen Webtechnologien und verteilter Infrastruktur reduziert bei einem starken Andrang von Besucher:innen die Last auf weitere Systeme und kann verhältnismässig einfach vertikal skaliert werden.
Eine Editor:innen-Experience, die begeistert
Als zentraler Hub dient das Headless-Content-Management-System Contentful, welches als SaaS-Lösung von Contentful betrieben wird. Contentful bietet eine Editor:innen-Experience auf höchstem Niveau. Die Editor:innen können sich voll auf ihre Kernkompetenz, die Entwicklung von wertvollen Inhalten, konzentrieren. Sie werden durchgängig vom Anlegen, über das Erarbeiten bis zur Publikation von Inhalten unterstützt. Die automatische Prüfung von Referenzen verhindert ungültige Verlinkungen von Inhalten (Links, Bilder, Anhänge etc.). Die direkte Sicht auf Übersetzungen innerhalb eines Inhalts reduziert auch den Kontextwechsel bei Übersetzungsarbeiten und Aktualisierungen derselben Felder über die verwendeten Sprachen hinweg.
Statische Seiten mit Gatsby
GatsbyJS generiert React-basiert und GraphQL-betrieben statische Websiten. Sobald der Buildprozess abgeschlossen ist, ist die Website funktionstüchtig. Eine zentrale Information zeigt Fehler und Ursachen an und ermöglicht so eine rasche Problembehebung. Dies hat den grossen Vorteil, dass Fehlfunktionen im Frontend die User Experience nicht beeinträchtigen. Gleichzeitig erlaubt es nicht nur eine hohe Zugriffs-Geschwindigkeit, sondern stellt auch die Sicherheit und Verfügbarkeit des Systems sicher. Entwickler:innen und Editor:innen haben die Sicherheit, dass das System auf allen Umgebungen das gleiche Verhalten zeigt.
Automatische Imports
Die Inhalte im CMS werden zu grossen Teilen durch die Editor:innen gepflegt. Zusätzlich zu diesen Inhalten werden durch einen automatischen Importer öffentliche Publikationen, die vom Bundesamt für Energie verwaltet werden, in Contentful importiert. Die Publikationen sind dadurch für die Editor:innen ohne Kontextwechsel einsehbar und in ihren Inhalten verknüpfbar. Aktualisierungen und Änderungen an Publikationen werden automatisch übernommen. Spezielle Attribute wie z.B. nur für EnergieSchweiz relevante Tags können von EnergieSchweiz selbstständig gepflegt werden. Bilder sind dank dem CDN und der Image API von Contentful direkt skalierbar.
Rasch zur richtigen Information
EnergieSchweiz will Benutzer:innen rasch, ohne lange Suchwege zur richtigen Information führen. Eine effektive Suche ist dafür entscheidend. Für die Suche wird der SaaS Dienst Algolia eingesetzt. Ändert sich Inhalt oder Quelltexte der Website, so wird im Rahmen der Frontend Build Pipeline auch der Suchindex aktualisiert. Ein entsprechend konfiguriertes Gatsby-Plugin erstellt die benötigten Daten und übermittelt an Algolia die veränderten Inhalte. Suchergebnisse der Website werden vom Frontend im Browser der Benutzer:innen direkt aus Algolia geladen, transformiert und angezeigt.
Automatisiertes Deployment
Die Gesamtarchitektur bietet aufgrund des hohen Automatisierungsgrades der Prozesse eine agile Weiterentwicklung des Informationsportals. Die Plattform wird vom Frontend über die Erfassung des Contents in Contentful bis hin zur Anbindung der Drittsysteme automatisiert gebaut und nur nach erfolgreicher Durchführung der automatisierten Tests auf die Produktion ausgerollt. Der Betrieb der Website wird durch einen Kubernetes Cluster sichergestellt, der die Applikationscontainer betreibt. Abhängigkeiten der Systeme auf weitere Systeme wurden auf ein Minimum reduziert, so dass auch der Ausfall von Drittsystemen nicht dazu führen kann, dass die Website von EnergieSchweiz nicht mehr erreichbar ist. Die von Begasoft betriebene GitLab Umgebung benutzen wir als zentrale Steuerung und Kontrolle der gesamten Automatisierung für EnergieSchweiz. Mit Gitlab definieren wir den kompletten CI/CD Lifecyle über alle Umgebungen hinweg und automatisieren den kompletten Seitenbau an zentraler Stelle.
Reduzierter und konzentrierter Content
Der Zeitpunkt der Content-Migration wurde dazu genutzt, vorhandene Inhalte von Grund auf zu überarbeiten. Das Relaunch-Motto «reduziert, konzentriert und vereinfacht» war dabei die zentrale Haltung. Den Mehrwert der Benutzer:innen im Blick, haben wir redundante Inhalte gelöscht, komplizierte Texte umformuliert und den Lesefluss dank strukturierenden Elementen optimiert. Gemäss der neuen UX Architektur haben wir Inhalte intuitiver angeordnet und sprechende Call-to-Actions formuliert. Um den Benutzer:innen die teilweise technischen Informationen verständlicher zu übermitteln, haben wir UX-Writing-Techniken angewandt. Mit einer konsistenten Schreibweise wollten wir zu einer besseren User Experience beitragen. Deshalb haben sich sämtliche Content-Ersteller:innen beim Schreiben an die neuen Content Guidelines gehalten.
Hand in Hand
energieschweiz.ch ist ein Gemeinschaftswerk von Expert:innen von EnergieSchweiz, Ginetta, Noord, Silberrücken und Begasoft. Das Commitment und die Energie im Projektteam waren beeindruckend. In der an Scrum angelehnten Zusammenarbeit hat es sich insbesondere in der Schlussphase ausgezahlt, dass beim Kick-off und über die ganze Projektlaufzeit hinweg, viel Raum für Persönliches und Zwischenmenschliches eingeplant wurde. Die Check-in zu den Meetings dauerten im Durchschnitt 30 Minuten. Resultiert hat daraus ein starkes Team, bei dem alle auf gleicher Augenhöhe fürs gleiche Ziel gekämpft haben.
Die Headless-Architektur war Neuland für das ganze Team, doch rückblickend die beste Entscheidung. Dank des iterativen Prozesses in der Erstellung der Inhaltsarchitektur wurden alle Redaktionsmitglieder einbezogen und die Transformation begleitet.
Laura Curau
Fachspezialistin digitale Medien, EnergieSchweiz
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.
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.
