energis.de — Website, CMS und Bestellstrecken

Die Ausgangslage

energis ist der regionale Energieversorger im Saarland und liefert Strom, Erdgas, Wasser und Internet. energis.de ist dabei mehr als ein Schaufenster. Hier informieren sich Kundinnen und Kunden, vergleichen Tarife, schließen Verträge ab und melden ihren Zählerstand.

Gleichzeitig muss das Marketing-Team die Seite jeden Tag selbst pflegen können, von Kampagnen über Ratgeber-Artikel bis zu neuen Glasfaser-Ausbaugebieten. Seit 2022 entwickeln wir dafür die gesamte Plattform und betreiben sie seitdem gemeinsam mit energis weiter.

1. Website

   Schnelles Nuxt-Frontend, das seine Inhalte komplett aus dem CMS bezieht.

2. CMS

   motor, unser eigenes Headless-CMS, mit Page-Builder, Formularen, Mediathek und Freigaben.

3. Bestellstrecken

   Strom, Erdgas und Glasfaser vom Postleitzahl-Feld bis zum Vertrag.

Ein CMS, das zur Redaktion passt

Statt eines Standard-CMS mit Plugin-Wildwuchs setzt energis auf motor, unser eigenes Headless-CMS auf Laravel-Basis. Weil wir es selbst entwickeln, wächst es mit den Anforderungen der Redaktion, statt sie auszubremsen. Die Redaktion baut Seiten im Page-Builder aus über 70 Bausteinen zusammen, von der Überschrift über Akkordeons und Slider bis zum Tarifrechner. Die Oberfläche startet bewusst reduziert und lässt sich bei Bedarf bis ins Detail aufklappen.

• Entwürfe und Freigaben: Änderungen lassen sich vorbereiten, ohne dass sich die Live-Seite ändert, und zeitgesteuert veröffentlichen.
• Rich-Text-Editor mit Tabellen, verbundenen Zellen und Links auf Navigationspunkte.
• Formular-Builder mit E-Mail-Vorlagen, Besucherkopie, Captcha und Export der Einsendungen.
• Versionshistorie: Jede gespeicherte Fassung einer Seite bleibt erhalten und lässt sich wiederherstellen.
• Mediathek mit Bildzuschnitten für Desktop und Mobil.
• Weiterleitungen und SEO-Einstellungen direkt im CMS.

motor Page-Builder

Seiten bauen statt Tickets schreiben.

Links die Bausteine, in der Mitte die Seite, rechts die Eigenschaften. Was hier entsteht, sieht die Redaktion sofort so, wie es später live geht, auch mobil.

• 70+Bausteine
• 650+Seiten

Vom Postleitzahl-Feld bis zum Vertrag

Der wichtigste Weg auf energis.de beginnt mit einer Postleitzahl. Daraus zeigt die Tarifsuche die verfügbaren Produkte, auf Wunsch genau bis zum Ortsteil. Strom und Erdgas lassen sich in einer gemeinsamen Bestellstrecke abschließen. Internet und Telefon haben eine eigene Strecke mit Verfügbarkeitsprüfung für jede Adresse.

Im Hintergrund spricht die Website über eine eigene API-Schicht mit den Tarif- und Abrechnungssystemen von energis. Bestandskunden werden beim Abschluss erkannt. Die Bestellstrecken sind auf die Anforderungen des Barrierefreiheitsstärkungsgesetzes (WCAG 2.1 AA) ausgerichtet und durch automatisierte Ende-zu-Ende-Tests abgesichert.

Glasfaser für jeden Ort

Für jedes Glasfaser-Ausbaugebiet entsteht eine eigene Landingpage auf glasfaser.energis.de, zum Beispiel für Nalbach. Sie enthält eine Adressprüfung, erklärt den Ausbau und zeigt an, wie weit die nötige Vorvermarktungsquote schon erreicht ist. Gebaut wird alles im Page-Builder, ohne Entwickler.

Mobil gedacht

Tarifrechner, Bestellstrecken und Formulare funktionieren auf dem Smartphone genauso gut wie am Desktop.

Eine Plattform, mehrere Marken

Dasselbe CMS beliefert mehrere Auftritte: energis.de, die Glasfaser-Seiten und eigene Websites für Vertriebspartner. Welcher Auftritt ausgeliefert wird, entscheidet die aufgerufene Domain. Jeder Mandant bekommt dabei sein eigenes Farbschema. Für eine neue Partner-Website braucht es so keine neue Software, sondern nur einen neuen Mandanten im CMS.

Brandguide

Das Designsystem von energis.

Logo

Unsere Energie kann Ihr ganzes Zuhause versorgen.

Primärfarbeenergis Orange#F49B01 · --c-primary-100

Farbskala

Orange 700#9E6400Orange 100#F49B01Orange 90#F5A111Orange 80#F7B94DOrange 70#F9CC7EOrange 50#FBDDA8Orange 30#FDECCEOrange 10#FEF9EF

Dark 100#191919Dark 90#3F3F3FDark 70#898989Dark 30#D3D3D3Dark 5#F9F9F9Success#01B774Warning#D51D01Info#01AFCA

Markenverlauf

Hausschrift

Aa

Satoshi

Unsere Energie kann Ihr ganzes Zuhause versorgen.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789 € & ?!

400500700900

Handschrift für Hinweise

Strom, Erdgas, Internet und vieles mehr!

Kalam

Typo-Skala

• H1Energie60px
• H2Energie48px
• H3Energie36px
• H5Energie24px
• PEnergie16px

Formsprache

8px

16px

24px

Produkte finden

Mandanten-Themes

energis · #F49B01

Partner-Blau · #0B6BAE

Qualität im Dauerbetrieb

Die Plattform ist seit Jahren live und wächst trotzdem weiter. Damit das so bleibt, arbeiten wir in festen Abläufen:

• Release alle zwei Wochen, jeweils mit Abnahme auf einem Staging-System vor dem Livegang.
• Über 270 Testdateien mit automatisierten Tests, von Unit-Tests über Ende-zu-Ende-Tests der Bestellstrecken bis zu den Backend-Paketen.
• Gehärtete Container, die regelmäßig neu gebaut werden, und ein steuerbarer Wartungsmodus für große Umbauten wie Datenbank-Migrationen.

Tech-Stack

Website

Nuxt 4Vue 3TypeScriptPiniaVitestPlaywrightStorybook

CMS-Backend

Laravel 13PHP 8.4motor CMSMySQLRedisMeilisearchPest

Admin

Nuxt 4Nuxt UITailwindTiptapi18n

Betrieb

AWSKubernetesDockerGitLab CI