Website Relaunch: Klimaschutz Frankfurt
Relaunch der Klimaschutz Frankfurt Website mit vielen spannenden Tipps und Anregungen, damit Frankfurt eine klimafreundlichere Stadt wird: Neuer Look, neue Struktur, neue Programmierung
Redesign
Zielsetzungen 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ützen 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 musste der Content neu strukturiert und aufbereitet werden. Außerdem mussten und müssen weiterhin 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 schnell laden und mobil optimiert sein – zugunsten einer besseren User Experience.
Die neue Klimaschutz Website soll allen Zielgruppen in Frankfurt am Main als erste Anlaufstelle zum Thema Klimaschutz dienen, 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 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. Es handelt sich um eine gut lesbare Google Schrift, die auf allen Browsern abgebildet werden kann.
Aus Datenschutzgründen haben wir die Schriftart lokal in der Datenbank der Website gespeichert, damit die Nutzer*innen keine Verbindung zu den Servern von Google herstellen müssen.
Wir haben uns bewusst auf eine einzige Schriftart beschränkt, um den Stromverbrauch der Website zu reduzieren und ihre CO2-Emissionen zu senken.
Illustrationen und Icons
Mit der neuen Farbpalette gestalteten wir auch neue Illustrationen und Icons – ein beliebtes Stilmittel im Webdesign.
Diese werden auf der neuen Website prominent eingesetzt, denn sie sind platzsparend und machen den Inhalt leicht zu erfassen – ein wichtiger Vorteil, inbesondere auf mobilen Endgeräten. Sie leiten das Auge und erleichtern der Nutzer*in die Orientierung auf der Seite.
Seit dem Redesign der Klimaschutz Website gelingt der Einstieg über die 8 Themenschwerpunkte nicht nur textlich, wird auch seitens der Bildsprache sinnvoll unterstützt.
Neben der Startseite wurden auch für die Newsletter An- und Abmeldung neue Illustrationen gezeichnet, um die Newsletter-Anmeldung attraktiver zu gestalten. Diese muss funktional sein und die Nutzer*innen visuell ansprechen.
Weitere Ilustrationen, die wir für die Newsletter An- und Abmeldung erstellt haben:
Auch auf Beitragsebene verwenden wir Illustrationen, die den Nutzer*innen mehr Freude am Lesen geben und Sachverhalte einfacher und anschaulicher darstellen:
Fototonalität
Bei der neuen Bildauswahl für die Website haben wir besonders auf Authentizität, eine freundliche und natürliche Farbwelt, sowie eine gesamthaft spannende Komposition geachtet.
Auch 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 über die letzten Jahre durch die Veröffentlichung von neuem Contents stetig gewachsen – aber leider wurde sie dadurch auch immer unübersichtlicher. Daher die kundenseitige Anforderung, alle Inhalte der Website im Stil eines „Informationsverzeichnisses“ zu erfassen und zu sortieren.
- Welche Themen werden bereits abgedeckt?
- Welcher Content ist bereits enthalten?
- An welche Zielgruppe richtet sich der Content?
Der Content bestand aus unterschiedlichsten Tipplisten, Interviews mit Bürgern und Initiativen aus Frankfurt, lexikonartigen Definitionssammlungen, reinen Informationsbeiträgen, zielgruppenspezifischem Content und Artikeln über die Klimaschutzkampagne in Frankfurt.
Vielen Beiträgen fehlte der inhatliche rote Faden, da sie zu viele Themen gleichzeitig behandelten. Solche Beiträge haben wir in mehrere einzelne Artikel unterteilt und diese thematisch besser fokussiert – nach konzeptionellen Kriterien oder zur Zuspitzung auf eine Suchintention.
Manche Beiträge waren inhaltlich dünn und zu oberflächlich, um dem Nutzer einen echten Mehrwert zu bieten. In solchen Fällen haben wir thematisch zueinander passende Stubs miteinander verflochten und daraus einen tiefgreifenderen Beitrag gemacht.
Content, der sich doppelte oder in gemäß Web Analytics schlecht performte, wurde ausgedünnt oder für den Kunden zu Dokumentationszwecken archiviert.
Navigation: Themenspezifischer Content
Der neue Einstieg auf der Website folgt der Frage einer potenziellen Websitebesucher*in: „Was interessiert mich?“. Daraus haben wir 8 neu definierte Themenschwerpunkte gebildet.
Über diese 8 Themenschwerpunkte ist nun der gesamte Content ansteuerbar. Zusätzlich können die Beiträge per Filteroption sortiert werden: Nach Zielgruppe und Umkreis.
Lokale Heldengeschichten
Neben dem Content, der rein dazu da war, Informationen zu bestimmten Nachhaltigkeitsthemen bereitzustellen, gab es noch emotionale Interviewbeiträge mit Bürgern und Institutionen, die sich in Frankfurt für den Klimaschutz engagieren. Diese Beiträge haben wir in der neuem Kategorie namens „Lokale Helden“ subsummiert. Sie sollen ein gutes Vorbild sein und alle Bürger*innen anregen, sich verstärkt für den Klimaschutz einzusetzen.
Glossar
Vor dem Relaunch hatte es einen Blogbeitrag gegeben, der verschiedene Begriffsdefitionen rund um das Thema Klimaschutz angerissen hat. Dieser war leider nicht sehr lesenswert, da er einem dicht beschriebenen Telefonbuch glich – mit dem Unterschied, dass Telefonbücher einem systematischen Aufbau folgen.
An dessen Stelle ist ein Glossar getreten, wo die Begriffsdefinitionen alphabetisch sortiert und verlinkt sind. Das Redaktionsteam kann jederzeit Highlights setzen, um wichtige oder medienpräsente Einträge zu highlighten – durch Hinzufügung eines Piktogramms in der Form eines Blattes.
Das Glossar folgt der Struktur einer HTML-„Definition List“. Dadurch sind die Inhalte mit Markup versehen und können seitens Google und anderen Suchmaschinen als Begriffsdefinitionen erkannt und gezielter in Suchtrefferlisten ausgespielt werden.
Projekte und Aktivitäten
Außerdem neu: Projekte, Aktivitäten und Institutionen in und um Frankfurt.
Zuvor waren die Projekte und Initiativen im Dschungel von Blogbeiträgen untergegangen. Die Anforderung des Energiereferats, Anfragen von Bürgern mit einem Link zu einer Überssichtsseite zu beantworten, war nicht erfüllt.
Dem haben wir Abhilfe geschaffen: Themen wie das Klimasparbuch, die Gemüsekiste und Lastenrad-Vermietung können jetzt auf einen Blick erfasst werden. 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 Nutzer*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 die Website nach dem Relaunch aber selbst pflegen und redaktionell befüllen wollte, haben wir sie mit dem CMS WordPress neu programmiert.
Durch verschiedene individuell ausgewählte Plugins konnten wir so auch Sonderanforderungen des Kunden abbilden, wie z.B. 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 Desktop-PCs, aber genauso gut auf Tablets und Smartphones genutzt werden. Es ist nicht erforderlich, dafür eigens eine zweite Mobile Seite zu programmieren und diese 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 mit barrierefreien Inhalten befüllt 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 gepflegt.
Abschluss
Vom anfänglichen Pitch bis hin zur fertigen Website haben wir das Energiereferat Frankfurt ganzheitlich beliefert: Mit Projektmanagement, Konzept, Layout und Design, Redaktion, Programmierung und Befüllung.
Damit der Kunde die Website nach Relaunch selbst pflegen und weiter befüllen kann, haben wir zur Übergabe einen WordPress Workshop gehalten, inklusive Guide zum Nachlesen.
In Zukunft werden wir das Energiereferat der Stadt Frankfurt weiterhin mit technischem Website-Support unterstützen.
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.
