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!

WordPress-Blog in xt:Commerce integrieren

Zahlreiche Shopbetreiber dürften neben ihrem Shop auch noch ein Blog führen. Will man jetzt die letzten Artikel aus dem Blog in xt:Commerce oder auch xtcModified einbinden kann man versuchen, den ganzen WordPress-Krempel noch zusätzlich in den Shop zu stecken oder man geht den einfacheren Weg über den RSS-Feed des Blogs.

Die nachstehende Lösung macht genau das, benötigt php5 mit simplexml-Erweiterung (die standardmäßig installiert ist) und übernimmt auch noch gleich die Charset-Konvertierung von UTF-8 zum von xtcModified nach wie vor genutzten ISO-8859-1. Natürlich kann man das ganze noch aufbohren, etwa mit einem Caching, damit nicht bei jedem Seitenaufruf der Feed parst wird, oder ähnlichem. Das kann dann jeder individuell integrieren.

Minimale Einbauanleitung:
blog.php nach templates/xtc5/source/boxes/, FEED_URL und FEED_MAX_ITEMS anpassen.
box_blog.html nach templates/xtc5/boxes/

In templates/xtc5/source/boxes.php nach

include(DIR_WS_BOXES . 'newsletter.php');

einfügen:

include(DIR_WS_BOXES . 'blog.php');

In templates/xtc5/index.html

{$box_BLOG}

dort einfügen, wo man es haben will.

GPL. Kein Support. Wer nicht weiß, was er tut: Finger weg. Ich bin nicht verantwortlich für irgendwelche Probleme, die beim Benutzen oder Einbau auftreten. Backup machen. Immer.

Download

Schei� Encoding, was, Afterbuy?

Das Internet – unendliche Weiten. Wir schreiben das Jahr 2011. Dies sind die Abenteuer des Raumschiffs UTF-8, das mit seiner viele tausend Zeichen starken Besatzung seit Lichtjahren unterwegs ist, um den fernen Planeten Afterbuy zu erreichen.

Ich hatte ja gedacht, Afterbuy wäre eine amerikanische Firma, die nach einer Expansion auf den deutschen Markt mit dem hochkomplexen Problem „Sonderzeichen” konfrontiert wurde und vor diesem kapituliert ist. Ich musste mich von Wikipedia eines besseren belehren lassen.

Afterbuy wird von vielen Multichannel-Shopbetreibern zur Auftragsabwicklung benutzt. Übernahme der Bestellung aus der Plattform (eBay, Amazon), Tracking der Bestellung, Versand der Rechnung, alles unter einem Dach. So weit, so gut.

Die Rechnung kommt als HTML-Datei daher. Und ich will hier jetzt gar nicht die Diskussion anstoßen, ob ein HTML-Dokument überhaupt eine ordentliche Rechnung sein kann, das wäre (mindestens) einen eigenen Beitrag wert, es geht mir darum, dass es Afterbuy im Jahr 2011 noch immer nicht schafft, das Dokument mit ordentlichen Sonderzeichen auszuliefern. Wahrscheinlich kauft Afterbuy das T-Shirt Schei� Encoding bei GetDigital palettenweise.

Öffnet man nämlich eine solche Rechnung in einem beliebigen Browser wird man vor allem mit �-Zeichen konfrontiert. Der geneigte Webworker denkt sich: „Naja, ist halt UTF-8 und der Browser zu blöd, das zu erkennen”. Also flugs Textkodierung geändert. Ergebnis: Immer noch �, wo eigentlich Sonderzeichen sein sollten. Und es ist egal, was man einstellt, es wird dabei bleiben. Und das schlimmste ist: Man kann das nicht einmal automatisiert beheben. Denn im Quelltext steht:

Mit freundlichen Gr��en

�? Und sowohl für ü als auch für ß? Nun, 65533 oder auch 0xFFFD ist im Unicode-Zeichensatz der Replacement Character, also eben genau jenes �, das da zu sehen ist. Irgendwo läuft da bei Afterbuy gehörig was schief. Vielleicht ist das UTF-8-Raumschiff auch schon angekommen, man hat aber niemandem bei Afterbuy gesagt, dass es keine gute Idee ist, alles, was nicht ASCII ist, durch � zu ersetzen.

Wenn man nicht jede Rechnung, die man über Afterbuy bekommt, manuell mühsam korrigieren will, wird man mit kaputten Sonderzeichen leben müssen, bis es Afterbuy mal auf die Reihe bekommt, diese korrekt in das Dokument zu schreiben. Vielleicht sollten sie Zeit und Energie aber lieber in signierte PDF-Rechnungen investieren…

Neue Website für den „Verein die Schwarzwalduhr”

Produktverantwortung hört für uns nicht an der Kasse auf. Und so sind wir bereits von Anfang an Mitglied im „Verein die Schwarzwalduhr”, der sich dem Erhalt und der Fortentwicklung des Produkts „Kuckucksuhr” verschrieben hat und dessen Zertifikat dafür garantiert, dass man eine echte Schwarzwalduhr mit mechanischem Uhrwerk in den Händen hält.

Und seit kurzem haben wir noch ein Stück mehr Verantwortung übernommen, denn der geschätzte Kollege wurde auf der Mitgliederversammlung des Vereins zum „Internet-Beauftragten” gewählt.

Die erste Tat in diesem neuen Amt war, dem in die Jahre gekommenen Internetauftritt des VdS ein neues, modernes Aussehen zu geben und das Angebot um neue Aktionen des VdS zu erweitern, die auf der alten Homepage nicht repräsentiert wurden.

VdS-Website vor dem Relaunch

Nicht nur wurde das bestehende Joomla-System durch WordPress ersetzt – wir haben die Gelegenheit auch genutzt, um den zweisprachigen Auftritt, der bislang auf einer Domain lief, unter zwei für die jeweiligen Sprachen passenden Internetadressen erreichbar zu machen. So ist der englischsprachige Auftritt unter www.black-forest.org zu erreichen während sich die deutsche Seite unter www.v-ds.org befindet.

Neue deutschsprachige VdS-Seite

Sprechende URLs und saubere Redirects von den alten Inhalten sind dabei natürlich eine Selbstverständlichkeit.

Beide Auftritte kommen im gleichen Look-and-Feel daher, der mit der grünen Farbe den Lebensraum Schwarzwald symbolisiert und mit dem Holz im Hintergrund eines der wichtigsten Grundprodukte einer jeden Kuckucksuhr.

Zu den Neuerungen des Auftritts zählen hochwertige Herstellerseiten und die Integration der VdS-Videos, die in Bild und Ton bei der Erstinbetriebnahme einer Kuckucksuhr oder bei auftretenden Problemen unterstützen – in mittlerweile sechs Sprachen!

Für die Zukunft sind regelmäßige News und eine Erweiterung des Herstellerbereichs bereits in Planung.

Kleiner Bewerber-Knigge

Jeder hat sicherlich mal so einen „Wie bewerbe ich mich richtig”-Kurs durchlaufen. Ich weiß nicht, was da heutzutage gelehrt wird, aber ich hätte da ein paar Dinge, auf die Dozenten hinweisen sollten:

Form

ACHTUNG: Es werden ausschließlich Bewerbungen per E-Mail berücksichtigt

Es ist mir unklar, was man daran falsch verstehen könnte, aber es heißt: Wir wollen weder eine Bewerbung auf toten Bäumen per Post haben noch ist es in unserem Interesse, dass man seine ausgedruckten Bewerbungsunterlagen persönlich bei uns vorbeibringt.

Anhänge

Meine Bewerbungsunterlagen fügen ich Ihnen als Anlage bei.

Diesen Worten sollte man Taten folgen lassen. Unbedingt.

EDV-Kentnisse

Das heißt nicht, dass wir hier ein abgeschlossenes Informatikstudium sehen wollen. Ein gescanntes Anschreiben und ein gescannter Lebenslauf lassen aber nicht den Eindruck entstehen, dass man die Anforderungen unbedingt erfüllen könnte. Und nur weil man ein VHS-Zertifikat in Tabellenkalkulation vorweisen kann ist es keine wirklich gute Idee, Lebenslauf und Anschreiben als Excel-Dokumente zu schicken! Überhaupt, die Dateiformate. Kein Word, kein Excel, kein Open Office oder sonstiges Zeug! PDF! Wer nicht in der Lage ist, ein PDF seines in Word geschriebenen Anschreibens zu erzeugen ist definitiv fehl am Platz!

Internetaffinität

Zitate aus einer E-Mail:

Ich bin mit dem Internet vertraut.

Ist der Arbeitsplatz weit vom Bahnhof entfernt?

In der Stellenausschreibung steht unsere Postadresse. Die Postadresse des Bahnhofs ausfindig zu machen und mit diesen beiden Informationen dann zu ermitteln, wie weit beide voneinander entfernt sind, sollte für jemanden, der mit dem Internet vertraut ist, zu einer der leichtesten Aufgaben gehören.

Seriösität

Das gilt eigentlich für alles. Aber für Bewerbungen noch einmal doppelt: Comic Sans ist keine Schriftart, die in Bewerbungen irgendeine Berechtigung hat. Und ja, hier sind Bewerbungen aufgeschlagen, bei denen sowohl Anschreiben als auch Lebenslauf komplett in Comic Sans geschrieben sind!
Auch nicht seriös sind diverse E-Mail-Adressen. @aol.com steht ganz oben auf der Liste, @hotmail.com ist nicht unbedingt besser.

Betreff

Bewerbung mag ein angebrachter Betreff für einen selbst sein. Wenn man aber mehrere Ausschreibungen laufen hat wäre es auf Empfängerseite schon gut zu wissen, auf welche Stelle man sich bewirbt, ohne vorher die E-Mail oder im Extremfall das Anschreiben lesen zu müssen.

Individualität

Ihre Stellenausschreibung vom 17.01.2011 bei der Bundesagentur für Arbeit
Sekretär/in

Das wäre in Ordnung, wenn es sich bei der ausgeschriebenen Stelle um einen Sekretariatsjob handeln würde. Tut es aber nicht.

Sehr geehrte Frau Herr Dingelskirchen,

Besser mal ne doppelte Anrede, da kann man wenigstens nichts falsch machen.

Mir schon klar, dass Bewerbungen im Dutzend günstiger sind. Wenn man das aber dann so handhabt sollte man seine Serienbrieffunktion im Griff haben. Alles andere legt den Schluss nahe, dass es mit den EDV-Kenntnissen dann doch nicht so weit her ist.


Wird bei Bedarf erweitert…