Gestatten, TYPO3 CMS 6.0: Die beiden MEINL-Websites im neuen Gewand
- Einblick
- Ereignis
Mit nicht unerheblichem Kraftakt haben wir rechtzeitig zur NAMM Show 2013 die Websites zu MEINL Cymbals und MEINL Percussion parallel gerelauncht – im brandneuen Look und mit nicht minder neuem TYPO3 unter der Haube ...
Wir geben es ja gerne zu: Nach rund zwei Jahren Anbahnung hatten wir irgendwie fast nicht mehr damit gerechnet, jemals noch den Relaunch der beiden in die Jahre gekommenen MEINL Websites erleben zu dürfen. Als dann vergangenen September plötzlich und mit kurzem Abstand hintereinander die Aufträge zum Relaunch der beiden Websites bei uns eingingen, waren wir nicht nur höchst überrascht, sondern uns war sofort schlagartig klar, dass uns der Umfang der beiden Projekte – und vor allem die Gleichzeitigkeit – vor eine der größten kapazitiven Herausforderungen unserer Geschichte stellen würden. Beide Websites sollten zur NAMM Show 2013, einer der weltweit größten Messen der Musikindustrie in Anaheim / Kalifornien, gleichzeitig online gehen und den Produktneuheiten des Jahres einen entsprechend neuen Glanz verleihen.
Zur Umsetzung der in jeder Hinsicht höchst unterschiedlichen Websites formierten sich bei uns wie auch bei MEINL zwei (mehr oder weniger) getrennt voneinander operierende Teams. Die wichtigsten Eckpunkte waren für beide Projekte identisch und schnell formuliert:
- Beide Websites sollten einen komplett neuen Look erhalten
- Beide sollten möglichst auf der aktuellsten technischen Basis aufsetzen – also dem damals gerade als Betaversion verfügbaren TYPO3 CMS 6.0, das im November 2012 veröffentlicht werden sollte
- Um den Entwicklungs- und auch späteren Wartungsaufwand zu minimieren und maximale Synergieeffekte zu erreichen, sollten sich beide Sites – wo immer möglich – ein und dieselbe technische Basis teilen (TYPO3-Extensions wurde nach Möglichkeit so konzipiert, dass sie in beiden Projekten zum Einsatz kommen konnten)
- Sowohl für Cymbals als auch für Percussion sollte es auch eine Website-Variante für Smartphones / mobile Endgeräte geben
- MEINL hatte über die letzten Jahre hinweg fleißig Anregungen aus der Community gesammelt, die in die Neugestaltung der Websites einfließen sollten
MEINL Cymbals
Die Website unter meinlcymbals.com richtet sich vornehmlich an Schlagzeuger und präsentiert in erster Linie die knapp 500 Schlagzeugbecken des Herstellers sowie diverse Zubehör- und Merchandise-Artikel. Als Global Player ist MEINL natürlich stets daran interessiert, sich unter den Mitbewerbern klar hervorzuheben – mit der neuen Website stehen die Chancen damit zumindest für's Erste wirklich gut.
Im Vergleich zu Mitbewerbern bietet MEINL seinen Besuchern traditionell eine enorme Masse an Hintergrundinfos zu Produkten und Artists, die umfangreichste Videosammlung sowie jede Menge aktuelle Meldungen. Gerade letztere haben sich in den letzten Jahren zunehmend auf diverse Plattformen wie Facebook, Twitter, Youtube und den eigenen Blog verteilt. Die neue Website fungiert nun als Aggregator und stellt website-interne News, Tweets und Facebook-Posts inklusive aller Kommentare und Likes kombiniert auf einer großen »Wall« direkt auf der Startseite dar. MEINL-Fans bringt die Corporate Website damit einen echten Mehrwert – nämlich alle Infos auf einen Blick.
Überhaupt: Gerade das schnelle Auf- und Zurechtfinden war auch eines der Hauptmotive im Produktbereich. Oftmals unterscheiden sich die vielen angebotenen Becken nur durch kleinste Merkmale oder eine winzige Nuance im Klang. Umso wichtiger war es, für maximale Übersicht und Vergleichbarkeit zu sorgen. Der neue »Cymbal Finder« ermöglicht es nun nicht nur, alle Becken direkt im Vergleich zu sehen und sich bereits aus der Listendarstellung heraus Klangbeispiele anzuhören: Über vielfältige Filter-Facetten wie z.B. Serie, Größe, Klangfarbe oder Preiskategorie lässt sich die Auswahl der dargestellten Instrumente schnell auf diejenigen Produkte reduzieren, die einen Besucher besonders interessieren. Erste Besucher-Feedbacks bestätigen derweil genau das, was wir erreichen wollten: Der neue Cymbal Finder bietet superschnellen Überblick über das Sortiment und verkürzt den Weg zum einzelnen Produkt ganz erheblich.
Ein weiteres Herzsstück der Website ist sicher der neue »MEINL Soundcheck«, ein interaktiver Cymbal-Set-Up-Konfigurator. Hier kann sich der Schlagzeuger sein eigenes Set-Up aus MEINL-Becken konfigurieren oder die Set-Ups der MEINL-Artists bestaunen. Einmal zusammengestellte Set-Ups können gespeichert, per Permalink z.B. auf Facebook geshared und so mit Freunden ausgetauscht werden. Und selbstverständlich stehen zu sämtlichen Becken auch Sound-Samples zur Verfügung, die per Klick auf jedes Becken im Set-Up abgespielt werden können. Neu ist die Idee eines Cymbal-Konfigurators nicht ganz – immerhin hatten wir bereits für die letzte meinlcymbals.com bereits einen solchen auf Flash-Basis realisiert, der jedoch nur vom Backend aus und ausschließlich für Artist-Set-Ups verwendet wurde, also nicht der Öffentlichkeit zur Verfügung stand. Die neue Generation des Konfigurators verzichtet auf den Einsatz von Flash, so dass zumindest die Darstellung der Set-Ups per HTML5, CSS und JavaScript auf den meisten Endgeräten möglich sein dürfte.
Bereits kurz nach der Veröffentlichung Ende Januar sind viele Ideen, Anregungen und Erweiterungen zum Konfigurator entstanden, so dass wir zwischenzeitlich bereits an der Version 1.5 arbeiten – man darf gespannt sein ...
Ebenfalls einzigartig unter den Mitbewerbern – zumindest im Moment – ist auch die neue mobile Website-Version. Unter der Haube werkelt hier im Prinzip dieselbe Technik wie für die Desktop-Variante, jedoch wurde die Oberfläche speziell an die kleineren, touchscreen-basierten Geräte angepasst. Ein responsives Design kommt nur insofern zum Einsatz, als dass sich diese Website-Variante auch auf z.B. Tablet-PCs an die Bildschirmgröße anpasst. Jedoch wurden manche Website-Bereiche vollständig anders gelöst (wie bspw. der Cymbals-Finder) oder entfallen in dieser Variante komplett (wie z.B. der »MEINL Soundcheck«), da diese hier nur mit erheblichen funktionalen oder gestalterischen Einschränkungen zu realisieren wären. Speziell für den »MEINL Soundcheck« ist für die Zukunft aber immerhin eine »View & Listen«-Variante für die mobile Site angedacht.
Schließlich laden wir herzlich zu einem Besuch der neuen MEINL Cymbals Website unter
respektive der mobilen Version unter
ein und freuen uns über jedes Feedback dazu!
MEINL Percussion
Für die Website unter meinlpercussion.com gelten allein schon aufgrund des andersartigen Sortiments und der damit anzusprechenden Zielgruppe(n) veränderte Voraussetzungen. Vor allem standen wir vor der Herausforderung, das große und inhomogene Produktsortiment mit mehr als 2.000 Instrumenten aus über 60 Instrumentengattungen leicht und übersichtlich erforschbar zu machen. Es sollten sowohl Profi-Musiker angesprochen werden, die genau wissen, wonach sie suchen, aber auch Amateure, die einfach nur »stöbern« wollen. Das Resultat etlicher Versuche und Überlegungen ist schließlich ein Navigationskonzept, das auf zwei Mechanismen basiert:
Auf der einen Seite kann die Produktauswahl über eine alphabetisch sortierte Liste aller verfügbaren Instrumentenkategorien schnell eingegrenzt werden. Vorschaubilder, die beim Fahren mit der Maus (»Hovern«) über die einzelnen Kategorien sichtbar werden, klären Unklarheiten, die bei den oft exotischen Namen nicht selten sind. Wer genau weiß, wonach er sucht, kann hierüber schnell zu einzelnen Instrumenten gelangen.
Benutzern andererseits, die nicht genau wissen, welches Einzelinstrument für sie in Frage kommt, bietet die Website es eine sehr flexible Facetten-Filterung, mittels derer die Produktauswahl durch »Tags« eingeschränkt werden kann. Durch die Wahl eines Materials, eines Musikstils und einer Farbe etwa kann sich ein Besucher schnell zu seinem zukünftigen Lieblingsinstrument durchklicken und dabei noch eine Menge Anregungen sammeln.
Egal, welche der beiden Navigationsweisen zum Einsatz kommt, während des Stöberns blickt man stets auf eine visuell ansprechende Instrumentendarstellung, bei der viel Wert darauf gelegt wurde, dass bereits vor der Einzelansicht detaillierte Produktbilder zu sehen sind. Besagte Einzelansicht liefert schließlich als letzte Ebene der Produktnavigation alle Informationen zu einem Instrument inklusive Produktvideos und einer Übersicht ähnlicher Artikel.
Der Entwurf zur Percussion-Website wurde dieses Mal stark durch das Design des aktuellen Printkatalogs beeinflußt. Insbesondere das strenge, reduzierte Layout sowie die Gesamtfarbgebung war von den Vorgaben der bearbeitenden Werbeagentur geprägt.
Auch zur MEINL Percussion-Website wurde eine Variante für Smartphones bzw. für mobile Endgeräte entwickelt, die nahezu alle Funktionalitäten der Desktop-Version abbildet. In den nächsten Wochen werden wir zudem noch einige kleinere Features einführen, die aus verschiedenen Gründen bis zum Launch nicht zu realisieren waren. Es lohnt sich also in jedem Fall, immer mal wieder unter
bzw. mobil unter
nachzusehen, was sich Neues getan hat!
Was die beiden verbindet ...
Schließlich seien den Gemeinsamkeiten und gemeinsamen Besonderheiten der beiden Websites noch ein paar Worte gewidmet:
- Wie bereits erwähnt basieren beide Präsentationen auf dem nagelneuen TYPO3 CMS 6.0 (bzw. inzwischen 6.0.1), das gerade letzten November veröffentlicht wurde. Wir hatten durch die beiden Projekte ausgiebig Gelegenheit, uns mit den Änderungen und Neuerungen bekannt zu machen. Bis jetzt überzeugt uns die neue CMS-Generation durch die fortschrittlichen Verbesserungen unter der Haube und wir können den Einsatz oder Umstieg nur dringend ans Herz legen.
- Als PIM-System kommt bei beiden Websites unsere hauseigene Firelike E-Business-Suite zum Einsatz, wie auch zuvor bereits bei der letzten Generation der MEINL Percussion-Präsentation. Anlässlich des Umstiegs auf die neue TYPO3-Generation haben wir die Adapter-Extension komplett überarbeitet und optimiert.
- Insgesamt wurden alle TYPO3-Extensions, die zur Realisierung der Projekte eigens entwickelt wurden, bereits auf den neuesten TYPO3-Features aufgesetzt (z.B. PHP-Namensräume, neue Klassenstruktur innerhalb von TYPO3, etc.) und bringen damit die besten Voraussetzungen mit, zumindest ein paar Jahre betriebsbereit zu bleiben.
- Für die Frontend-Suche kommt auf beiden Websites ein Apache Solr-Suchserver zum Einsatz. Dabei haben wir erstmals die frei verfügbare TYPO3-Extension Apache Solr for TYPO3 CMS mit dem Solr-Index kombiniert, der von unserer Firelike E-Business-Suite gespeist wird, so dass z.B. bei MEINL Cymbals eine nahtlos integrierte Suche von Produkten, Artists, News, Videos und regulären Seitendokumenten möglich wird.
Und zu guter Letzt ...
... bedanken wir uns sehr herzlich bei unseren Auftraggebern und den dortigen Ansprechpartnern für die anhaltende, intensive Unterstützung bei der Realisierung dieser beiden herausfordernden Projekte! Ohne euch und eure Ausdauer hätten wir dieses Ziel nicht erreichen können, vielen Dank!
Sicher werden beide Websites in den nächsten Wochen und darüber hinaus weiter verbessert und vorangetrieben werden – wir freuen uns über jede Anregung und jedes Feedback!