Website Relaunch: Klimaschutz Frankfurt

Autor    

Relaunch der Klimaschutz Frankfurt Website mit vielen spannenden Tipps und Anregungen, damit Frankfurt eine klimafreundlichere Stadt wird: Neuer Look, neue Struktur, neue Programmierung

Redesign

Zielsetzung der Neuausrichtung:

  • Die Benutzerfreundlichkeit aufwerten: Die Website sollte übersichtlicher und ihre intuitive Zugänglichkeit gesteigert werden. Der Einsatz von modernen Webdesign-Standards soll die User Journey verbessern.
  • Eine bessere Orientierung gewährleisten: Die Nutzer*in findet sich in den Themen und Inhalten wieder und kann sich zielgruppenspezifisch in den Content vertiefen – von nachhaltiger Ernährung, über klimafreundlichen Verkehr, bis hin zu Erneuerbaren Energien. Dabei unterstützt z.B. das neue Menü und die Filteroptionen.
  • Den Content SEO-orientiert aufbereiten: Google erfasst den Inhalt von Webpages, aber hat Schwierigkeiten, Content zu erkennen, der hinter bestimmten Akkordeon-Modulen versteckt oder zu tief in der Navigation der Website vergraben ist. Deshalb muss der Content neu strukturiert und aufbereitet werden. Außerdem müssen technische und redaktionelle Anforderungen der SEO berücksichtigt werden.
  • In WordPress programmieren: So kann der Kunde die Website selbst pflegen, eine Erweiterung der Website ist jederzeit möglich und die SEO Anforderungen können gut bedient werden. Die Website soll zudem für eine bessere User Experience schnell laden und mobil optimiert sein.

Die neue Klimaschutz Website soll allen Zielgruppen in Frankfurt am Main eine erste Anlaufstelle zum Thema Klimaschutz bieten, sie für Klimaschutz begeistern und zum Mitmachen motivieren. Sie ist ein wichtiger Baustein für die Erreichung der Klimaschutzziele der Stadt Frankfurt am Main.

Machen Sie sich hier gerne selbst einen ersten Eindruck:

Gestaltung

Farben und Schrift

Die neue Website zeigt sich in modernem Look mit zeitgemäßen und themenspezifischen Farben und einer neuen Schrift – aber trotzdem orientiert am Erscheinungsbild der Marke Team Frankfurt Klimaschutz, die bereits 2017 vom Energiereferat der Stadt Frankfurt ins Leben gerufen wurde. So wird die bereits bestehende Marke gestärkt, aber zeigt sich trotzdem in einem neuen Erscheinungsbild.

Die Grundfarbe blau bestand bereits auf der alten Website. Wir haben die Farbpalette mit weiteren Blau- und Grautönen und der Farbe Grün erweitert. Grün wird sofort mit etwas Positivem und mit dem Thema Nachhaltigkeit in Verbindung gebracht. Diese neuen Farben geben uns in der Gestaltung deutlich mehr Spielraum.

Die Schriftart ist sans serif Roboto – eine Google Schrift, die aus zwei Gründen für Web besonders geeignet ist: Sie ist sehr leserlich und außerdem auf allen Browsern abbildbar.

Illustrationen und Icons

Mit der neuen Farbpalette gestalteten wir auch neue Illustrationen und Icons.

Diese nehmen auf der neuen Website einen hohen Stellenwert ein und werden im Webdesign gerne genutzt, denn sie sind platzsparender, was vor allem für mobile Seiten wichtig ist, und sie sind leichter zu erfassen als Text. Icons leiten das Auge und erleichtern der Nutzer*in die Orientierung auf der Seite.

Auf der Klimaschutz Website gelingt der Einstieg über die 8 Themenschwerpunkte jetzt nicht nur textlich, sondern auch über die Bildsprache.

Neben der Startseite wurden auch für die Newsletter An- und Abmeldung neue Illustrationen gebaut, um durch ein visuell ansprechenderes Erscheinungsbild die Newsletter Anmeldung attraktiver zu gestalten. Die Anmeldung muss funktional sein und die Nutzer*in visuell anregen.

Weitere Ilustrationen, die wir für die Newsletter An- und Abmeldung erstellt haben:

Auch auf Beitragsebene wollten wir durch Illustrationen den Nutzer*innen der Seite mehr Freude am Lesen geben und Sachverhalte einfacher und anschaulicher darstellen:

Die fünf Stufen der Abfallhierarchie
Energie- und Wasserverbrauch von Wasserkocher vs. Kochtopf
Anteile erneuerbarer Energien in den Sektoren Strom, Wärme und Verkehr

Fototonalität

Bei den neu ausgesuchten Bildern für die Website haben wir darauf geachtet, dass wir authentische Bilder auswählen, die aus einer freundlichen und natürlichen Farbwelt kommen. Bei der Gestaltung von Beiträgen war es wichtig, dass die Bilder in der Summe eine spannende Komposition abgeben.

Außerdem natürlich von Bedeutung: Der Bezug zur Stadt Frankfurt.

Sie wollen auch eine neue Website? Nehmen Sie Kontakt mit uns auf!

Neue Struktur für Content und Navigation

Vorbereitung: Erfassung und Sortierung aller Beiträge

Die Website war die letzten Jahre durch das Erweitern von weiterem Content stetig gewachsen und war dadurch immer unübersichtlicher geworden. Deshalb bestand unsere erste Aufgabe darin, alle Inhalte der Website zu erfassen und zu sortieren.

  • Welche Themen werden bereits abgedeckt?
  • Welcher Content ist bereits enthalten?
  • Für welche Zielgruppe ist der Content?

Der Content bestand aus verschiedenen Arten von Tipplisten, Interviews mit Menschen und Initiativen aus Frankfurt, aus Artikeln mit Klimaschutz Definitionen, reinen Informationsbeiträgen, zielgruppenspezifischem Content und aus Beiträgen zur Klimaschutzkampagne in Frankfurt.

Oft haben wir Beiträge, die vorher mehrere Themen behandelten, voneinander getrennt und daraus zwei oder drei einzelne Artikel gemacht, um thematisch besser fokussieren zu können. Oder wir haben Abschnitte, die besser zu bereits bestehenden Beiträgen passen, dort neu zugeordnet. Auch kam es vor, dass sich Content doppelte. Dieser wurde von uns archiviert.

All das haben wir in einer großen Excel Liste festgehalten.

Navigation: Themenspezifischer Content

Wir haben im Vorfeld eine Struktur für die Website erarbeitet, die wir nach der Sortierung aller Beiträge noch an der ein oder anderen Stelle erweitert haben.

Der neue Einstieg auf die Seite folgt der Frage einer potenziellen Websitebesucher*in „Was interessiert mich?“. Daraus sind 8 neu definierte Themenschwerpunkte entstanden.

Unter diesen 8 Themen sammelt sich nun der ganze Content, der zusätzlich auch nach Filtermöglichkeiten sortierbar ist – sowohl nach Zielgruppe, als auch nach Umkreis.

Lokale Heldengeschichten

Neben dem Content, der rein dazu da war, Informationen zu bestimmten Nachhaltigkeitsthemen bereitzustellen, gab es noch emotionale Interviewbeiträge mit Menschen und Institutionen, die sich in Frankfurt für den Klimaschutz engagieren. Diese Beiträge haben eine ganz neue Kategorie namens „Lokale Helden“ erhalten. Sie sollen allen Bürger*innen Lust machen, sich auch für den Klimaschutz einzusetzen.

Glossar

Neu dazugekommen ist das Glossar, das zuvor in einem Blogbeitrag zusammengefasst war. Wir haben nun für jeden Begriff einen eigenen Glossarbeitrag und eine dazugehörige Übersicht.

Projekte und Aktivitäten

Außerdem neu: Projekte, Aktivitäten und Institutionen in und um Frankfurt. Zuvor waren in Beiträgen immer mal wieder Projekte und Initiativen versteckt, die es aber nirgendwo auf einen Blick gesammelt gab. Dem haben wir Abhilfe geschaffen und einen Übersichtsseite erstellt, die alle Projekte, Aktivitäten und Initiativen sammelt, die etwas mit dem Klimaschutz in Frankfurt zu tun haben – vom Klimasparbuch, über die Gemüsekiste, hin zur Lastenrad-Vermietung. Hier werden nicht nur städtische, sondern auch private Vereine und Institutionen gelistet.

Kalender

Welche Events finden zum Thema Klimaschutz in Frankfurt statt? Ob Stadtführungen, Lesungen oder Workshop – hier findet die User*in alle Termine auf einen Blick und kann sich per Klick auf den Kalender Eintrag weitere Informationen anzeigen lassen.

Programmierung – Wechsel von Drupal zu WordPress

Die alte Website basierte auf dem CMS (Content Management System) Drupal. Da der Kunde aber die Anforderung geäußert hatte, die Website nach dem Relaunch auch selbst pflegen und redaktionell befüllen zu wollen bzw. kleinere Änderungen an der Startseite selbst umsetzen möchte, haben wir die neue Website mit dem CMS WordPress programmiert.

Durch verschiedene individuell ausgewählte Plugins konnten wir so auch Sonderwünsche des Kunden umsetzen, wie die Filtermöglichkeiten, die Earth Hour Galerie und die Schnittstelle zur bestehenden Newsletter Software cleverreach.

Außerdem: Die neue Website ist komplett mobil responsiv, d.h. sie kann auf Desktops, aber genauso gut auf verschiedenen Tablets und Smartphones genutzt werden. Es ist nicht erforderlich, dafür eine zweite Mobile Seite zu programmieren und separat zu pflegen.

Was Barrierefreiheit angeht, haben wir das Menü bereits mit ARIA-markup realisiert, damit es vollständig tastatursteuerbar ist. Des Weiteren wurden Platzhalter für Leichte Sprache und Gebärdensprache geschaffen, die im Laufe des Jahres ergänzt werden sollen.

Nach der Programmierung der Website haben wir alle Contentpieces, inklusive Bilder, Texte, Tabellen, Slider und Grafiken in WordPress hochgeladen und damit die Website befüllt.

Abschluss

Vom ersten Pitch bis hin zur fertigen Website haben wir für die Klimaschutz Website das ganze Paket angeboten: Projektmanagement, Konzept, Layout und Design, Redaktion, Programmierung und Befüllung.

Damit der Kunde die Website nach Relaunch selbst pflegen und weiter befüllen kann, hielten wir zur Übergabe einen WordPress Workshop, inklusive Guide zum Nachlesen.

In Zukunft werden wir das Energiereferat der Stadt Frankfurt weiterhin mit technischem Website Support unterstützen.

Zur neuen Klimaschutz Website

Kontaktmöglichkeit für Unternehmen

Planen auch Sie einen Website-Relaunch oder ein vergleichbares Online-Marketing-Projekt? Gern setzen wir uns mit Ihren individuellen Projektanforderungen auseinander. Unabhängig davon, in welchem Branchenumfeld Sie tätig sind, erstellen wir Ihnen ein maßgeschneidertes Kostenangebot.

Bitte kontaktieren Sie uns per E-Mail oder über das Kontaktformular. Nach Erhalt einer schriftlichen Erstinformation können wir Sie auch gern telefonisch beraten.

IHR ANSPRECHPARTNER

Johanna Fertig
Digital Marketing Manager
fertig@svaerm.com
+49 (0)69 9494 5 919-2