Oder auch die Frage: Responsive Design oder eigenes mobiles Template?
Am 12. November haben wir unser bislang größtes und ambitioniertes Projekt an den Start gebracht. Etwa zwei Wochen nach dem Start können wir den Erfolg des Projekts messen und möchten die Gelegenheit wahrnehmen, Ihnen im Detail Bericht zu erstatten.
Konkret möchten wir erläutern, welche Zielstellung wir hatten, für welchen mobilen Lösungsansatz wir uns entschieden haben und welche technischen Lösungswege wir dabei eingeschlagen und umgesetzt haben.
Ausgangssituation:
Arktis.de ist einer der führenden Händler für Apple- Zubehör. Wenn man sich den ganzen Tag mit Zubehör für Smartphones beschäftigt, liegt die Wichtigkeit einer mobilen Lösung klar auf der Hand. Daher war seit längerem eine externe Mobile Commerce Lösung an Shopware angeschlossen. Smartphone-Nutzer wurden dann auf eine eigene optimierte Umgebung geleitet.
Solche externen Standardlösungen sind einfach zu implementieren, haben allerdings auch Grenzen. Und funktionieren immer etwas anders, als der eigene Shop. Dazu können externe mobile Lösungen mit Provisionen von bis zu 8% auch schnell die Margen belasten.
Zielstellung einer individuellen Lösung:
Arktis.de Geschäftsführer Rainer Wolf ist an verschiedene Grenzen einer externen Standardlösung gestoßen und ist auf uns mit folgender Zielstellung zugekommen:
- Branding: die mobile Seite sollte wie die normale Arktis.de Website aussehen und sich auch so anfühlen
- Usability: Kunden sollten auf Ihr Kundenkonto, ihren Login und die gleichen Zahlarten des Desktopshop zugreifen können
- Performance: der Shop soll schnell laden und möglichst wenig mobilen Traffic verbrauchen. Die mobile Lösung sollte schlank gehalten werden und nur relevante Inhalte ausspielen.
- Mobiler Look & Feel: die Lösung sollte Unterstützung für Touch-Events, Gesten und Retina mitbringen.
- SEO-Faktoren: gerade SEO-relevante Punkte sind mit externen Standard-Lösungen schwierig umzusetzen. Hier gab es eine eigene kleine Wunschliste.
- Kontrolle: die mobile Seite sollte so aufgebaut sein, dass Wünsche flexibel in einer geeigneten Form für Smartphones umgesetzt werden können.
Kurzum ging es darum, die bestmögliche mobile Shopping-Umgebung für Arktis-Kunden zu schaffen.
Lösungsansätze: Responsive Design vs. mobiles Template
Responsive Design ist in aller Munde und einer der großen Trends im E-Commerce und in der Shopware-Welt. Wir nutzen responsive Design erfolgreich für unsere eBay Templates und für WordPress Projekte.
Trotzdem haben wir uns gegen diese Option entschieden und auf ein eigenes mobiles Template gesetzt. Wir haben diese Entscheidung bewusst aus folgenden Gründen getroffen:
Flexibilität vs. Komplexität:
Responsive Design für einfach strukturierte Inhalte wie eBay Templates oder Firmenwebsites zu erstellen ist verhältnismäßig überschaubar. Ein Shopware-Shop mit allen seinen Bereichen ist hochkomplex. Mit einer Codebasis alle Bereiche für große wie kleine Bildschirme gleichermaßen gut aussehen zu lassen, halten wir für kaum machbar. Abstriche und Einschränkungen in der Flexibilität wären die Folge gewesen.
Beispielweise lassen sich einige Elemente im Arktis.de Desktopshop wunderbar im oberen Bereich der Artikelseite unterbringen (Farbauswahl oder Youtube-Button). Auf der mobilen Seite sind diese Elemente nicht wichtig genug, um im oberen Bereich der Seite platziert zu werden. Entsprechend werden sie einfach weiter unten platziert.
Ein weiteres Problem sind Grafiken und Banner. Damit ein Bannertext auf dem Smartphone gut lesbar ist, müsste man eine Schriftgröße wählen, die auf dem großen Monitor wiederum schnell an Text für Sehbehinderte erinnert.
Performance:
Schnelle Ladezeiten, schlanker Code, eine Minimierung von Browser-Requests und das Streben Redundanzen zu vermeiden haben das Projekt aus technischer Sicht wesentlich gekennzeichnet.
Unter Redundanzen verstehen wir das Laden von Daten, die für die jeweilige Endgerät nicht benötigt werden. Es gibt Elemente, die auf der Desktop-Seite durchaus Sinn machen, aber mobil überflüssig sind check that. Andersherum werden andere Elemente auf der mobilen Seite benötigt oder sollen sich anders verhalten. Diese Anpassungen hätten auf der Desktopseite wiederum für größere Probleme gesorgt (und ja: auch wenn wir die Elemente per CSS ausgeblendet hätten).
Usability und Erscheinungsbild:
Die folgenden Punkte betreffen eher technische Aspekte und wären meist auch mit responsive Design umsetzbar. Da der Hauptaugenmerkt der Entwicklung auf mobilen Endgeräten lag, ist die Unterstützung von Touch-Events, Swipes, und Gesten wie pinchen konsequent. Besonders stolz sind wir z.B. die auf den Bilderzoom im Artikel, der konsequent für Touch-Geräte entwickelt wurde.
Praktische Erwägungen:
Der letzte Relaunch der Arktis-Seite (andere Firma, aber gleiches Kern-Team) lag zu Projektstart erst ca. ein Jahr zurück. Es gab keine Notwendigkeit, hier eine neue Baustelle zu eröffnen und erprobte und bewährte Elemente nach so kurzer Zeit wieder umzustellen.
Eigene mobile Lösung als Best Practise:
Letztlich haben wir bei unserer Vorab-Analyse der größten deutschen E-Commerce Websites in fast allen Fällen dedizierte mobile Seiten vorgefunden. Viele dieser Lösungen haben uns inspiriert. Von den Lösungen, die auf Responsive Design gesetzt haben, konnte uns dagegen bislang keine vollständig überzeugen.
Das Ergebnis: gesteigerte Conversion-Rate, mehr Bestellungen, mehr Umsatz
Wir haben nach dem Launch am 12. November den Shop genau beobachtet um evtl. unentdeckte Probleme aufzuspüren. Und das hat Spaß gemacht, denn wir konnten direkt sehen, dass die Anzahl der mobilen Bestellungen deutlich gestiegen ist. Auch fast 2 Wochen nach dem Start, zeigt die Anzahl mobiler Bestellungen weiterhin nach oben.
Einige der Zahlen dürfen wir hier kommunizieren. Die Zahlen an sich sind aus Bestelllisten und dem Shopware Backend hervorgegangen, andere wiederrum aus Google Analytics. Leider lagen keine Zahlen des Vorjahreszeitraums vor. Daher beziehen sich die Zahlen auf einen Vergleich des Zeitraums vom 1.-11. November und vom 13.-23. November 2014.
Als Vergleich haben wir die Kenngrößen auch im Desktopshop angeschaut, in dem sich aber keine signifikanten Änderungen der gleichen Kenngrößen ergeben haben. Dadurch können wir externe Störgrößen wie das beginnende Weihnachtsgeschäft als Ursache ausschließen.
Conversionrate: +45%
mobile Bestellungen: +103%
mobiler Umsatz: +68%
Und das sagt Rainer Wolf, Geschäftsführer der Arktis Software GmbH zum Projekt:
„Dank der mobilen Webshop Umsetzung durch die Firma clevercommerce konnten wir schon direkt in den ersten Tagen nach dem Start einen sprunghaften Anstieg der mobilen arktis.de Bestellungen feststellen. Auch die Verweildauer auf unserer mobilen Webseite hat sich spürbar verlängert. Klasse, wir sind begeistert von der erneut tollen Arbeit unserer stets zuverlässigen Haus- & Hofagentur“
Dankeschön an alle Beteiligten!
Nach einem langen und komplexen Projekt sind wir sehr glücklich mit dem Ergebnis und haben auch von Partnern und Freunden positives Feedback für das Ergebnis bekommen. Wir möchten dies zur Gelegenheit nehmen, uns beim gesamten Projektteam zu bedanken. Denn ohne den Einsatz aller Beteiligten, wäre das Projekt nicht in der Zeit und der Qualität realisierbar gewesen.
Es gibt wohl wenige Kunden mit denen man ein Projekt dieser Größenordnung agil und ohne zentimeterdickes Pflichtenheft umsetzen kann. Das setzt ein großes Vertrauen sowohl auf Seiten des Händlers und als auch der Agentur voraus. Für dieses Vertrauen möchten wir Rainer Wolf ganz herzlich danken! Wir sind sehr glücklich, dass wir erneut so reibungslos und pragmatisch zusammen gearbeitet haben! Weiterhin bedanken wir uns bei Tobias Kappert für seinen fortlaufenden Input.
Weiterhin bedanken wir uns bei Simon Gall für die Unterstützung bei der Umsetzung und Prüfung der SEO-Anforderungen und dafür, dass er beim Launch die Augen stets offen gehalten hat eventuell auftretende Fehler und Ungereimtheiten schnell aufzuspüren. Leider ist eine solch intensive und proaktive Mitarbeit unter den deutschen SEO-Spezialisten nicht selbstverständlich.
Wichtig sind auch kleinere Zuarbeiten und Hilfestellungen. Daher möchten wir nicht vergessen uns bei Compositiv zu bedanken. Danke auch an Best It für das Thumbnail-Plugin, das uns erneut gute Dienste geliefert hat.
Ein ganz besonderer Dank gilt unserem Frontend-Entwickler Lars, der seit Sommer nur mit kurzen Unterbrechungen, ständig und unermüdlich an dem Projekt gearbeitet hat. Dabei hat er nicht nur sämtliche Template-Dateien durchpflügt, sondern auch in die tiefsten Winkel von Shopware geschaut, diverse Bereiche einen Refactoring unterzogen. Er hat auch bekannte aber bislang ungelöste Probleme des http-Frontendcaches gelöst und sich in der Zeit durch diverse schwierige Probleme geradezu durchgebissen. Wir sind sehr froh so einen Weltklasse-Frontend-Entwickler im Team zu haben.
Projektablauf und technische Details:
Zum Abschuss kommt der technisch gehaltene Teil mit Infos, wie wir gearbeitet haben und für welche technischen Lösungen wir uns entschieden haben.
Ein ausführliche Recherche und Analyse großer deutscher Websites ging dem Projektstart voraus. Wir haben geschaut, was uns gefällt, was davon für das Sortiment von Arktis.de Sinn macht, wie wir einzelne Punkte technisch lösen können. Die Recherche oder auch „mobile-Shopping-Safari“ durch die deutsche E-Commerce-Landschaft wurde sowohl bei uns als auch bei Arktis.de intern durchgeführt und zeugt vom hohen Involvement auf Händlerseite.
Wichtigste Grundlage für die Entwicklung war zunächst ein Wireframe, in dem wir die relevanten Elemente, Seiten und Verhaltensweisen anskizziert haben und anschließend in der kompletten Projektteilnehmer-Runde aus Händler, Entwickler, Projektmanager und SEO-Dienstleister priorisiert und geprüft haben. Weiterhin haben wir u.a. technische Anforderungen dokumentiert, um Google die richtigen Signale für die mobile Seite zu senden.
Die Entwicklungsphase an sich haben wir agil gestaltet und fertig gestellte Bereiche Stück für Stück vorgestellt, gemeinsam durchgesprochen, Feedback umgesetzt und uns so Stück für Stück durch die einzelnen Bereiche gearbeitet.
Viele der angepassten Bereiche sind von außen schwer einzusehen, und werden daher im Folgenden vorgestellt:
- Wir arbeiten mit Technologien auf dem aktuellen Stand der Technik mit HTML, CSS2 und CSS3. Wir setzen auf die aktuelle Version des JQuery-Frameworks sowie Smarty und PHP. Allein im Bereich CSS konnten wir die Anzahl der Dateien auf zwei Stück verringern und auf ca. 100KB verkleinern.
- Feature Detect und Weiche: mit einer auf dem WURFL-Repository basierenden Lösung wird zunächst geprüft , ob ein Besucher ein Smartphone benutzt. Falls ja, wird er auf die passende mobile Seite geleitet. Einige kleine aber feine Details dieser Lösung betreffen Einkaufswelten in den Kategorien, die auf beiden Seiten unterstützen.
Außerdem findet man im unteren Bereich der Seite die Möglichkeit zwischen mobilem und Desktop-Shop zu wechseln.
- Wir arbeiten aktuell mit lediglich zwei Bildgrößen im Shop, wodurch das erste Artikelbild auf der Artikelseite bereits im Browser-Cache vorhanden ist.
- Auf der Kategorie- und Suchseite laden wir Artikelbildern beim Herunterscrollen dynamisch nach und laden am Ende der Seite weitere Ergebnisse dynamisch nach.
- Wo immer es möglich war, haben wir bei Grafiken auf SVGs und Iconfonts gesetzt, um durch das Vektorformat eine scharfe Ansicht auf Retina-Displays bei gleichzeitig hoher Performance beim Laden zu erreichen.
- Das mobile Template setzt komplett auf umgearbeitete AJAX-Slider, die auf Wunsch hin erst bei Klick nachgeladen werden.
- Das mobile Template funktioniert Hand in Hand mit einem Plugin, dass ungewünschtes Verhalten problematischer Plugins abfängt (z.B. einige Zahlarten), seo-relevante Parameter ausgibt, Smarty-Variablen zur Verfügung stellt und die Anzeige von Einkaufswelten steuert.
Während der Entwicklung wurde die mobile Seite mit diversen mobilen Endgeräten getestet. Hier ein Auszug aus der Liste: Samsung Galaxy S5, S, S4, Note 1, S3 und S1, Sony Experia Z, HTC One (mini) (X) iPhone 5, 5S und 6, Windows Phone und diversen anderen Geräten, die während der Entwicklungszeit greifbar waren. An dieser Stelle möchten wir uns noch einmal ganz herzlich bei Rainer Wolf für die Bereitstellung eines iPod Touch als iOS Testgerät für unser Device-Lab bedanken.
