Voller Energie

EnergieSchweiz, Bundesamt für Energie

Auszeichnungen

Kunde
EnergieSchweiz, Bundesamt für Energie
Kunde seit
2020
Go-Live
März 2021
Website
www.energieschweiz.ch
Casestudy_EnergieSchweiz_screen_facts

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.

EnergieSchweiz_teaser01

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
EnergieSchweiz_teaser02

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.

Mehr zu Headless

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.

Mehr zu Contentful

EnergieSchweiz_teaser03

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.

Tobias FreiMärz 2022

EnergieSchweiz: Die Frontend-Metrik als Endperformance

EnergieSchweiz: Die Frontend-Metrik als Endperformance

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.

EnergieSchweiz_teaser04

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.

EnergieSchweiz_teaser05

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

Mehr zu EnergieSchweiz

EnergieSchweiz_teaser02

David DästerAugust 2021

Headless bei EnergieSchweiz: Hier spielt alles zusammen

Ein Headless CMS selber zeigt noch keine Website. Ein Kubernetes-Cluster an sich liefert noch nichts aus. Erst das Zusammenspiel von Architektur, Code, Tools, Prozessen und Menschen ermöglicht es, dass eine Inhaltsanpassung im CMS eine Aktualisierung der statisch generierten Website auslöst.

Headless bei EnergieSchweiz: Hier spielt alles zusammen

David Däster

Carmen CandinasAugust 2021

Mit strukturiertem Content trumpfen

Für den Relaunch von energieschweiz.ch hat das Redaktionsteam viel Energie in die Content-Überarbeitung gesteckt. Eine Content-Strategie, neue Formate und ein Content-Management-System mit Headless-Architektur haben frischen Wind in die Webredaktion gebracht.

Mit strukturiertem Content trumpfen

Carmen Candinas

Kontakt für Ihre digitale ​Lösung mit Unic

Termin buchen

Sie 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).​

Gerrit Taaks

Wir sind da für Sie!

Termin buchen

Sie 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).

Melanie Kluhe
Stefanie Berger
Philippe Surber
Stephan Handschin