Praxisbeispiel für Agenturen: Vom Designsystem zur skalierbaren TYPO3-Architektur

Eine Marketingagentur aus Deutschland beauftragte JAR Media mit der technischen Umsetzung eines TYPO3-Relaunches für einen mittelständischen Endkunden. Die Agentur brachte eine klare Markenstrategie, ein ausgereiftes UX-Konzept und vollständig ausgearbeitete Design-Layouts mit. Ziel war eine moderne, barrierearme, mehrsprachige Corporate Website, die sich flexibel erweitern lässt und Redakteurinnen und Redakteuren eine komfortable Pflege ermöglicht.

So haben wir das gemeinsame Setup angelegt:

• Rollen und Verantwortlichkeiten: Die Agentur übernahm Product Ownership und inhaltliche Steuerung; JAR Media verantwortete die technische Architektur, die Umsetzung in TYPO3 sowie DevOps und Qualitätssicherung.
• Gemeinsame Zieldefinition: Inhaltliche Module, wichtiger Funktionsumfang, Performance- und SEO-Ziele, Barrierefreiheitsniveau (angestrebt: WCAG-orientierte Umsetzung) sowie ein Wartungs- und Release-Modell nach dem Go-live.
• Planung und Kalkulation: Auf Basis eines Anforderungsworkshops mit der Agentur erstellte JAR Media eine Budget- und Kostenschätzung. Die Abrechnung erfolgte auf Stundenbasis (95 Euro pro Programmiererstunde, 105 Euro pro Beraterstunde).
• Agile Arbeitsweise: Arbeit in ein- bis zweiwöchigen Sprints, mit Backlog-Priorisierung durch die Agentur, Sprint-Planung, Zwischen-Demos, Abnahmen und Retrospektiven.
• Tooling und Transparenz: Ticketing und Fortschrittskontrolle für alle Beteiligten, ein Stage-System (Entwicklung, Staging, Produktion) sowie klar definierte „Definition of Ready“ und „Definition of Done“.

Das Setup legte den Grundstein dafür, dass Design- und Funktionsideen der Agentur 1:1 in eine robuste TYPO3-Architektur übersetzt werden konnten – ohne Reibungsverluste und mit frühzeitigen, sichtbaren Zwischenergebnissen für alle Stakeholder.

Vom Design zur TYPO3-Architektur: Komponenten, Content-Modell und Qualität

Das Agenturdesign bildete ein konsistentes Komponenten-System ab (Header-Varianten, Teaser, Karten, Tabellen, Mediengalerien, Formulare, Stage-Elemente, CTA-Blöcke). Um dieses System technisch belastbar zu machen, setzte JAR Media auf eine klare, wartbare Struktur:

• Sitepackage und Templates:

  • Einrichtung eines eigenständigen Sitepackages als Basis für Layouts, Styling und Konfiguration.
  • Fluid-Templates für Seiten- und Inhaltselemente, TypoScript-Konfiguration für Rendering, Konstante-Handling und Caching.
  • Saubere Trennung von Präsentation (Fluid/SCSS), Logik (ViewHelper, Konfiguration) und Datenhaltung.

• Inhaltselemente und Redaktionskomfort:

  • Modellierung wiederverwendbarer Inhaltselemente auf Basis der Designkomponenten: z. B. Teaser-Raster, Feature-Listen, Zitat-Module, Medien-Slider.
  • Durchdachte TCA-Konfiguration für Felder, Validierungen und Redakteursfreundlichkeit.
  • Inline-Hilfetexte und sinnvolle Standardwerte, damit die Agentur später Inhalte effizient einpflegen kann.

• Medien, Sprachen und Routing:

  • Nutzung des TYPO3 File Abstraction Layer (FAL) mit Bildvarianten und automatischer Responsive-Ausspielung.
  • Mehrsprachigkeit mit Sprachfallbacks und konsistentem Slug-/Routing-Konzept für saubere URLs.
  • Redirect-Management und saubere Migrationspfade vom Altsystem, um SEO-Verluste zu vermeiden.

• Redaktion, SEO und Performance:

  • Einsatz der Core-SEO-Funktionen (Meta, Open Graph, Sitemap), semantische Überschriftenstruktur und strukturierte Daten, wo sinnvoll.
  • Bildoptimierung (Formate, Größen, Lazy Loading), effizientes Caching und schlankes CSS/JS-Bundling.
  • Accessibility orientiert an WCAG-Grundsätzen: Fokusführung, Kontraste, ARIA-Attribute, Tastaturnavigation, sinnvolle Alternativtexte.

• Erweiterungen und Integrationen:

  • Wo nötig, Integration etablierter Extensions (z. B. News/Events) oder schlanke Eigenentwicklungen für projektspezifische Anforderungen.
  • Schnittstellen zu Drittsystemen (z. B. Marketing-Tools oder CRM) über klar definierte, wartbare Endpunkte.

Das Ergebnis war ein komponentenbasiertes TYPO3-Setup, das das Agenturdesign präzise abbildet, aber gleichzeitig stabil, performanceorientiert und ausbaufähig bleibt. Durch die frühe Abstimmung über Komponenten, Zustände und Edge-Cases (z. B. sehr lange Titel, fehlende Bilder, Übersetzungsfälle) konnten wir teure Design-Iterationen in späten Projektphasen vermeiden.

Umsetzung im Sprintbetrieb: Reibungslose Zusammenarbeit bis zur Übergabe

Die eigentliche Umsetzung folgte einem klaren Sprint-Rhythmus, der die Stärken beider Partner bündelte:

• Planung und Priorisierung:

  • Die Agentur priorisierte User Stories nach Kundennutzen und Go-live-Relevanz.
  • JAR Media schätzte Aufgabenblöcke und identifizierte Abhängigkeiten, um Risiken früh zu adressieren (z. B. komplexe Formulare, Integrationen, Migration).

• Entwicklung und Qualitätssicherung:

  • Feature-Entwicklung in kurzen Inkrementen mit Pull Requests, Code-Reviews und automatisierten Prüfungen (Linting, Builds).
  • Deployment auf Staging nach jedem abgeschlossenen Arbeitspaket; die Agentur erhielt unmittelbare Sichtbarkeit und konnte früh testen.

• Abnahme und Demos:

  • Wöchentliche Demos mit Fokus auf neu verfügbare Komponenten und Redaktionsabläufe.
  • Abnahmen auf Basis definierter Akzeptanzkriterien – transparent, reproduzierbar und ohne Überraschungen kurz vor Launch.

• Content-Einpflege und Schulung:

  • Nach Stabilisierung der Kernmodule übernahm die Agentur die Inhaltseinpflege.
  • JAR Media führte eine fokussierte Redakteursschulung (TYPO3-Backend, Workflows, Medienhandling, SEO-Basics) durch und stellte begleitende Kurzanleitungen bereit.

• Launch-Management:

  • Gemeinsamer Go-live-Plan inkl. Redirect-Konzept, Monitoring, Backup-Strategie und Rollback-Option.
  • Engmaschiges Monitoring in den ersten Tagen und kurze Reaktionswege bei Rückfragen der Agentur.

Die Zusammenarbeit zeichnete sich dadurch aus, dass beide Seiten ihre Stärken einbrachten: Die Agentur verantwortete die fachliche Vision, das Design und die inhaltliche Qualität; JAR Media lieferte eine robuste technische Umsetzung, beriet technologiebezogen und sorgte für einen sicheren, kalkulierbaren Weg in den Livebetrieb.

Ergebnisse und Best Practices: Was sich für Agenturen bewährt

Der Endkunde erhielt eine performante, gut pflegbare TYPO3-Website, die das Markenerlebnis der Agentur nahtlos transportiert. Aus dem Projekt haben sich für die Zusammenarbeit zwischen Agenturen und TYPO3-Entwicklern folgende Best Practices herauskristallisiert:

• Klare Rollen und ein gemeinsames Zielbild:

  • Eine eindeutige Product-Owner-Rolle auf Agenturseite sorgt für schnelle Entscheidungen.
  • Technische Leitplanken zu Beginn sparen Zeit in der Umsetzung.

• Komponenten statt Einzelseiten denken:

  • Ein Designsystem mit dokumentierten Zuständen (Varianten, Breakpoints, Fehler- und Leercases) verhindert Interpretationsspielräume.
  • Ein konsistentes Content-Modell macht Redakteursarbeit schneller und die Website skalierbarer.

• Früh testen, oft zeigen:

  • Staging-Demos nach kurzen Inkrementen liefern Sicherheit und fördern konstruktives Feedback.
  • Prototypische Klickdummys oder interaktive Komponenten-Previews helfen, Erwartungen zu synchronisieren.

• Transparente Kalkulation und agile Steuerung:

  • Eine initiale Budget- und Kostenschätzung schafft Orientierung; die Abrechnung auf Stundenbasis (95 Euro pro Programmiererstunde, 105 Euro pro Beraterstunde) bleibt flexibel für Änderungen.
  • Ein gepflegtes Backlog mit Prioritäten und Aufwandsschätzungen ist der Kompass für Reichweite, Zeit und Budget.

• Qualität und Nachhaltigkeit von Anfang an:

  • Accessibility, Performance und SEO sind Grundanforderungen, keine Anhängsel.
  • Klare Definition-of-Done-Kriterien, Code-Reviews und automatisierte Checks erhöhen die Wartbarkeit.
  • Dokumentation und Redaktionsschulungen verhindern Wissensinseln.

• Zusammenarbeit modular denken:

  • Agenturen mit eigenen Entwicklerteams profitieren, wenn Teilprojekte sauber abgegrenzt werden (z. B. ein Produktfinder, ein komplexes Formular, eine Schnittstelle).
  • Schnittstellenverträge und schlanke technische Dokumentation erleichtern gemeinsame Entwicklung.

• Go-live ist ein Meilenstein, kein Endpunkt:

  • Ein vereinbarter Wartungs- und Updatepfad (TYPO3 LTS, Sicherheitsupdates, kleine Releases) schützt Investitionen.
  • Monitoring, regelmäßige Performance-Checks und Redaktionssupport sichern Qualität im laufenden Betrieb.

Für Agenturen innerhalb Deutschlands, die TYPO3-Projekte an Endkunden verkaufen, zeigt dieses Praxisbeispiel: Wenn Design- und Funktionsvorgaben präzise sind, Anforderungen früh priorisiert werden und die Umsetzungspartner eng verzahnt arbeiten, entsteht nicht nur eine technisch solide Website, sondern auch ein verlässlicher Prozess, der Budgets schont und Timings hält. JAR Media übernimmt dabei auf Wunsch die komplette technische Umsetzung oder gezielt Teilprojekte – stets mit klarer Planung, agiler Vorgehensweise und der gemeinsamen Zielsetzung, dass die Agentur ihren Kundinnen und Kunden ein überzeugendes, zukunftsfähiges Webprodukt übergeben kann.