CO₂ Kompensation

Globale Webpräsenz für die Stiftung KliK

Kompensationsgemeinschaft für fossile Treibstoffe
Website
Website
Storyblok
Hero image
Die von von der Erdöl-Vereinigung (heute Avenergy Suisse) gegründete Stiftung, wird im laufenden Jahrzehnt voraussichtlich 40 Millionen Tonnen CO₂ zu reduzieren. Das entspricht etwa 10 Prozent des Schweizer Ausstosses. Basierend auf einer gründlichen Analyse der bestehenden Websites sowie der Entwicklung einer zukunftssicheren Informationsarchitektur und eines zeitgemässen Webdesigns konnte Nueva bereits im Jahr 2020 den Pitch um den digitalen Auftritt der Stiftung KliK für sich gewinnen. Seit damals hat Nueva bereits eine umfangreiche Newsplattform, zahlreiche Länder-Seiten in diversen Sprachen und eine Scrollytelling-Page für die Darstellung des Jahresberichts entwickelt. Als Höhepunkt der Zusammenarbeit wurde nun der komplette digitale Auftritt der Stiftung neu konzipiert, gestaltet und umgesetzt.
Die Herausforderung

Komplexitätsreduktion auf höchstem Niveau

Die grösste Herausforderung des Projekts bestand darin, die zahlreichen vorhandenen Webseiten der Stiftung zu analysieren, neu zu denken und auf einer einzigen Webseite sinnvoll zusammenzufassen. Dutzende verschiedener Seiten, Sub-Seiten und Landingpages wurden neu strukturiert. Dies für die einzelnen Länderaktivitäten von Peru bis Georgien, oder die zahlreichen Leistungsbereiche wie Wasserstoff-Lastwagen oder mobile Pelletheizungen.

Die 2012 von der Erdöl-Vereinigung (heute Avenergy Suisse) gegründete Stiftung Klimaschutz und CO₂-Kompensation KliK ist die branchenweite CO₂-Kompensationsgemeinschaft für fossile Brennstoffe im Rahmen des CO₂-Gesetzes.

Optimiert und automatisiert ins brandneue Headless CMS

Ein Grossteil der Seiten wurde von der Stiftung KliK textlich überarbeitet und in diverse Sprachen übersetzt, bevor sie automatisiert in das brandneue Headless CMS Storyblok übertragen wurden. Darüber hinaus wurden zahlreiche bestehende Newsbeiträge inkl. Bilder mit einem eigens dafür entwickelten Content-Importer vom alten System ins Neue übertragen. Dadurch konnten zahlreiche Arbeitsstunden und mühsame manuelle Eingaben eingespart werden. Die im Laufe der Jahre indexierten Seiten wurden dabei sorgfältig an den neuen Ort umgeleitet, um das gute Suchmaschinen-Ranking der Stiftung zu gewährleisten.

Die Lösung

Mega-Flyout Navigation für mehr Übersicht und Beschränkung auf das Wesentliche

Das Herzstück der neuen Webseite ist eine Navigation, die die Seitenstruktur widerspiegelt und den Benutzern einen klaren Überblick über die Inhalte verschafft. Um den Benutzern bei der Orientierung zu helfen, werden die KliK Bereichs-Farben verwendet. Die einzelnen Programmseiten wurden vereinheitlicht, sodass die Informationen immer im selben Look und in der selben Struktur präsentiert werden. Dies erleichtert nicht nur das Hinzufügen neuer Programme und Länder in der Zukunft, sondern auch das Auffinden von Informationen für die Benutzer. Die zahlreichen bestehenden Landingpages für Länder und Leistungsbereiche wurden nahtlos in die neue Website integriert.

Die Lösung

Umfangreicher Element-Baukausten für alle Fälle

Damit die Webseite den hohen Anforderungen gerecht wird, wurden diverse neue Content-Elemente entwickelt und hinzugefügt. Dazu gehören verschiedene Teaser, Bildergalerien, PDF-Reader, ein Kontaktformular mit diversen Einstellungsmöglichkeiten und ein übersichtlicher Download Hub. Mit der intuitiven Benutzeroberfläche des CMS Storyblok können Inhalte wie Texte, Bilder oder Videos problemlos durch den Kunden bearbeitet, aktualisiert und getimed werden. Schliesslich wurden die bestehenden Beitragsrechner, welche die direkte und einfache Berechnung des Förderbeitrags online ermöglichen übersichtlicher und intuitiver gestaltet und direkt via API angebunden.

Die Technologie

Nuxt 3 und Storyblok für effiziente Entwicklung und einfache Inhaltsverwaltung

Technisch wurde das Projekt mit dem leistungsstarken Vue 3 Framework Nuxt 3 umgesetzt. Dies garantiert dank Server Side Rendering höchste Performance, SEO Integration und Skalierbarkeit. Als CMS wird Storyblok verwendet. Mit seiner intuitiven Benutzeroberfläche können Inhalte wie Texte, Bilder oder Videos problemlos bearbeitet und aktualisiert werden.

Insgesamt ermöglicht die Kombination aus Nuxt 3 und Storyblok eine effiziente Entwicklung und Verwaltung von Webseiten. Die Technologie bietet eine hohe Flexibilität, Skalierbarkeit und Benutzerfreundlichkeit, was zu einer verbesserten Benutzererfahrung und einem reibungslosen Arbeitsablauf führt.