EnergieSchweiz The Future of Energy

To ensure the future of energy is sustainable, everyone will need to play their part. EnergieSchweiz aims to mobilise individuals, companies and public authorities to do exactly this. www.energieschweiz.ch is a key instrument of the national energy programme under the aegis of the Swiss Federal Office of Energy. It is also one of the first websites in the federal administration to opt for headless architecture.

The various components interact seamlessly: Contentful works as a central content hub, GatsbyJS generates static HTML pages based on React and GitLab and Kubernetes enables automated deployment processes. This innovative overarching architecture is bursting with energy: It allows for lean processes, flexible use of content and impressively short load times.

Our experts were in charge of the technical concept and architecture, frontend and backend implementation, SEO concept, content modelling, content generation and migration.

Customer
EnergieSchweiz, Swiss Federal Office of Energy
Customer since
2020
Go Live
March 2021
Website
www.energieschweiz.ch
  • 5 months from kick-off to go-live
  • 1 non-virtual meeting – the kick-off
  • 95,6% Core Web Vitals performance
  • 47 Miro whiteboards generated

Content First!

The energy landscape is highly dynamic. The key is to pick up on new developments and create an awareness for sustainable behaviours. This is where the decoupled and flexible headless architecture comes in: The focus is on the content. It mobilises, informs, explains and motivates. Contentful as a central content hub enables EnergieSchweiz to capture and manage content intuitively. Changes to the content can be made independently from the backend. Content from surrounding systems can be integrated via interfaces. Automated CI/CD processes contribute to efficient deployment. Within a short development period, we created a future-proof platform that provides flexible, agile and cost-efficient support to EnergieSchweiz in their endeavours to bring all stakeholders on board for the sustainable future of energy.

Content Model as a Centrepiece

The extendable, structured content model is at the heart of the content hub. It defines content elements, their structure and dependencies in detail. To make sure all requirements are reflected, it was developed with all content managers at EnergieSchweiz in several workshops while taking into account the design specifications. The content model balances the centralised structure and management and individual design freedoms. This ensures the high quality and consistency of content – regardless of format and channel. At the start of the content migration, the content model was validated and expanded.

With their driven and highly professional team, Unic helped this project soar. The collaboration was characterised by respect, mutual understanding and commitment.

Headless and Fast as Lightning

The headless architecture decouples the CMS as a content system from the frontend as display medium. This puts the focus on the content, its relations and efficient management. The website, which is generated statically based on GatsbyJS, also impresses visitors: The pages are displayed at lightning speed. Even with a 3G connection, content is available within seconds. Only images take a little longer to load. If there is a spike in visitor numbers, the setup with modern web technologies and distributed infrastructure diverts load to additional systems and is relatively easy to scale vertically.

An Exciting Experience for Editors

Headless content management system Contentful serves as a central hub, operated as an SaaS solution by Contentful. Contentful offers editors a first-class experience. Editors can focus entirely on their key skill, the generation of valuable content. They are supported in the generation, development and publication of content. Automatic reference checks prevent dead content links (weblinks, images, attachments etc.). An integrated translation view for content also reduces context switching for translations and for edits made to the same fields in several languages.

Static Pages with Gatsby

GatsbyJS generates React-based and GraphQL-driven static websites. As soon as the build process has been completed, the website is functional. A central info section displays errors and causes, allowing for quick fixes. The major advantage of this setup is that frontend bugs do not affect the user experience. At the same time, this not only ensures high access speed, but also the security and availability of the system. Developers and editors can be sure that the system will behave identically in all environments.

Automatic Imports

Content in the CMS is mostly managed by editors. In addition to this content, publications managed by the Swiss Federal Office of Energy are imported into Contentful by an automatic importer. This makes the publications available to the editors without switching contexts, and the editors can then link to these in their content. Updates and changes to publications are applied automatically. Special attributes such as tags relevant only to EnergieSchweiz can be added and managed independently by EnergieSchweiz. Thanks to the CDN and the Contentful image API, images are directly scalable.

The Right Information at Your Fingertips

EnergieSchweiz wants to direct users to the right information swiftly, without long and involved searching. An effective search function is key here. The search uses the SaaS solution Algolia. When the content or source code of the website changes, the search index is also updated as part of the frontend build pipeline. A Gatsby plugin configured for this purpose generates the necessary data and transfers the edited content to Algolia. Search results from the website are loaded, transformed and displayed directly from Algolia in the user’s browser.

Automated Deployment

Due to the high degree of automation of the processes, the overall architecture is perfectly suited to future agile enhancements to the info portal. From the frontend to content creation in Contentful and the integration of third-party systems, the platform is built automatically and only rolled out to the productive system after successful completion of all automated tests. The operation of the website is ensured by a Kubernetes cluster, which manages the application containers. Dependencies of the systems on additional systems were reduced to a minimum, so that even an outage of third-party systems will not render the EnergieSchweiz website unavailable.

We use the GitLab environment operated by Begasoft to manage and control the automation for EnergieSchweiz. With GitLab, we define the entire CI/CD lifecycle across all environments and automate the build process for the site in one place.

Reduced and Concentrated Content

As part of the content migration, existing content underwent a general revision. The motto for the relaunch – “reduced, concentrated and simplified” – served as a guideline for the revision. With added value for users in mind, we deleted redundant content, rephrased complicated texts and improved the reading flow with structural elements. In line with the new UX architecture, we created a more intuitive arrangement of content and added specific calls to action. We employed UX writing techniques to help users better understand technical information. To further improve the user experience, we worked on the consistency of texts. All content editors followed the new content guidelines in their writing.

Hand in Hand

energieschweiz.ch is the result of a collaboration between experts from EnergieSchweiz, Ginetta, Noord, Silberrücken and Begasoft. The level of commitment and energy in the project team was impressive. In the Scrum-based teamwork, especially towards the end of the project, it paid off that we had made time for interpersonal interaction and exchange during the kick-off and throughout the course of the project. On average, the check-ins for the meetings took 30 minutes. The result is a strong team, working side by side towards a joint goal.

The headless architecture was uncharted territory for the entire team, but, looking back, it was the best choice. Due to the iterative approach to the creation of the content architecture, all editors were included and helped shape the transformation.

Contentful

Our partner for content infrastructure and Headless CMS.

Relaunch energieschweiz.ch

Magazine Stay Ahead With Structured Content

Carmen Candinas

For the relaunch of energieschweiz.ch, the editorial team invested a lot of energy into reworking the content. A content strategy, new formats and a content management system with headless architecture were a breath of fresh air for the web editing team.

Experts Blog Headless at EnergieSchweiz: Where Everything Interacts

A headless content management system alone is not yet a website. A Kubernetes cluster cannot deploy anything on its own. It is only when architecture, code, tools, processes and people are allowed to interact that the adjustments made to the content in the CMS trigger an update in the statically generated website.