RWD vs. Web-Apps: Gibt es einen Königsweg für Mobile Commerce?

Seit einiger Zeit verfolgen wir die Diskussion rund um Frage, mit welchem Ansatz bzw. welcher Technologie sich mobilfähige Onlineshops am besten umsetzen lassen. Vereinfacht gesagt gibt es auf der einen Seite die Befürworter des Responsive Webdesign (RWD), die den zugrundeliegenden HTML- und CSS-Code so aufbauen, dass die dadurch definierten Frontends für jede denkbare Displaygröße nutzbar und optisch ansprechend sind. Auf der anderen Seite finden sich viele Verfechter von Web-Apps, die HTML 5 in Verbindung mit einem JavaScript-Framework wie Angular.js als den vielversprechenderen Ansatz ansehen. Eine Bestandsaufnahme.

Ein kurzer Blick in die aktuellen Themen, die in verschiedenen E-Commerce-Publikationen und im Rahmen einschlägiger Branchenveranstaltungen gerne zitiert werden, verrät unweigerlich, dass der mobilen Nutzung von Onlineshops ein spannendes Wachstum prognostiziert wird.  Es gibt mittlerweile eine große Zahl diverser Studien, die Aussagen über die Entwicklung von mobiler Nutzung allgemein und den Onlinekauf im Speziellen sowie den Verkauf mobiler Endgeräte nachzeichnen – auf mobilebranche.de gibt es eine entsprechende Auflistung. Über den Sinn und Unsinn derartiger Studien lässt sich trefflich streiten, es bleibt jedoch festzuhalten, dass viele Shopbetreiber sich ausreichend motiviert fühlen, in Mobile-Commerce-Projekte zu investieren.

RWD: Ein Theme für alle

Responsive Webdesign erlebt derzeit einen Boom und wird gerne als das nächste große Ding diskutiert, mit dem Onlinehändler den Herausforderungen der mobilen Nutzung ihrer Angebote begegnen können. Die Grundidee dabei ist, die Bestandteile der anzuzeigenden Seite so zu konzipieren, dass eine Bedienung bei jeder Displaygröße möglich und das Ergebnis bestenfalls optisch ansprechend ist. Realisiert wird das mithilfe sogenannter Break-Points, die gemäß verschiedener Auflösungsstufen dafür sorgen, dass die korrekte Seiten-Struktur für den jeweiligen Anwendungskontext geladen wird. Neue Breakpoints – so die Theorie – können jederzeit hinzugefügt und damit auch zukünftigen Kontexten Rechnung getragen werden.

Charmant für Frontend-Entwickler in Agenturen oder bei Shopbetreibern ist die Tatsache, dass technologisch nicht viel Revolutionäres passiert und die Lernkurve dementsprechend flach ist. Für einen guten HTML-/CSS-Entwickler ist RWD kein Buch mit sieben Siegeln, außerdem gibt es mit Foundation und Bootstrap mittlerweile zwei arrivierte Frameworks, sodass beim Aufbau der eigenen Seiten nicht mehr ganz von Null begonnen werden muss.

Web Apps

Ein alternativer Weg, Inhalte auf mobilen Endgeräte optimal zu präsentieren geht über die Nutzung eines JavaScript-Frameworks und der Verwendung von HTML 5. Die so erstellte Web App läuft ähnlich einer nativen App im RAM des jeweiligen Devices und lädt die erforderlichen Daten aus dem Netz nach. Streng genommen handelt es sich dabei nicht um eine klassische Website-Struktur, die aus mehreren, hierarchisch organisierten HTML-Seiten besteht, sondern um eine in sich geschlossene Anwendung. Web Apps werden ebenfalls auf Basis vom bestehenden Frameworks wie beispielsweise Sensa Touch, jQuery mobile oder das bereits erwähnte, unter anderem von Google mitentwickelte Angular.js erstellt.

Der Vorteil dieser Herangehensweise liegt vor allem darin, dass die für die Anzeige von Websites notwendige Logik auf Client-Seite berechnet wird und dadurch deutliche Performance-Gewinne möglich sind. In einem anschaulichen Video, dass Alexander Ringsdorff von CouchCommerce online gestellt hat, werden diese Vorteile deutlich.

[vimeo 98135357 w=500 h=281]

Hier ist zu sehen, wie ein Onlineshop mit RWD-Template und eine Web-App gegeneinander „antreten“. Als Aufgabe soll ein bestimmtes Produkt in den Warenkorb gelegt werden. Interessant zu sehen ist, wie unterschiedlich die Ladezeiten sind und wie sehr sich der RWD-Shop immer noch als Website anfühlt. Sicher ist dieses Video auch als Marketing zu verstehen, schließlich handelt es sich bei CouchCommerce um eine SaaS-Web-App; es stellt sich trotzdem die Frage, ob diese Geschwindigkeitsdefizite bei RWD inhärent sind und nicht durch geschickte Anpassung doch eine Vergleichbarkeit hergestellt werden kann.

Was machen Magento, OXID und Shopware?

Zum Schluss sollten wir uns in diesem Zusammenhang ansehen, mit welchen Standardlösungen die Shopsystem-Hersteller ihre eigenen Produkte ausstatten bzw. welche zusätzlichen Drittanbieter-Lösungen es hier gibt.

Bei Magento ist von Beginn an ein mobiles Theme im Standard-Lieferumfang enthalten. Im Backend lässt sich die Browser-Weiche so konfigurieren, dass beispielsweise Aufrufe von iPhones und Tablets direkt an dieses Theme weitergeleitet werden. Näheres dazu findet sich im Beitrag Mobile Themes in Magento von Rouven Rieker.

Auf der diesjährigen Meet Magento gab es außerdem noch zwei Vorträge, die Web-Apps für Magento zum Thema hatten. Dimitri Gatowski und Vinai Kopp stellen jeweils eigene Lösungen auf Basis von angular.js vor.

http://www.youtube.com/watch?v=zPg0O8XZrbI

https://www.youtube.com/watch?v=Rcq9vOgS-Ao

Auch bei Shopware ist ein kostenloses Mobile Theme verfügbar, dieses ist jedoch nicht bei der Standard-Installation vorhanden. Zusätzlich dazu gibt es kostenpflichtige Responsive Templates wie das, das das Unternehmen explizit als präferierte Lösung bewirbt. Last but not least ist im Standard-Lieferumfang des OXID eShop ebenfalls ein Mobile Theme verfügbar, das auch aus dem eXchanges-Marktplatz nachgeladen werden kann. Zusätzlich dazu gibt es eine Reihe von kostenpflichtigen Responsive Themes wie ROXID oder zoxid flat.

 

Wir sehen, dass alle drei Anbieter standardmäßig sogenannte Mobile Themes anbieten, die explizit für den mobilen Anwendungsfall optimiert und anstelle des normalen Themes an Shopbesucher ausgeliefert werden. Ermöglicht wird das durch die Erkennung des entsprechenden Kontextes mittels einer Browser-Weiche. Auf diese Weise stellen Magento, Shopware und OXID eSales eine Art „mobiler Grundversorgung“ sicher, die jedoch dazu führt, dass beim Einsatz dieser Variante mindestens zwei komplett voneinander getrennte Themes gepflegt werden müssen. Die Folge: der Implementierungs- und Testaufwand wird multipliziert.

Kommerzielle Anbieter konzentrieren sich auf die Bereitstellung von Responsive Themes für diese drei Systeme. HTML-5-Apps werden unseren Recherchen zufolge ausschließlich auf Agentur- bzw. Projektebene erstellt und haben es bislang noch nicht in den Mainstream geschafft.

Festhalten lässt sich, das für E-Commerce-Anwendungen eine RWD-Strategie derzeit das populärste Mittel zu sein scheint, mit allen Vor- und Nachteilen, die damit verbunden sind. Es wird interessant sein zu beobachten, ob auch im mobilen Zeitalter Online-Shops weiterhin hauptsächlich als mehrteilige Websites begriffen werden, oder ob sich der App-Gedanke auch im Bezug auf Browser-basierte Anwendungen durchsetzen wird.

(Bild von opensource.com)

Roman Zenner (ShopTechBlog)

Ich beschäftige mich seit mehr als 20 Jahren mit E-Commerce-Technologie und gehe hier im Blog der Frage nach, mit welchen Systemen Marken und Händler:innen ihr Online-Geschäft abbilden.

Alle Beiträge ansehen von Roman Zenner (ShopTechBlog) →