t3n Magazin: Kunde

Format D GmbH: Chronoswiss AG (www.chronoswiss.com)

t3n Magazin: Agentur-Team bei Format D (www.format-d.com)

Format D GmbH: Christian Schüller (Konzept, Projektmanagement), Lennart Schmiedel (Konzept, Design), Roland Stern und Tom Glöckler (Technisches Projektmanagement und Entwicklung), Emrullah Demir und Michael Serth (Entwicklung)

t3n Magazin: Projektdauer

Format D GmbH: 5 Monate

t3n Magazin: Projektmanagement-Tools

Format D GmbH: Redmine (Projektmanagement, Ticketing), troi (Agentursoftware)

t3n Magazin: Wie war das Projektbriefing?

Format D GmbH: Die Schweizer Uhrenmarke Chronoswiss betraute uns mit der Aufgabe, einen mehrsprachigen Relaunch der Website in deutsch, englisch, japanisch und chinesisch zu realisieren sowie die digitale Markenbildung international zu optimieren. Entsprechend der Grundsätze von Chronoswiss – „Aus Liebe zum Detail“ und „Leidenschaft für technische Präzision“ – sollte die neue Website die Produkte im unverwechselbaren Design präsentieren und die Handwerkskunst digital erlebbar machen. Das abgeschlossene Projekt erhielt einen Red Dot Design Award.

t3n Magazin: Wie sah das Design- und Kommunikationskonzept aus?

Format D GmbH: Die Website haben wir als eine Art Bühne für die hochwertigen Uhren konzipiert, mit einem puristischen und cleanem Look, reduzierter Menüführung und wenig Content. Somit stehen die Produkte und Bilder konsequent im Vordergrund und erhalten eine besondere Präsenz.

t3n Magazin: Welche Webtechnologien kamen dabei zum Einsatz?

Format D GmbH: Für die technische Umsetzung nutzten wir TYPO3 CMS, da das Content-Management-System unser Mittel der Wahl ist, wenn es um strukturelle und inhaltliche Anforderungen geht, wie sie die Chronoswiss-Website mit sich bringt.

Format D GmbH: Zum Einsatz kommt jQuery mit einer Menge – zum Teil eigens entwickelter – Plugins und weiterer Libraries. Dazu kommen Tools wie date.js zur Datumsberechnung und -konvertierung oder underscore.js für die Arbeit mit listenartigen Datenstrukturen, wie sie etwa aus AJAX-Requests geliefert werden. Einzelne Module oder Widgets – wie der Juwelierfinder, der Watch Finder oder die Berechnung der Mondphase im Footer – haben wir per Pseudo-Module-Pattern realisiert, um deren Funktionalität zu kapseln und Interferenzen mit dem globalen Namensraum zu minimieren.

Format D GmbH: Dafür legten wir pro Modul oder auch Funktionseinheit eine gesonderte JavaScript-Datei an. Sie enthält nur die Funktionalität dieses Moduls und zwar in Form einer Closure-Funktion, die öffentliche Methoden und Eigenschaften nur in einem übergebenen Namensraum zur Verfügung stellt. Das Modul „Uhrmacherlupe“ auf der Produkt-Detailseite haben wir mit Hilfe des jQuery-Plugins „mlens“ realisiert, das wir jedoch noch in eine Plugin-Eigenentwicklung verpackt haben. Die Basisdaten und Suchergebnisse des Juwelierfinders lädt die Website per AJAX aus dem Backend und visualisiert sie auf einer Google-Maps-Karte. Dabei haben wir die Geokoordinaten der einzelnen Juweliere bereits bei der Dateneingabe im Backend per Google-Maps-API-Call ermittelt, um die Anzahl der Geocoding-Anfragen aus dem Frontend gering zu halten.

Format D GmbH: Ebenfalls im Produkt-Detailbereich finden sich die Bühnenfahrten – jede Sektion hat ihre eigene, browserfüllende Bühne. Klar voneinander abgegrenzt, lassen sich so große Produktabbildungen, technische Daten und Bilder- oder Video-Galerien wertig oder katalogartig darstellen. Um diese Bühnenfahrten sauber zu implementieren, lädt die Website die betreffenden Seiten vor und aktiviert dann das Scrollverhalten und die Animation mittels CSS3-Transitions – inklusive JS-Fallback für ältere Browser.

t3n Magazin: Was waren die größten Herausforderungen?

Format D GmbH: Das Thema Mehrsprachigkeit ist natürlich immer eine gewisse Herausforderung. Vor allem, wenn es um Sprachen wie Japanisch oder Chinesisch geht, bei denen während der Einpflege oder Korrektur durchaus diverse Schwierigkeiten auftreten können.

Format D GmbH: Dann waren natürlich einige knifflige Spezialentwicklungen im Front- wie auch im Backend vonnöten: Wir mussten die Systematik und Hierarchie der Chronoswiss-Produktpalette (Domain Logic) auf der Datenbankseite planen und modellieren. Dabei sollten die Kollektionen, Produkte und Varianten mit den jeweils vielen verschiedenen Feldern und Inhalten für die Übersichts- und Detailseiten sowie für den Watchfinder im Frontend übersichtlich und benutzerfreundlich sein. Im Backend sollten sie sich ebenso gut verwalten lassen. Und schließlich mussten wir die bereits erwähnten Single-Page-Bühnen und ihre Inhalte im Frontend trotz ausgiebiger Planung einige Male umstellen, damit sie auch auf kleineren Monitoren optimal skalieren.

t3n Magazin: Was sind eure wichtigsten Learnings?

Format D GmbH: Einmal mehr: China. Dieses Land ist für Chronoswiss ein wichtiger Markt. Leider existieren dort ja bekanntermaßen etwas spezielle Regeln, was das Internet anbelangt. Und so mussten wir hierfür auch einige Extras entwickelt: Zum Einen haben wir die Website auf ein CDN mit Servern unter anderem in China gespiegelt, um die Zugriffs- und Ladegeschwindigkeit dort zu optimieren, zum Anderen einige Abfragen und Content-Weichen integriert, so dass beispielsweise Produktvideos über das chinesische Youtube-Pendant Youku laufen, da YouTube in China gesperrt ist.