Content Inventory, Relaunch und Upgrade auf TYPO3 v13

Das Projekt haben wir mit einem umfassenden Content Inventory und einer tiefgehenden Analyse aller bestehenden Systeme von SEGGER (TYPO3-Website, Knowledge Base, Blog, zwei Shops) begonnen, um am Ende eine harmonisierte Systemlandschaft zu schaffen.

Drei Bereiche haben wir gemeinsam mit SEGGER detailliert betrachtet:

Zielgruppen: Wir haben die verschiedenen Zielgruppen definiert, Proto-Personas entwickelt und sie den jeweiligen Systemen zugeordnet. Auf dieser Basis konnten wir die bestehenden sowie noch benötigten Inhalte identifizieren und strukturieren. Einzelne Bereiche und Systeme haben eine neue, stimmige Bezeichnung erhalten.

Bestehende Inhalte: Die aktuelle Seiten- und Inhaltsstruktur, vor allem im Produktbereich, wurde auf den Prüfstand gestellt. Inhalte wurden von SEGGER deutlich überarbeitet oder neu verfasst.

Aktuelle Präsentation: Auch haben wir eine detaillierte Übersicht geschaffen, in welcher Form und zu welchem Zweck die jeweiligen Inhaltselemente in TYPO3 verwendet werden. Wiederkehrende Kombinationen konnten so durch neue, passgenaue Elemente ersetzt werden. Nicht länger benötigte Komponenten wurden im Projektverlauf entfernt.

Neben dieser grundsätzlichen Bestandsaufnahme haben wir die Produktseiten inhaltlich neu konzipiert und ein zeitgemäßes Design mit adaptierten Navigationsstrukturen entwickelt. Der dazugehörige Frontend-Prototyp wurde später in die TYPO3-Installation überführt.

In diesem Zeitraum hat SEGGER auch die Produktpalette neu organisiert, von bislang vier auf nun fünf Produktkategorien.

Neben den Jour Fixes haben wir einen ausgedehnten Termin mit dem redaktionellen Team von SEGGER vereinbart. Wir wollten im Detail verstehen, wie sie mit dem aktuellen System arbeiten und wo ihre Probleme liegen.
Der Name ist abgeleitet von der Pair-Programming-Technik, bei der zwei Entwickler gemeinsam an einer Aufgabe und an einem Computer arbeiten.

In großer Runde haben wir die verschiedenen Fragen, Probleme und Erwartungen besprochen.

Einige Punkte konnten direkt vor Ort geklärt werden. Die weiteren lassen sich wie folgt gruppieren:

• Fehler oder fehlende Funktionen im alten TYPO3-System. Durch das Upgrade auf eine neuere TYPO3-Version wurde vieles davon behoben.
• Unklare Pflege durch veraltete oder überflüssige Felder und Optionen im Backend. Oder Optionen, die nur in bestimmten Konstellationen eine Wirkung im Frontend haben. Das zeigt erneut, wie wichtig es ist, das Backend anwenderfreundlich zu gestalten und neue Funktionen langfristig zu planen.
• Flexiblere Möglichkeiten bei der Platzierung von Inhalten.
• Teils unterschiedliche Abstände zwischen Inhalten, die schwer zu beeinflussen sind

Daraus haben sich dann weitere Aufgaben ergeben, die wir parallel zum Upgrade-Projekt umsetzen konnten.

Neben den TYPO3-Upgrades wurden alle Komponenten der Installation auf Stand der Technik gebracht und das System insgesamt verschlankt.
Alte TYPO3-Extensions wurden durch Core-Methoden oder aktuelle Lösungen ersetzt.

Durch den Wechsel von Bootstrap 4 (und Bootstrap Package) auf maßgeschneiderte Custom Styles und die Nutzung aktueller Browser-Technologien wurde das primäre Stylesheet auf fast ein Drittel seiner ursprünglichen Größe reduziert. Das Ergebnis ist eine deutlich verbesserte Ladezeit und Performance.

Bei allen neuen und vielen bestehenden Komponenten der Website haben wir die HTML-Struktur vereinfacht und modernisiert. Außerdem wurden strukturierte Daten für verschiedene Inhalte ergänzt.
Durch diese Maßnahmen konnten wir die Semantik und Barrierefreiheit nachhaltig verbessern.

Die verschiedenen Optimierungen im Frontend sorgen zudem für deutlich verbesserte Core Web Vitals. Für Mobil konnte die durchschnittliche Leistung von 71 auf 98 gesteigert werden, für Computer von 91 auf 99.

Im TYPO3-Backend waren viele Quick Wins möglich, wie das Ausblenden ungenutzter Felder oder die Konfiguration einer nicht-öffentlichen News-Vorschauseite.

An anderen Stellen haben wir tiefer analysiert, ob gewisse Optionen noch aktiv genutzt werden und ob sie sich durch bessere Ansätze ablösen lassen.
Die Abstände und Ausrichtungen von Inhalten wurden ebenso vereinheitlicht wie die Auswahl gerundeter Rahmenkanten oder Hintergründen. Dabei wurden die bestehenden Inhalte (immerhin 30.000 aktive Datensätze) stets im Blick behalten und bei Bedarf migriert.

Die bestehenden Gridelements wurden durch Container-Elemente ersetzt. Wiederkehrende, verschachtelte Inhaltsstrukturen überführten wir in maßgeschneiderte, schlanke Inhaltselemente. Dies vereinfacht die Redaktion und reduziert die Komplexität der Seitenstruktur erheblich.

Wenn wir Inhaltselemente durch eine neue, bessere Lösung ersetzen, müssen bestehende Datensätze natürlich korrekt migriert werden. Gleiches gilt für die Umstellung der Seiten-Layouts oder die Anpassung grundsätzlicher Styling-Optionen, wie bei der Ausrichtung von Inhalten.

Diese Migrationen haben wir beim Deployment der einzelnen Anpassungen jeweils automatisiert durchgeführt. Dadurch konnten sich die Redakteure auf ihre eigentliche Arbeit konzentrieren.