Social Entrepreneurship City Hamburg | NGO

Vom Website-Audit zu mehr Barrierefreiheit und Nachhaltigkeit

€ € € € € 42 Seiten 6 Wochen
Figma
WordPress
Die Homepage der Social Entrepreneurship City Hamburg

Business-Website

Auf einen Blick

Die Social Entrepreneurship Allianz Hamburg ist ein Verein zur Förderung von Social Entrepreneurship in der Hansestadt. In einem Website-Audit haben wir einige Baustellen entdeckt. Das Ziel dieses Projektes war es, Barrierefreiheit, Nachhaltigkeit und Performance zu optimieren – und das ohne große Änderungen am Design oder am Custom Theme.

Zur Website: socialentrepreneurship.hamburg

Verschiedene Unterseiten mit einer Karte von Partnern der City, Blogbeiträgen und Serviceangeboten.

Worauf wir stolz sein können

– 87 % Ladezeit
– 98,5 % CO2-Emissionen
15 + Barrieren abgebaut
  • Die Zusammenarbeit mit Stefanie hat unsere Website wirklich auf das nächste Level gebracht!

    Die Seite lädt nun spürbar schneller und hat deutlich weniger Barrieren als vorher. Das gibt uns das gute Gefühl, mehr Menschen einen leichten Zugang zu unseren Inhalten zu ermöglichen. Stefanie ist eine wirkliche Expertin auf diesem Gebiet und arbeitet sehr effizient und strukturiert. Das hat den gesamten Prozess super angenehm gemacht!
    Porträt von Vivien Nikolic
    Vivien Nikolic
    Referentin Kommunikation

Klingt nach dem, was du brauchst?

Lasst uns mit einem Audit für deine Website starten. Damit bekommt ihr einen schnellen Überblick zu:

  • Nachhaltigkeit & Emissionen
  • Performance & Ladezeiten
  • SEO-Auffindbarkeit
  • User Experience
  • Barrierefreiheit
  • Datenschutz

Vorher: Die Audit-Ergebnisse

Tolle visuelle Identität, gutes UX – aber was steckt unter der Haube?

Mit dieser Frage bin ich in das Website-Audit für die Social Entrepreneurship City gestartet. Die Analyse zeigte Handlungsbedarf bei Barrierefreiheit, Ladezeiten und Nachhaltigkeit – und genau dort haben wir angesetzt.

Die Ergebnisse verschiedener Kategorien im Audit. (Die Ergebnisse stehen unter dem Bild)
0 Barrierefreiheit
26 s Ladezeit mobil
3,42 g CO2 pro Seitenaufruf
Website Carbon Rating F
Carbon Rating

Strategie: Optimieren statt neu bauen

Das Custom-Theme der Seite war für bestimmte Features (wie die “Hamburg wirkt”-Karte) sinnvoll, offenbarte aber Schwächen bei Barrierefreiheit und intuitiver Bedienung. Wir haben zunächst gemeinsam abgewogen, ob wir direkt auf ein barrierefreies und effizientes Block-Theme umsteigen. Hier war jedoch eine Optimierung im aktuellen Setup sinnvoller.

So sind wir vorgegangen:

  1. Audit-Ergebnisse analysiert und priorisiertes Maßnahmen-Backlog erstellt
  2. Abstimmung mit Redaktion & Entwickler zum Aufteilen der Aufgaben
  3. Redaktions-Guidelines erstellt, u. a. für SEO-Metadaten, Alternativtexte und saubere Überschriftenstruktur
  4. Wechsel des Hostings zu Raidboxes für bessere Performance, Nachhaltigkeit & eine separate Entwicklungsumgebung
  5. Technische Anpassungen direkt im Theme und auf der Seite umgesetzt

So konnten wir die wichtigsten Hürden abbauen – ganz ohne Redesign.

Ein Vorher-Nachher-Vergleich der News-Seite mit Kontrastproblemen, die gelöst worden sind

Barrierefreiheit gehört ins Design – von Anfang an

Ein Klassiker für mich: Das Corporate Design ist stark, die Farben einprägsam – doch beim Thema Farbkontraste hakt’s.

Auch hier war das so. Das Markenblau sieht luftig und frisch aus – aber interaktive Elemente wie Buttons heben sich nicht ausreichend vom weißen Hintergrund ab (im Bild links).

Button-Varianten im Vergleich: links der Original-Button in Himmelblau, in der Mitte die Variante mit dunklerem Türkisblau und recht die Variante mit schwarzem Rand

Meine Vorschläge für die Buttons:

  1. Dunkleres Blau-Türkis mit weißem Text: erfüllt Kontrastanforderungen, wirkt ebenso luftig wie der Rest (Bild: Mitte)
  2. Schwarzer Rand um die Buttons: erhält die Originalfarbe, wirkt etwas schwerer (Bild: rechts)

Die Kundin entschied sich für Option 2, da das mit viel Aufwand entwickelte Corporate Design bewusst auf zusätzliche Farben verzichtet. Verständlich – und so haben wir es gemeinsam umgesetzt.

Was ich jedoch häufig sehe: Das nachträgliche „Einbauen“ von Barrierefreiheit kostet Zeit, Geld und gestalterische Kompromisse.

Mein Wunsch an alle Brand Designer*innen: Lasst uns Barrierefreiheit von Anfang an mitdenken. Kontraste. Schriftgrößen. Interaktion. Das ist kein Add-on – es ist Teil eurer Haltung.

Von kleinen und großen Maßnahmen und ihrem Impact

Performance und Nachhaltigkeit

Mit dem Wechsel des Hoster laufen Caching, Code- und Bildoptimierung nun automatisch im Hintergrund. Der Seitenumzug wurde von Raidboxes übernommen – unkompliziert und kostenlos. Damit haben wir nicht nur die Ladezeiten massiv verbessert, sondern auch einen großen Schritt in Richtung Nachhaltigkeit gemacht. Und das alles, ohne das bestehende Corporate Design verändern zu müssen.

SEO

Mit einem professionellen und leichtgewichtigen SEO-Plugin sowie optimierten Seitentiteln und -beschreibungen stellen wir sicher, dass Social Entrepreneurs relevante Inhalte bei Google und Co. besser finden.

Barrierefreiheit

Durch zahlreiche kleine Anpassungen am Design, im Theme-Code und bei den Inhalten konnten wir spürbar Barrieren abbauen. Das bisher eingesetzte Barrierefreiheits-Plugin wurde damit überflüssig.

Auch für die Redaktion hat sich einiges getan: Sie verfügt jetzt über klare Guidelines, z. B. zur Überschriftenstruktur und zu aussagekräftigen Alternativtexten.

Hinweis: Noch ist nicht alles umgesetzt, aber mit der bestehenden Roadmap ist klar, was als Nächstes ansteht.

15 Barrieren abgebaut
3,4 s Ladezeit mobil
0,05 g CO2 pro Seitenaufruf
Website Carbon Rating A
Carbon Rating

Zukunftsfähige Websites – kein Add-on, sondern Standard

Bei meinen Websites könnt ihr euch auf folgendes verlassen:

Inklusives Design

  • Mit intuitiver Navigation und Seitenaufbau finden alle Nutzer*innen einfach und schnell, was sie suchen
  • Barrierefreiheits-Anforderungen der WCAG werden von Beginn an mit berücksichtigt
  • Responsives Design ermöglicht es, eure Website von allen Geräten aus fehlerfrei zu betrachten
  • Eine nachhaltige Seite mit weniger Datenverbrauch lässt auch Menschen mit mit schlechtem Netz oder begrenztem Datenvolumen entspannt auf eurer Seite surfen

Nachhaltiges Design

  • Performance-Optimierung erfolgt automatisch— das macht die Seite schneller und nachhaltiger und spart Plugin-Frust
  • 100% grünes und verantwortungsvolles Hosting aus nachhaltigen Energiequellen
  • Geringerer CO2-Ausstoß durch ein effizientes und professionelles WordPress-Theme
  • Leichtgewichtiges Design mit weniger großen und schweren Elementen

Wie steht’s um deine Website?

Wenn dich die Erfolgsgeschichte der Social Entrepreneurship City neugierig gemacht hat, dann sprich mich an – gerne checke ich eure Website!