Nordic-Cross-Skating-Shop im neuen Gewand

Gestartet mit genau einem Produkt (in drei Farben) hat sich unser X-Skating-Shop über die Jahre zu einem der größten und kompetentesten Shops im Bereich Nordic Skating gemausert. Nicht nur Ersatzteile und Zubehör wie Lampen, Luftpumpen usw. haben wir seither ins Sortiment genommen, im letzten Jahr kam dann mit Powerslide auch ein weiterer Anbieter von Cross Skates hinzu – weitere günstige Set-Angebote, neue Ersatzteile und Zubehör. Mit der Ankündigung weiterer Modelle von Powerslide (XC Trail, XC Path) und Skike (Skike vX SOLO, Skike vX TWIN) war klar: Mit dem bestehenden Layout lässt sich unser Produktspektrum für den Kunden nicht mehr übersichtlich darstellen.

X-Skating Website vor dem Relaunch

Das Ergebnis ist seit Anfang März online.

X-Skating Website nach dem Relaunch

Shopsystem

Als Shop-Engine haben wir auf unsere bewährte, stark modifizierte Version von xt:Commerce gesetzt, quasi ein xt:Commerce on steroids.
Auch wenn die Originalversion mittlerweile sehr viele Jahre auf dem Buckel hat ist sie so sehr auf unsere Prozesse angepasst, dass sich ein Wechsel auf welches Shopsystem auch immer nicht gelohnt hätte. Allerdings wurde sie flottgemacht für die Zukunft und setzt jetzt konsequent auf UTF-8 als Zeichenkodierung. Zur Performanceoptimierung kann sie außerdem Bilddaten vom CDN laden, in unserem Fall Amazon CloudFront.

Layout

Im krassen Gegensatz zur antiquierten Shop-Engine steht hingegen HTML und CSS. HTML5 und CSS3 präsentieren das neue Layout dem Besucher. Die neuen Tags aus dem HTML5-Sprachschatz ergänzen und verbessern das bereits vorhandene semantische Markup, mit runden Ecken und Schlagschatten wird die Optik weiter aufgepeppt.

Inhalte auf den Produktseiten sind jetzt in Tabs sauber strukturiert, ein neuer Stocklängenrechner ersetzt die alte Übersichtstabelle und die neue Navigation mit Dropdownmenüs bietet uns quasi unendliche Erweiterungsmöglichkeiten. jQuery und der beeindruckende Nivo Slider kümmern sich darum, dass alles schick aussieht und auch in Browser-Fossilen wie beispielsweise dem Internet Explorer 6 zumindest benutzbar ist.

Für ein einheitliches Look&Feel wurde im Rahmen des Relaunch auch ein einheitliches Iconset für Zahlungsmöglichkeiten und Hersteller von uns entwickelt, da die verfügbaren Iconsets gerade für den europäischen Raum alle mehr oder weniger unbrauchbar sind.

Besondere Aufmerksamkeit haben wir auf den kompletten Checkoutprozess gelegt.
Direkt im Warenkorb kann man jetzt sein Lieferland auswählen und erhält sofort die Information, in welcher Höhe Versandkosten anfallen. Es gibt keine gesonderten Seiten mehr für Gast- und Kontobestellung, der Kunde wählt vielmehr im ersten Schritt, ob er ein Passwort vergeben möchte oder nicht. Ebenso kann er direkt bei der Angabe seiner Rechnungsadresse gleich eine abweichende Lieferadresse angeben und muss dies nicht, wie bei xt:Commerce üblich, in einem gesonderten Schritt tun. Auch gibt es zu jeder Zahlungsweise noch einmal detaillierte Hinweise, Zahlungsweise und Versandart sind auf einer Seite zusammengefasst. Auch ändert sich das Layout sobald man den Bestellprozess beginnt, sämtliche störenden Elemente werden dann ausgeblendet bzw. durch in diesem Stadium des Bestellvorgangs nützliche Informationen ersetzt. Wie sich das auf die Konversionrate auswirkt wird die Zukunft zeigen müssen.

Performance

Trotz allem technischen Schnick-Schnack sollte die Performance nicht zu kurz kommen. Neben dem Auslagern der Bilddaten auf ein CDN und der Komprimierung von CSS- und JS-Daten wurden auch kleinere Geschwindigkeitsoptimierungen vorgenommen, seien es Größenangaben bei den Bildern oder die Kombination von Hintergrundbildern zu CSS-Sprites.
Ein php-opcode-Cacher, im konkreten Fall XCache sorgt für schnelle Parsezeiten und Googles mod_pagespeed-Erweiterung für den Apachen optimiert noch dort etwas nach, wo es manuell zu aufwendig ist. In belastbaren Zahlen liest sich das dann z.B. so, dass die Startseite, gemessen mit den Pingdom Tools in 2,8 statt vorher 9,6 Sekunden lädt – trotz fast identischer Datenmenge!