Das Design

Eine neue Website zu entwickeln braucht eine Vision. Wie soll die Website aufgebaut werden, welche Funktionen sind wichtig, was für eine Farbpalette und Designsprache passt zum Klimastreik? Mit diesen Fragen und damit dem Design hat sich ein kleines Team aus Klimastreikenden und Studenten des Studienganges Digital Ideation der Hochschule Luzern gewidmet. Im Rahmen eines Studienprojekts haben sie sich Designerhüte angezogen, Websiten von ähnlichen Organisationen verglichen, Zielgrupppen analysiert, Befragungen und Benutzertests durchgeführt und schlussendlich einen Prototypen erarbeitet.

Die Entwicklung

Ein erstes Design stand also gegen Ende 2019, welches dann mit dem Task der Umsetzung an die AG IT weitergereicht wurde. Motivierte Entwickler*innen waren bald gefunden - jedoch: Keine*r von uns hatte einen Plan von WordPress - das Framework, mit welchem die alte Website aufgebaut war.

Also entschieden wir uns für einen Technologiewechsel (mehr dazu in der Box unten) und danach lautete die Devise coden, coden, coden.

Unser Entwicklerteam kannte sich vor allem mit TypeScript, NodeJS, React und MongoDb aus. Nicht die besten Voraussetzungen, falls eine WordPress Lösung umgesetzt werden sollte.

Da wir die Website nicht nur modern designet umsetzen, sondern auch technologisch aufrüsten wollten, entschieden wir uns für folgende Rezeptur:

  • Ein Starter von Server-Side-Rendering mit NextJS
  • einen Express-Server darunterziehen
  • eine Prise next-i18next für die i18n hinzufügen
  • mit Material-UI Komponenten garnieren
  • servieren mit Inhalten aus einer frischen Strapi-Installation

Das Rezept wird natürlich in GitLab-Rezeptories (Website, Strapi CMS) sicher aufbewahrt - open source und bereit für weitere Verbesserungen in Form von Issues, Commits und Code Reviews.

Der Inhalt

Auf der inhaltlichen Seite musste auch einiges getan werden. Die französische als auch die italienische Schweiz mussten viel zu lange auf korrekte und vollständige Übersetzungen warten. Dies sollte mit der neuen Version korrigiert werden.

Zudem sah das neue Design eine eigene Fakten-Seite vor - für welche sich unsere Expert*innen wissenschaftlichen Paper wälzten, Inhalte zusammentrugen sowie wertvolle Inputs zur Gestaltung lieferten.

Das Ergebnis

Damit sind wir knapp fünf Monate später am heutigen Zeitpunkt angelangt und endlich können wir euch eine Website präsentieren, die

  • ein modernes und konsistentes Design hat,
  • schneller und effizienter ist,
  • fast alle Schweizer Sprachregionen abholt,
  • wichtige Inhalte wie unsere Forderungen, Fakten zur Klimakrise und Neuigkeiten übersichtlich darstellt,
  • Besucher*innen erlaubt, Events nach Kategorie und Ort zu filtern und selbst neue Events zu erfassen
  • und vieles mehr...

Wir wünschen euch viel Spass beim Stöbern. Feedback, Kritik und Verbesserungsvorschläge gerne an website@climatestrike.ch (...oder für Nerds auch direkt in unserem GitLab-Repository als Issues ;)

  • 7919 Zeilen Programiercode1
  • 606 Commits im Repository2
  • 94 von 100: Google Page Speed für die Desktop-Seite (alte Website: 33)3
  • 81 von 100: Google Page Speed für die Mobile Seite (alte Website: 6)4
  • 44%: Website Carbon Test (alte Website: 11%)5. Das ist zwar noch nicht perfekt, aber wir bleiben dran!
  • 3 Sprachen
  • 0 Tracker

Referenzen

  1. Stand 23.04.2020, gezählt mit "find ./components ./core ./factories ./pages ./server ./styles | xargs wc -l", https://gitlab.com/omg_me/climatestrike-website
  2. Stand 23.04.2020, https://gitlab.com/omg_me/climatestrike-website
  3. Getestet am 23.04.2020, https://developers.google.com/speed/pagespeed/insights/
  4. Getestet am 23.04.2020, https://developers.google.com/speed/pagespeed/insights/
  5. Getestet am 23.04.2020, https://websitecarbon.com