19.05.2024

TYPO3 Facelift für Aktion Deutschland Hilft e.V.

Bündnis der Hilfsorganisationen

Screenshot der Website des Aktion Deutschland Hilft e.V.

Aktion Deutschland Hilft e.V. (ADH) ist ein Bündnis führender deutscher Hilfsorganisationen wie CARE Deutschland, Malteser Deutschland und World Vision Deutschland, das seit 2001 für weltweite, koordinierte Katastrophenhilfe steht. Durch gebündelte Ressourcen und Fachwissen kann ADH schnell und effizient Hilfe leisten und einen Großteil der Spenden direkt für Nothilfe einsetzen. Die Spendenmittel werden nach einem Schlüssel verteilt, der die Leistungsfähigkeit und das Profil der beteiligten Organisationen berücksichtigt.

Logo: Aktion Deutschland Hilft e.V.

­

Unsere To-Do´s

Development, Kommunikation, agile Lösung, Beratung, Responsive, Mobile, Barrierefreiheit, Projektmanagement

Herausforderung

Zwei Jahre nach dem TYPO3 Upgrade auf Version 11.5 wurde ein umfassendes visuelles und strukturelles Facelift für die Website www.aktion-deutschland-hilft.de initiiert.
Im Rahmen des TYPO3-Webprojektes standen für uns zentrale Ziele im Vordergrund: Allen voran wollten wir die TYPO3-Website visuell modernisieren und ihr ein frisches, zeitgemäßes Erscheinungsbild verleihen. Besonderen Wert legten wir dabei auf eine deutlich verbesserte Nutzerfreundlichkeit – sowohl für die Redaktion als auch für die Website-Besucher. Gleichzeitig galt es, die Plattform konsequent an die neue Markenidentität anzupassen, um das digitale Markenerlebnis auf allen Ebenen konsistent widerzuspiegeln. Abgerundet wurde unser Ansatz durch eine umfassende technische Aktualisierung der TYPO3-Website, die nicht nur die Performance und Effizienz steigert, sondern auch eine nachhaltige Grundlage für künftige Weiterentwicklungen schafft.
 

Umsetzung

Visuelle Optimierung

Die dreistufige Navigation (Meta-, Haupt- und Partner-Navigation) wurde grundlegend überarbeitet und bietet nun erweiterte redaktionelle Optionen. Des Weiteren erhielt die Hauptnavigation ein Sticky-Verhalten mit einem automatischem Logo-Wechsel beim Scrollen. Partner-Logos werden nun in Graustufen dargestellt und zeigen bei Mouse-over ihre Originalfarben. Für mobile Ansichten wurde eine kompakte zweizeilige Logo-Darstellung entwickelt.

Technische Weiterentwicklung

Doch nicht nur die User Experience stand im Fokus – auch im technischen Fundament wurde gründlich aufgeräumt. Durch die konsequente Nutzung moderner HTML5-Tags erhält die Website eine klarere, semantisch sinnvoll strukturierte Basis.

Zeitgemäße CSS-Techniken sorgen dabei für schnellere Ladezeiten und eine spürbar verbesserte Wartbarkeit des Codes. Dank des vollständig responsiven Aufbaus macht die Seite auf allen Geräten und Bildschirmgrößen eine perfekte Figur. Und durch den Einsatz von SVG-Grafiken erscheinen alle Logos jederzeit gestochen scharf – unabhängig von Auflösung oder Endgerät.

 

Ausgangslage

  • veraltetes Erscheinungsbild
  • eingeschränkte Nutzerfreundlichkeit
  • veraltete technische Basis

Nerdiges

  • Sticky-Navigation
  • Entwicklung zweizeiliger Logo-Darstellung (mobile)
  • 12.800 Zeilen Code hinzugefügt
  • 2.700 Zeilen Code entfernt
  • 160 Dateien angepasst

Technische Highlights

  • barrierefreundliche Basis durch moderne HTML5-Tags
  • Bessere Performance durch moderne CSS-Techniken
  • Scharfe Darstellung dank SVG-Grafiken

Projektumfang in Zahlen

12800

Zeilen Code hinzugefügt

2700

Zeilen Code entfernt

160

Dateien angepasst

Rundum überzeugendes Ergebnis

Das umfassende Facelift verleiht der TYPO3-Website ein frisches, zeitgemäßes User Interface und sorgt für eine konsistente, ansprechende Optik auf allen Endgeräten. Dank großzügiger Weißräume und klarer visueller Hierarchie rücken die wichtigsten Inhalte stärker in den Fokus, während die Lesbarkeit insgesamt spürbar verbessert wird. Auch die Redaktion profitiert: Neue Gestaltungsoptionen und erweiterte redaktionelle Möglichkeiten machen die Pflege und Weiterentwicklung der Inhalte deutlich einfacher und flexibler.

Technisch basiert die Seite aktuell auf TYPO3 11.5 und setzt durchgehend auf moderne HTML5- und CSS3-Standards sowie skalierbare SVG-Grafiken für alle Logos. Ein vollständig responsives Design mit durchdachten Breakpoints garantiert optimale Usability – egal, ob auf Smartphone, Tablet oder Desktop.
Das nächste technologische Update ist bereits eingeplant: Das Upgrade auf TYPO3 Version 13 ist schon in der Mache und wird die Plattform bald noch zukunftssicherer aufstellen.


Screenshot der Website ADH Navigationsmenü
Screenshot der Website ADH Startseite
Screenshot der Website ADH Teamseite
Screenshot der Website ADH Einsatzfall
Screenshot der Website ADH Newsseite
Screenshot der Website ADH Spendenformular

Realitäts-Check? 
Gerne.

Das könnte Sie auch interessieren:


Grafik in Grün mit Mann

Jetzt TYPO3-Upgrade buchen

Damit Ihr TYPO3 Content Management System sicher bleibt, benötigt es regelmäßige TYPO3-Updates und TYPO3-Upgrades. Es lohnt sich!

Grafik in grüner Farbe mit Bild eines Hackers mit Kapuze von hinten

Starfruit AI

Mit Starfruit AI erhalten Sie eine Business-KI-Lösung, mit der Sie über ein einziges AI Interface auf verschiedene LLMs zugreifen können. Jetzt Demo-Version anfordern und mehr erfahren!

Grafik in grün-pink mit Mann und Frau bei der Analysearbeit

SEO-Beratung aus Frankfurt

Mit einem umfassenden SEO-Audit analysieren wir Ihre komplette TYPO3-Website und zeigen Ihnen konkrete Optimierungspotenziale.

Jetzt anfragen.