KALDEWEI Website Relaunch
Im Jahr 2016 wurde Marketing Factory mit dem Relaunch der internationalen Corporate Website der Firma KALDEWEI beauftragt. Das Ziel war zum einem, die Anwendung auf ein modernes technisches Fundament zu stellen, um weiter zukunftsfähig und sicher entwickeln zu können. Zum anderen sollte die Nutzerführung optimiert und ein neues Brand Design implementiert werden. Darüber hinaus wurden neue inhaltliche Features entwickelt, um den Kunden zusätzliche Beratungsleistungen im Web anbieten zu können.
| Kunde | Franz KALDEWEI GmbH & Co. KG |
|---|---|
Projektzeitraum | 2015–2016 |
Entdecken Sie das Projekt aus Sicht von:
CMS-Technologie
Im Rahmen des KALDEWEI Website Relaunches 2016 wurde das Content Management System TYPO3 von Version 4.7 auf Version 7.6 geupgraded. TYPO3 kommt vor allem deshalb zum Einsatz, weil es durch seine Multisite- und Multilanguage-Fähigkeiten besticht. Die KALDEWEI Website umfasst dabei 11 Sprachen, welche auf 14 Hauptdomains präsentiert werden – darunter unter anderem mehrere Versionen (Deutsch, Französisch und Italienisch) für die Schweizer Präsenz.
CMS-Technologie
Für das bestehende TYPO3 CMS wurde ein Upgrade von Version 4.7 auf 7.6 vorgenommen. Gleichzeitig wurden die auf TemplaVoila-basierenden Templates durch ein modernes Sitepackage mit Frontend Rendering basierend auf css_styled_content ersetzt. Neben der Corporate Website im "Multilanguage-Tree" wurden mehrere Microsites und Landing Pages als weitere Seitenbäume integriert.
Für rein betriebsintern zugängliche Inhalte wurde ein spezieller Frontend-Login-Bereich mit verschiedenen Benutzergruppen implemeniert.
Such-Technologie
Die Site Search für KALDEWEI basiert auf der Such-Technologie Solr. Damit werden Content-Seiten, das Produktsortiment, Pressemeldungen und Download-Inhalte aus der Mediathek indexiert und durchsuchbar gemacht. Auf der Such-Ergebnisseite werden die Ergebnisse nach Typ kategorisiert, sodass Nutzer die Menge an Ergebnissen nach ihrer Suchintention bereits vorfiltern können. Eine Suggest-Funktion unterbreitet dem Anwender Vorschläge für möglich Suchbegriffe, nachdem die ersten Buchstaben eingetippt wurden. Das ist insbesondere bei den Eigennamen der Produkte von Vorteil. Tippfehler werden durch Korrekturvorschläge auf der Such-Ergebnisseite korrigiert.
Solr wird auch genutzt, um die Produkte auf den Produktübersichtsseiten auszugeben und nach bestimmten Kriterien zu filtern. Auf diese Weise können Anwender das umfassende Sortiment nach aussagekräftigen und relevanten Kriterien (auch in Kombinationen) filtern und es können redaktionelle Unterseiten für bestimmte Kriterien angelegt und bespielt werden.
Such-Technologie
Um eine effiziente und aufwandsschonende redaktionelle Pflege zu ermöglichen, werden Download-Inhalte (beispielsweise in Form von PDF-Dateien) nur an einer Stelle angelegt und von dort zum Download auf mehreren Domains angeboten (z. B. eine englischsprachige Datei zur Ausgabe auf der US-, CO.UK- oder COM-Domain). In Solr haben wir dazu einen speziellen Download-Indexer implementiert, der diese Inhalte auf allen dafür vorgesehen Domains auch in der Site Search ausgibt.
Um Text aus Dateien extrahieren und indexieren zu können, wurde zudem die Tika Extension implementiert und konfiguriert. Auf diese Weise werden etwa wichtige Datenblätter oder Zertifikate durch deutlich mehr Suchbegriffe leichter für Nutzer auffindbar.
Sonstige Backend- und Frontend-Technologien
Die meisten Content-Elemente sind maßgeschneidert, um dem hohen Anspruch der Marke im Web gerecht zu werden und eine kanalübergreifende Konsistenz in der Kommunikation zu erzielen.
Im Projekt nutzen wir ein erweitertes Bild-Rendering, um die Ausgabe von Bildinhalten auf unterschiedlichen Endgeräten flexibler zu gestalten und je nach Abmessung und Auflösung des Bildschirms passend ausgegeben zu können. Um jedes Bild in allen Viewports kanalgerecht und kontrolliert ausspielen zu können, nutzen wir Techniken zum Anschnitt der Bilder unter Berücksichtigung des Bildschwerpunkts. Damit kann sichergestellt werden, dass der relevante Teil des Bildes stets zu erkennen ist, unabhängig vom zur Verfügung stehenden Platz.
Ein eigenes Inhaltselement für Bilder mit multiplen Overlays (Rechtecke, Kreise, Polygone) ermöglicht die Darstellung von Inhalten mit klickbaren Hotspots.
Die Ausstellungssuche ist Geolocation basiert (Suche nach PLZ, Ort und entsprechende Ausgabe auf der Karte) und lässt sich nach Produkten filtern.
Sonstige Backend- und Frontend-Technologien
Für die maßgeschneiderten Content-Elemente kam Gridelements zum Einsatz, das wir um ein spezielles Rendering der Inhaltselemente erweitert haben.
Für die Ausgabe von Bildinhalten auf unterschiedlichen Endgeräten nutzen wir Responsive Image Rendering sowie Responsive Cropping und setzen den Bildschwerpunkt mit jQuery FocusPoint. Für den manuell setzbaren Bildmittelpunkt wurde von uns eine eigene Lösung mit bequemer Vorschaufunktion im Backend entwickelt. Darüber hinaus implementierten wir die responsive Darstellung von Imagemaps mit redaktionell pflegbaren Inhalten für die Hotspot-Layer.
Das verwendete SCSS wurde individuell entwickelt und modular aufgebaut, ein Frontend-Framework wurde nicht eingesetzt.
Duschplaner
Mit dem Duschplaner kann ermittelt werden, welche Duschlösungen und Zubehöre für die jeweils vorhandene Einbausituation geeignet und notwendig sind. Unter Angabe der verfügbaren Breiten-, Längen- und Höhenmaße kann aus mehreren Produkten das richtige ausgewählt und für den Einbau konfiguriert werden.
Duschplaner
Beim Duschplaner wird man Schritt für Schritt durch mögliche Konfigurationen geführt, auch hier werden die weiteren Auswahlmöglichkeiten per AJAX geladen. Das Konfigurationsergebnis lässt sich mit einem Klick in den Produktbereich überführen und dort weiter konfigurieren oder aber auch als PDF downloaden oder via Mail verschicken.
Produktkonfigurator
Jedes Produkt lässt sich nach Belieben zusammenstellen und konfigurieren. Dabei spielen neben den typischen Kriterien wie Farbe und Abmessung auch die möglichen Zubehöre eine Rolle. Durch eine komplexe Ausschlusslogik ist intuitiv ersichtlich, welche Kombinationsmöglichkeiten verfügbar sind und welche nicht. Das Produktbild passt sich unmittelbar der jeweils getätigten Auswahl an und vermittelt so auch optisch, welche Auswirkungen auf das Gesamtprodukt zu erwarten sind. Die Konfiguration kann als PDF gespeichert oder per Mail versandt werden.
Produktkonfigurator
Dem Produktkonfigurator liegt eine komplexe Ausschlusslogik zugrunde, damit der Besucher jederzeit sieht, welche welche Kombinationsmöglichkeiten verfügbar sind und welche nicht. Bei Anpassung der Konfiguration wird das jeweilige Vorschaubild sofort per AJAX aktualisiert. Grundkonfiguration und verfügbares Zubehör können sich länderspezifisch unterscheiden.
Bereitstellung von Planungsdaten
Im CMS werden für fast alle Produkte Planungsdaten in unterschiedlichen Formaten vorgehalten. Nutzer wählen im Frontend zunächst ein Produkt in den gewünschten Abmessungen und im Anschluss die benötigten Dateiformate aus. Sodann werden alle benötigten Inhalte zum Download bereitgestellt. Bei Bedarf kann der Nutzer über ein Formular Kontaktdaten bereitstellen, um mit passenden BIM-Ansprechpartnern bei KALDEWEI in direkten Austausch zu treten.
Import- und Export-Tasks
Speziell auf die Bedürfnisse des Kunden hin entwicklete Importer und Exporter für Händlersuchen, Katalogbestellungen, BIM-Dateien und auch den Produktkonfigurator ermöglichen eine effiziente Datenpflege und reduzieren Fehlerquellen.
Hosting und Monitoring
KALDEWEI ist mit seinen Produkten international vertreten, neben Europa ist sowohl der amerikanische als auch der chinesische Markt besonders wichtig. Zusätzlich ist Performance ein wichtiger Ranking-Faktor.
Das Hosting der Website erfolgt im MFC Rechenzentrum, welches direkt in eins der größten IP-Netze eines internationalen TIER1-Providers angebunden ist. Somit kann die Website in Europa als auch international sehr schnell erreicht werden. Zur Auslieferung von statischen Inhalten wird ein CDN auf HTTP/2-Ebene genutzt, somit ist die Übertragungszeit für die medienintensive Darstellung der Produkte nochmal reduziert worden.
Für die chinesiche Website wurde eine spezielle Live-Kopie auf einem System in China direkt eingerichtet. So können chinesische Nutzer direkt auf die entsprechenden Inhalte zugreifen, ohne dass der Traffic durch eine Firewall gehen muss.
Performance-Daten der Websites werden weltweit von verschiedenen Messpunkten permanent geprüft, so dass bei einer schlechten Performance direkt notwendige Maßnahmen ergriffen werden können.
Hosting und Monitoring
KALDEWEI ist mit seinen Produkten international vertreten, neben Europa ist sowohl der amerikanische als auch der chinesische Markt besonders wichtig. Zusätzlich ist Performance ein wichtiger Ranking-Faktor.
Das Hosting der Website erfolgt im MFC Rechenzentrum welches direkt in eins der größten IP-Netze eines internationalen TIER1-Providers angebunden ist. Somit kann die Website in Europa als auch international sehr schnell erreicht werden. Zur Auslieferung von statischen Inhalten wird ein CDN auf HTTP/2-Ebene genutzt, somit ist die Übertragungszeit für die medienintensive Darstellung der Produkte nochmal reduziert worden.
Für die chinesiche Website wurde eine spezielle Live-Kopie auf einem System in China direkt eingerichtet. So können chinesische Nutzer direkt auf die entsprechenden Inhalte zugreifen, ohne dass der Traffic durch eine Firewall gehen muss.
Performance-Daten der Websites werden weltweit von verschiedenen Messpunkten permanent geprüft, so dass bei einer schlechten Performance direkt notwendige Maßnahmen ergriffen werden können.
Gewinner des TYPO3 Awards in der Kategorie Enterprise/Industry
Im Oktober 2016 wurde die Corporate Website von KALDEWEI im Rahmen der T3CON 2016 mit dem TYPO3 Award in der Kategorie Enterprise/Industry ausgezeichnet.
Der Relaunch beinhaltete das Upgrade von TYPO3 CMS 4.7 zu TYPO3 CMS 7.6, ein komplettes Redesign der Corporate Website sowie die Implementierung eines intuitiv bedienbaren (Montage-)Konfigurators für das KALDEWEI Badewannen- und Duschflächensortiment.
Wir freuen uns mit unserem Kunden KALDEWEI über die Auszeichnung und auf die weitere Zusammenarbeit!