Essenpreis Erneuerbare Energien
Checkliste kombinierte Förderung Solarstrom für Elektroautos
Ich durfte kurzfristig für die Essenpreis Erneuerbare Energien GmbH aus Östringen einen Onepager für die ab 26.09.2023 beantragbare KfW-Förderung „ Solarstrom für Elektroautos (442)“ erstellen. Die Anfrage kam über die nette Hamburger Illustratorin rein, die ich im Rahmen eines vorherigen Kundenprojekts kennenlernen durfte und für die ich im Hintergrund an ihrer eigenen Website arbeite.
Die Umsetzung war im Handumdrehen erledigt: Als Unterbau dient WordPress mit einem Theme, das sich bei einigen Kundenaufträgen dank seiner Vielseitigkeit, Modernität, Performance und regelmäßigen Updates schon bewährt hatte.
Das Hero-Element im Kopfbereich der Seite wurde mit dem Plugin „Slider Revolution“ erstellt, das vielfältige Möglichkeiten zur Animation von Slides bietet, hier aber insbesondere aufgrund seiner Flexibilität eingesetzt wurde.
Die Inhalte, d.h. Farben, Abstände, Schriften, Grafiken etc. wurden alle durch die Illustratorin vordefiniert und zur Verfügung gestellt, sodass mein Hauptaugenmerk auf der Layout-getreuen Umsetzung, dem Responsive Design und speziellen Elementen wie dem Radio-Button im Website-Design lag.
Eine besondere Herausforderung waren die animierten Grafiken. Während die statischen im modernen, platzsparenden Dateiformat WebP eingebunden wurden, denkt man bei animierten Grafiken (natürlich) zuerst an GIFs. Die Nachteile dieses Formats sind jedoch nicht zu vernachlässigen: Maximal 256 Farben, keine abgestuften Transparenzen und vor allem keine nennenswerte Komprimierung, was animierte Grafiken jenseits der 1.000 Pixel Auflösung schnell mehrere Megabyte groß werden lässt und sich deswegen klar negativ auf die Website-Performance auswirkt.
Nur, welche Alternativen gibt es?
- Animierte WebP-Grafiken – Wird von allen modernen Browsern unterstützt, liefert sehr gut komprimierte Ergebnisse, hatte unter iOS aufgrund der Transparenz jedoch stark „nachlaufende Pixel“ bei fließenden Animationen und war somit raus.
- Transparente WebM-Videos – Wenn man dem Videoplayer erst einmal abgewöhnt hat, standardmäßig einen schwarzen Hintergrund hinter Videos zu legen, hatte man schöne, transparente Videos, die sich perfekt in die Website eingefügt haben. Zwei große Nachteile gab es jedoch: Zum einen hat die Website-Performance bei 11 solcher Videos merklich abgenommen, zum anderen wird das WebM-Format einfach noch nicht unter iOS unterstützt (außer für WebRTC), was fast schon einem Skandal gleichkommen dürfte.
- Animierte PNGs (APNG) – Der fast vergessene Exot unter den Grafikformaten, der jedoch beste Browser-Unterstützung genießt. Vorteile: 24 Bit Farben und damit auch abgestufte Transparenzen. Leider kam es je nach Quellmaterial auch hier zu „nachlaufenden Pixeln“ bzw. war die Dateigröße von APNGs nicht immer merklich geringer als der gleichen GIF-Grafiken.
Im Endeffekt wären animierte WebP-Grafiken der klare Sieger, sobald die Webkit-Engine die Probleme mit den Animationen in den Griff bekommt. So blieb es nun bei gut eingestellten und damit „relativ“ kleinen GIFs, mit der Option auf APNGs zu wechseln.
Auch für diese Website wurde auf ein Hosting auf meiner eigenen Server-Infrastruktur gesetzt. Updates im Code rolle ich so in wenigen Minuten aus, ohne dass es ein umständliches Hochladen per FTP und Co. benötigt. Per Update-Service halte ich die Website topaktuell, damit Essenpreis Erneuerbare Energien ein zuverlässiges, jederzeit funktionstüchtiges und modernes Produkt für seine Endkunden hat.
Weitere Arbeiten
Fliesenleger-Innung Karlsruhe
Alter, stark beschädigter Internetauftritt gegen neue, moderne und performante Website ersetzt.
Overmann Frisuren
Übernahme und Überarbeitung einer bestehenden Website, Abstimmung und Umsetzung von SEO-Maßnahmen.
La Faye, Griechenland
Ein langjähriger Kunden hat sich seinen Traum in Griechenland erfüllt – und ich durfte ihn per Website begleiten.