Zum Hauptinhalt springen

Eine ganze Stiftungslandschaft — von der Redaktion selbst gepflegt. Ein Baukastensystem auf TYPO3 13.4.

Für die Haspa Hamburg Stiftung — eine Dachstiftung mit über 400 Einzelstiftungen — haben wir die Website auf TYPO3 13.4 neu gebaut: ein individuelles Baukastensystem aus über 30 Inhaltsbausteinen, eine strukturierte Datenwelt aus Stiftungen, Projekten und Menschen, dazu SEO & GEO, Barrierefreiheit, DSGVO-Consent und QR-Code-Spenden je Stiftung. Alles redaktionell selbst pflegbar.

Zum Projekt →

Kunde
Haspa Hamburg Stiftung
Branche
Stiftung & Non-Profit · Förderung · Hamburg
Laufzeit
2026 · laufende Weiterentwicklung
Leistungen
Konzept & Strategie · TYPO3-Entwicklung · Content Blocks · SEO & GEO · Barrierefreiheit · DSGVO & Consent · Website-Suche · Spenden-Integration · Betrieb & Deployment
Startseite der Haspa Hamburg Stiftung auf TYPO3 13.4: Hauptnavigation, Hero mit Team-Foto und rotem Claim „Wir helfen beim Stiften“, darunter der Baustein „In vier Schritten zur eigenen Stiftung“. Seite „Stiftung gründen“ mit großer Headline „Verwirklichen Sie Ihren Herzenswunsch“ und dem Vier-Schritte-Baustein zur eigenen Stiftung. Übersichtsseite „Unsere Stiftungen“ mit Kennzahlen-Kreisen (rund 400 Stiftungen, 300 Mio € Kapital), Förderschwerpunkten und A–Z-Filter. Detailseite einer Einzelstiftung („Achim Kilian Stiftungsfonds“): strukturierte Datensätze (Gründungsjahr, Stifter, Stiftungsform) und Spende per GiroCode-QR mit Drei-Schritt-Anleitung. Übersichtsseite „Hanseatisch helfen“ mit Teaser-Karten zu Stiftungsgeschichten, je mit Foto, Kategorie und Anrisstext. Porträt-Seite „Stiftung Bergedorf“ unter „Hanseatisch helfen“: Foto des Gründers Stefan Maiwald mit Interview. Seite „Wer wir sind“ mit Headline „Gestalten Sie mit uns die Zukunft“ und Team-Foto der Ansprechpartner.

Die Haspa Hamburg Stiftung ist eine Dachstiftung mit über 400 Einzelstiftungen — eine über Jahre gewachsene Förderlandschaft für Hamburg. Für sie haben wir die Website auf TYPO3 13.4 neu aufgebaut und entwickeln sie laufend weiter: ein moderner, redaktionell voll pflegbarer Auftritt, der die Stiftungen, ihre Projekte und die Menschen dahinter sichtbar macht.

01. Ausgangslage

Der bisherige Auftritt war technisch veraltet, inhaltlich starr und von der Redaktion kaum selbst zu pflegen. Gleichzeitig galt es, eine komplexe Datenwelt — viele Stiftungen, Projekte, Gremien und Ansprechpartner — strukturiert und wiederverwendbar abzubilden und dabei hohe Anforderungen an Auffindbarkeit, Barrierefreiheit und Datenschutz zu erfüllen.

02. Ein redaktionelles Baukastensystem

Kern des Projekts ist ein individuelles Baukastensystem aus über 30 wiederverwendbaren Inhaltsbausteinen — vom Hero mit Vimeo-Video statt statischem Bild über Fakten-Kreise, Teaser- und Service-Karten bis zu CTA-Bannern, Schritt-für-Schritt-Elementen und Vererben-Teasern. Auf Basis von TYPO3 Content Blocks umgesetzt, pflegt die Redaktion damit alle Inhalte selbst: ohne Entwickler, ohne HTML. Neue Seiten entstehen aus vorhandenen Bausteinen — in konsistenter Gestaltung.

03. Eine strukturierte Datenwelt

Stiftungen, Projekte, Kuratorium, Ansprechpartner, Kennzahlen und verstorbene Stifter sind keine losen Texte, sondern eigene, strukturierte Datensätze — mit Detailseiten, Übersichten und Filterung. Zentrale Kennzahlen wie Gründungsjahr, Kapital und Fördersumme werden an einer Stelle gepflegt und überall automatisch ausgespielt: eine Datenquelle, viele Ausspielungen. Eine Volltextsuche auf Basis von ke_search — mit eigenem Indexer für die Stiftungs-Datensätze — macht den gesamten Bestand durchsuchbar.

04. Design & Frontend

Das Design wurde bis ins Detail umgesetzt: ein durchgängiges Teaser-System, Top-Teaser für besonders markierte Projekte und ein vollständig responsives Layout. Grundlage ist das Bootstrap Package, erweitert um die projekteigenen Bausteine.

05. Auffindbar für Suche und KI

Auffindbarkeit heißt heute zweierlei — klassische Suchmaschinen und KI-Antwortmaschinen. Dafür haben wir die Website seitenweit mit schema.org ausgezeichnet (NGO + WebSite als JSON-LD), individuelle SEO-Titel und -Beschreibungen je Seite und Datensatz vergeben und die XML-Sitemap um Stiftungen, Projekte und Kuratorium erweitert. So liefert die Seite Google wie Answer-Engines sauber strukturierte Fakten.

06. Barrierefrei & DSGVO

Barrierefreiheit haben wir per axe-core-Audit geprüft und umgesetzt: Kontraste korrigiert, Überschriften-Hierarchie geschärft, Slider tastaturbedienbar gemacht. Für 124 Fotos sind Alt-Texte entstanden — effizient per KI-Bildanalyse erzeugt und redaktionell gepflegt. Rechtlich flankiert von einem DSGVO-konformen Cookie-Consent (cookieman, deutsche Oberfläche, Gruppen Notwendig / Vimeo / Matomo), funktionierenden Datenschutz-Verlinkungen und Hinweisen an allen Formularen. Die Kontakt- und Rückrufformulare verschicken Haspa-gebrandete Bestätigungsmails — ohne TYPO3-Branding, mit rechtskonformem Footer und Logo.

07. Spenden per QR-Code

Spenden sollen leicht sein. Statt umständlicher Überweisungslinks gibt es je Stiftung einen QR-Code auf GiroCode-Basis — direkt aus der Banking-App scanbar. Die Förderung der richtigen Einzelstiftung ist damit nur einen Scan entfernt.

08. Go-Live & Multisite-Betrieb

Zum Go-Live kamen der Umzug auf die eigene Domain haspa-hamburg-stiftung.de, die Site-Konfiguration und die Weiterleitung alter URLs. Betrieben wird die Seite als Multisite: ein TYPO3-System, das mehrere Anwendungen auf einer gemeinsamen Instanz trägt — die Stiftungs-Website und die Jahresbericht- bzw. Blog-Site. Ein System, zentral pflegbar für mehrere Anwendungen — Updates, Bausteine und Betrieb liegen an einer Stelle statt in getrennten Installationen. Fein abgestufte Redakteursrechte sorgen dafür, dass das Team alle Inhalte, Bausteine, Bilder und Plugins eigenständig und sicher bearbeiten kann.

Das Ergebnis: volle redaktionelle Autonomie, eine zentrale Datenquelle für die gesamte Stiftungslandschaft, Auffindbarkeit für klassische Suche und KI, rechtssichere und barrierearme Umsetzung — und Spenden, die nur einen Scan entfernt sind.