TYPO3-Upgrade der SEGGER Corporate Website
Die ursprüngliche Webpräsenz war inhouse auf Basis TYPO3 7 entwickelt worden und sollte dort auch weiter betrieben werden. Marketing Factory wurde als TYPO3-Experte beauftragt, das Upgrade auf eine aktuelle Version durchzuführen und die weitere inhouse-Pflege durch modernere Workflows zu optimieren. Einzelne Funktionen der Website (z. B. der Bau der komplexen Navigation oder der Feedback-Formulare) mussten noch in TYPO3 integriert werden.
| Kunde | SEGGER Microcontroller GmbH |
|---|---|
Projektzeitraum | 2019–2020 |
Entdecken Sie das Projekt aus Sicht von:
CMS-Technologie
Die Corporate Website wurde von TYPO3 Version 7.6 auf Version 9.5 aktualisiert. Die umfangreichen Inhalte der Website wurden migriert, Systemumgebung und Prozesse modernisiert für den weiteren Inhouse Betrieb optimiert. Ein Schwerpunkt war die Vereinfachung der Redaktionprozesse.
CMS-Technologie
Mit dem Upgrade der Corporate Website von TYPO3 Version 7.6 auf Version 9.5 wurde die extrem komplexe Inhaltsstruktur vereinfacht und über automatisierte Prozesse migriert.
Such-Technologie
Die Site Search basiert auf der Such-Technologie Solr. Damit wird das große Produktsortiment indexiert und durchsuchbar gemacht. Eine Suggest-Funktion unterbreitet dem Besucher Vorschläge für möglich Suchbegriffe, nachdem die ersten Buchstaben eingetippt wurden. Das ist insbesondere bei der Vielzahl der technischen Produktbezeichnungen von Vorteil, da hier schon die Top-Ergebnisse mit den genauen Bezeichnungen angezeigt werden. Tippfehler werden durch Korrekturvorschläge auf der Suchergebnisseite korrigiert.
Such-Technologie
Auch in diesem Projekt vertrauen wir für eine leistungsstarke Site Search auf die Such-Technologie Solr. Die Vielzahl an Produkt- und Inhaltsseiten kann auf diese Weise leicht indexiert und durchsuchbar gemacht werden, um den Website-Besucher schnell und einfach mit den benötigten Informationen zu versorgen.
SEO/SEA-Maßnahmen
Mit dem Upgrade auf TYPO3 9.5 wurde es für die Redakteure einfacher, SEO-relevante Daten zu pflegen. Darüber hinaus wurde die Möglichkeit zur einfachen Erstellung von Structured Data (schema.org) geschaffen. Die stark verbesserte Performance der Website sorgt für ein besseres Rankingpotential.
SEO/SEA-Maßnahmen
Mit der Extension Yoast SEO für TYPO3 wurde es für die Redakteure einfacher, SEO-relevante Daten zu pflegen.
Sonstige Backend- und Frontend-Technologien
Die Verbesserung der Site Performance war einer der Schwerpunkte bei diesem Projekt. Eine Beschleunigung der Seitenladezeiten konnte durch bessere Serverarchitektur und modernere Software-Komponenten sowie durch Reduzierung überflüssiger Frontend-Interaktionen (JavaScript-Layouts) erzielt werden. Die übertragenen Datenmengen konnten stark reduziert werden.
Der redaktionelle Workflow wurde verbessert, es sind weniger Know-how und Entscheidungen für Redakteure nötig: Durch Vereinfachung und Vereinheitlichung der Backend-Layouts und Reduzierung der möglichen Content-Elemente und ihrer Layout-Varianten für das Frontend ist die Pflege der Website einfacher worden.
Sonstige Backend- und Frontend-Technologien
Die Verbesserung der Site Performance konnte mit verschiedenen Maßnahmen erzielt werden. Das Bootstrap Package als performanteres und zukunftssicheres Theme ersetzt das ursprünglich verwendete Theme. Im JS-Refactoring wurden die reinen Layout-Scripte entfernt und durch HTML/CSS-Lösungen ersetzt. Caching mit Varnish und schnellere Auslieferung der Inhalte über ein globales CDN reduzieren die Ladezeit der Seiten. Die Bildausgabe erfolgt im modernen Web-Format WebP und natives Lazy Loading für Bilder in modernen Browser mit Fallback-Lösung für IE11 sorgt dafür, dass Inhalte schneller angezeigt werden.
Der redaktionelle Workflow wurde erheblich verbessert. Alle zuvor verstreuten Informationen zu einem Produkt sind direkt in der Datenbank an die Produktseite gebunden. Menüs und Asset-Links werden automatisch aus den Seiteninformationen generiert. Syntax Highlighting für die vielen Code-Beispiele erfolgt mit der Extension fs-code-snippet. Sprechende IDs für Content-Elemente dienen einer einfacheren Sprungmarker-Verknüpfung.
Individuelle Lösungen
Die Corporate Site umfasst viele hunderte von Seiten auf mehreren Ebenen. Um die wichtigen Themen in der Hauptnavigation auch weiterhin sinnvoll platzieren und visuell ansprechend darstellen zu können, wurde die umfangreiche Navigation technisch neu aufgesetzt, um die Performance der Website zu optimieren. Zudem gibt es noch weitere Navigationen auf Unterseiten, die den Website-Besucher optimal zu passenden Themen weiterleiten und auf diese Weise die User Experience (UX) stärkt.
Individuelle Lösungen
Für die komplexe mehrstufige Navigation, die vorher aus Performance-Gründen aus statischem html gerendert wurde, entwickelten wir eine Lösung, die Teile der unteren Navigationsebenen nachlädt, nachdem die Seite bereits im Frontend zu sehen ist.
Content-Migrator
Das Layout im Frontend sollte gleich bleiben. Vor allem durch den Wechsel der Bootstrap-Extension war es nötig, die Inhaltsdaten in ein komplett neues Datenbank-Format zu überführen. Durch die extrem umfangreichen und komplex aufgebauten Inhalte war diese Migration nur über einen relativ langen Zeitraum lösbar.
Content-Migrator
Das Layout im Frontend sollte gleich bleiben. Vor allem durch den Wechsel der Bootstrap-Extension war es nötig, die Inhaltsdaten in ein komplett neues Datenbank-Format zu überführen. Durch die extrem umfangreichen und komplex aufgebauten Inhalte war diese Migration nur über einen relativ langen Zeitraum lösbar. Als Weg wurde die Entwicklung eines zusätzlichen, mehrstufigen Content-Migrators gewählt. Der Migrator war in der Lage, die gerade aktuellen Inhaltsdaten im laufenden Betrieb auf Knopfdruck immer wieder in die neue Struktur zu übertragen. So konnte ein extrem langer Content-Freeze während der Arbeiten vermieden und konnten die Zwischenergebnisse immer wieder an den verschiedenen Seiten- und Inhaltstypen überprüft werden.