Der Videovergleich: Responsive Shop Template vs. Single Page Web App

Wie vor kurzem bereits in einem Beitrag angesprochen, werden wir regelmäßig nach den Unterschieden zwischen einem Shop Template mit Responsive Web Design und CouchCommerce Single Page Web Apps gefragt. Da die reine Erklärung etwas langweilig ist und besonders jetzt zu Zeiten der WM der Videobeweis sowieso hoch im Kurs steht, haben wir ein kleines Video aufgenommen:

Ausgangssituation ist ist ein iPhone 5c im 3G Netz. Mit diesem Smartphone rufen wir das empfohlene RWD Template für Shopware und eine aktuelle Single Page Web App von CouchCommerce auf. Beide Shops haben das Shopware Demo Sortiment und somit vergleichbare Inhalte.

Die Aufgabe in diesem Video: Den Shop über ein Lesezeichen aufrufen. Dann über die Navigation des Shops über zwei Ebenen “Genusswelten” und “Edelbrände” das Produkt “Cigar Special 40%” aufrufen, in den Warenkorb legen und bis zur Eingabe der Persönlichen Daten in den Checkout gehen.

Hier ist das Ergebnis:

Man sieht sehr gut, wie sich ein Template mit Responsive Web Design im Vergleich zu einer Single Page Web App verhält. Die Gestensteuerung gleicht bei Web Apps der Gestensteuerung von nativen Apps aus dem App Store, bei dem Template mit Responsive Web Design werden die Seiten allerdings wie bei einer normalen Website bei jedem Klick neu geladen. Selbst bei diesem kurzen Klickweg ist der Zeitunterschied enorm.

Bei den Test hatten wir guten 3G Empfang. Sobald hier jedoch eine schlechtere Verbindung vorliegt oder sie kurz unterbrochen ist, wird der Unterschied noch deutlicher.

Eine Auflistung der Vorteile einer Single Page Web App und Erklärung zur Funktionsweise finden Sie in diesem Beitrag.

Hier die Links zu den beiden getesteten Shops: Template RWD / Single Page Web App

CouchCommerce Whitepaper: Mobiles Suchmaschinenmarketing

Kostenloser Download: CouchCommerce Whitepaper Mobiles Suchmaschinenmarketing

Kostenloser Download: CouchCommerce Whitepaper Mobiles Suchmaschinenmarketing

Durch die steigende Nutzung von Smartphones und Tablets gewinnt auch das mobile Suchmaschinenmarketing immer mehr an Bedeutung. Unglaubliche 98% der mobilen Suchanfragen in Deutschland werden über Google durchgeführt. Die Auffindbarkeit in den organischen Ergebnissen aber auch die richtige Erstellung der AdWords Kampagnen ist daher kritisch für den Erfolg von Onlineshops.

In unserem kostenlosen Whitepaper zum Thema mobiles Suchmaschinenmarketing haben wir kurz und kompakt die wichtigsten Tipps und Informationen für Shopbetreiber zusammengefasst:

  • Die mobile Suche
  • Welche Kriterien zu beachten sind
  • Wie Sie Probleme vermeiden
  • Duplicate Content verhindern
  • Praxis Tipps mobile SEO
  • Google AdWords mobil richtig nutzen
  • Zielseitenqualität und Qualitätsfaktor optimieren

Jetzt kostenlos unser Whitepaper Mobiles Suchmaschinenmarketing herunterladen

Ergänzend zu dem Whitepaper empfehlen wir die Aufzeichnung unseres Webinars “Mobile SEO/SEA mit SEO Experte Simon Gall” bei dem Herr Gall direkt auf Fragen unserer Händler antwortet und Einblick in seinem umfassenden Erfahrungsschatz gibt.

Warum CouchCommerce single page Web Apps gegenüber Responsive Web Design in Shop Templates überlegen sind

Oft werden wir gefragt wofür man CouchCommerce braucht, wenn man schon ein Responsive Web Design (umgesetzt als Shop Template) hat oder dieses plant. Die einfachste Antwort ist: Um mehr zu verkaufen, denn die Conversion Rate von single page Web Apps ist der von Responsive Web Design überlegen.

Was sind eigentlich single page Web Applications?
Single page Web Apps sind Anwendungen die im Browser laufen, nur aus einer einzigen Seite bestehen und deren Inhalte dynamisch und intelligent nachgeladen werden. Im Vergleich zu einer “gewöhnlichen” Seite wie z.B. einem mobile Template oder Responsive Design welche aus vielen einzelnen HTML Seiten bestehen die untereinander verbunden sind und bei jedem Klick oder Touch einen Server Request auslösen, werden single page applications nur ein einziges mal geladen (außer man drückt den reload button ;) ) und läd unter Einbezug des geräteeigenen Speichers auf dem die Seite im Browser aufgerufen wird die Produkte/Inhalte im Hintergrund nach, so dass der Nutzer eine experience einer nativen App hat.
Vinai Kopp hat auf der Meet Magento 2014 einen Vortrag zu Single Page Applications mit AngularJS gehalten, die Präsentation kann man sich hier ansehen.

Was nun die höhere Conversion Rate ausmacht sind im Wesentlichen die folgenden drei Punkte:

1) Ladezeiten
40% der Besucher verlassen den Shop, wenn die Ladezeit über 3 Sekunden liegt. 100 Millisekunden kosten bis zu 1% Conversion Rate. Hier ist nicht nur der erste Aufruf, sondern auch das Laden weiterer Seiten zu beachten. CouchCommerce Web Apps laden immer nur Teile der Seite nach und müssen nie komplett neu geladen werden, wie es bei herkömmlichen Websites und Responsive Templates der Fall ist. Dadurch werden Seitenwechsel und das Hinzufügen von Produkten in den Warenkorb ohne Wartezeit möglich.

2) App Feeling
CouchCommerce Web Apps unterstützen Gesten die Smartphone und Tablet Nutzer von Apps kennen. So erreichen Nutzer beispielsweise Kategorieübersicht, Merkliste und Warenkorb direkt über horizontale Gesten (Swipe). Produktbilder können direkt via Pinch (zwei Finger) vergrößert und herangezoomt werden. Insgesamt sind weniger Seitenwechsel und Sprünge nötig, um den Kauf abzuschließen.

3) Offline-Fähigkeit
Als single page applications laufen CouchCommerce Web Apps lokal auf dem Gerät im Browser. Man kann sich diese Web Apps wie lokale Software auf dem Gerät vorstellen, die auch bei Unterbrechung der Internetverbindung funktionsfähig bleibt. Ähnlich wie bei installierten Apps aus dem App Store. So bleibt der Warenkorb erhalten und der Shop weiterhin nutzbar auch wenn man z.B. unterwegs kurz keinen Empfang hat. 404 Fehler (Seite nicht gefunden), wie man sie von normalen Shops oder auch Responsive Templates kennt, treten nicht mehr auf.

Fazit

Zusammenfassend kann man sagen, dass Responsive Web Design sehr gut dazu dient die Darstellung einer Website an die Auflösung des Gerätes anzupassen. Das ist insbesondere bei Seiten mit redaktionellen Inhalten wie Blogs und Nachrichten sinnvoll. Wenn es jedoch um eCommerce und die Conversion Optimierung durch schnelle Ladezeiten und beste Benutzerführung geht, sind die Web Apps von CouchCommerce durch die Optimierung für Geräte mit Touchdisplay überlegen. Auch Web Apps sind responsive, passen sich also den Auflösungen der Geräte an. Jedoch basieren sie im Gegensatz zu Responsive Web Design in Shop Templates auf neuerer Technologie, die explizit für die Bedienung mit den Fingern entwickelt wurde.

Testen Sie selbst!

Am besten vergleichen Sie es selber, indem Sie einen Shop mit Responsive Web Design und zum Vergleich unsere CouchCommerce Demo Web App (couchdemoshop.couchcommerce.com) mit Ihrem Smartphone aufrufen. Dann navigieren Sie über eine Kategorieseite zu einem Produkt und legen dieses in den Warenkorb. Sie werden selber merken wie groß der Unterschied ist und wie viel schneller CouchCommerce Web Apps sind!

Zum Abschluss aktivieren Sie den Flugmodus, um das Unterbrechen der Internetverbindung zu simulieren und wechseln zurück in den Browser zu der geöffneten Web App. Sie bleibt funktionsfähig und Sie können auf alle vorher geladenen Inhalte zugreifen. Jetzt versuchen Sie das Selbe mit einem beliebigen anderen mobil optimierten Shop.

Haben Sie noch Fragen zu unserer Web App, der Technologie oder unseren Tarifen? Nehmen Sie einfach Kontakt mit uns auf.

Durch das Video erhalten Sie einen Eindruck von der Geschwindigkeit und Benutzerführung innerhalb der CouchCommerce Web App:

 

Tobit präsentiert mit CouchCommerce mobil optimierte Shopware Shops auf den Community Days

arktis-chayns-couchcommerce1In den kommenden zwei Tagen findet der Shopware Community Day 2014 in Ahaus bei Tobit Software statt. Wie man Shopware am besten für Smartphones optimiert wird Tobit mit Hilfe von CouchCommerce Web Apps live am Messestand zeigen:

Dank einer Kooperation zwischen Tobit, Shopware und CouchCommerce erhalten alle CouchCommerce Händler die Tobit Chayns App für iOS, Android und Windows Smartphones für die App Stores kostenlos. In diesen Apps ist automatisch die CouchCommerce Web App integriert, so dass dem Shoppingvergnügen mit App Feeling nichts im Wege steht. Alle neuen Funktionen und Updates von CouchCommerce sind immer sofort über alle App Store Apps und natürlich direkt im Web verfügbar.

Ein schönes Beispiel ist der Shopware Shop Arktis.de. Neben der Smartphone Web App die direkt beim Aufruf von arktis.de genutzt werden kann, verkauft Arktis auch sehr erfolgreich via Chayns App Store App für iOS und Android mit CouchCommerce. In einem Blog Beitrag stellt Arktis die Apps vor.

Alle Händler und Kunden die sich für einen mobil optimierten Shopware Shop interessieren können die Arktis App hier testen:

Arktis-chayns-CouchCommerce2

Der neue CouchCommerce Merkzettel

Ab dieser Woche ist die neue Merkzettelfunktion für alle CouchCommerce Web Apps verfügbar. Man sollte denken, dass Merkzettel 2014 in der Entwicklung ausgreift sind, aber wir haben doch noch zwei Highlights für euch:

  • Merkzettel funktioniert ohne Kundenkonto und ohne Login für alle Web App Nutzer
  • Der Merkzettel wird auf dem Gerät gespeichert und ist beim nächsten Besuch wieder verfügbar

Wo ihr den Merkzettel findet und wie er funktioniert könnt ihr in dem kurzen Screencast sehen und selber in unserem Demoshop über euer Smartphone oder Tablet ausprobieren.

Meet us at the JS Unconf this weekend

logoThis weekend Christoph (@cburgdorf) and Pascal (@PascalPrecht) from our team at CouchCommerce will attend and most likely also speak at the JS Unconf in Hamburg. Both have prepared interesting talks for you so make sure you don’t miss them:

The secrets of the git ninjas by Christoph

You are using git for quite some time now and you think you rock it? Turns out you knew nothing! Git is such a powerful tool that it supports lots of different workflows you may not know about yet. Learn how to never lose work. Learn how to maintain a history with semantic commits and learn about Christoph’s secret “I’ll fix that later”-workflow. Vote for this session if you want to become a more productive git ninya.

i18n with angular-translate by Pascal

This talk is about the angular-translate project (http://pascalprecht.github.io/angular-translate). You’ll get a brief introduction about what this module is actually about, which features it provides and how you can use it to bring internationalization to your Angular apps. Expect epic animated gifs! Cheers.

And if you ask kindly they will for sure share the latest news about sofa with you ;)

Increase your mobile conversion rate with our device detection plugins

For our customer Arktis.de we built a plugin that detects the device type and refers direct incoming traffic to the category with matching smartphone or tablet accessory. You can try this yourself by accessing m.artkis.de with an iPhone 4, iPhone 5, iPad or iPod touch. In each case you will be redirected to the right category.

iPhone Device DetectionTests at CouchCommerce have shown that by creating a customized and dynamic shopping context within web apps it is possible to increase sales significantly. These dynamic plugins can also help in other contexts like locating the nearest store or even providing information about stock levels of a desired product within stores nearby.

Let us know if you want to try it with your own web app!

The new one step snap checkout

screen_cc_demo_cartOur new web apps include the fastest checkout you will find in any mobile experience on the web. Thanks to the basket sliding in from the right you can stay on the product page while having all the information available usually only viewable on the basket page.

Just go to any product page with your smartphone or tablet (like this one) in our demo web app to give it a try.

Our all new Web Apps

screen_cc_demo_homeQuite secretly we have been deploying countless improvements to our web apps over the last months. To make them bullet proof we tested them internally and then with our flagship merchants that recognized significant conversion rate improvements!

This week we made the all new web apps available to all of our shops and we could not be more excited to share all the improvements with the public. For this reason we are now starting a weekly blog post to introduce new features and improvements.

If you cannot wait any longer to get your hands on the new web apps then we strongly recommend to checkout our demo shop with your smartphone and tablet running on the latest version: http://demo.couchcommerce.com

screen_cc_demo_cart

CouchCommerce ab sofort für plentymarkets verfügbar

plentymarkets_Logo

Ab heute ist CouchCommerce für alle plentymarkets Händler verfügbar! Dank einer direkten Integration beider Systeme ist die Einrichtung besonders einfach und bedarf nur der Angabe von wenigen Informationen in der CouchCommerce Console. plentymarkets Kunden können mit Hilfe von CouchCommerce ihre Onlineshops innerhalb von nur einem Tag in moderne mobile commerce Web Apps für alle relevanten Smartphones und Tablets wandeln.

Mit der Anbindung der somit ersten SaaS Lösung an CouchCommerce beschreiten wir neue Wege. plentymarkets Händler profitieren damit ab sofort nicht nur von einer Warenwirtschaft inkl. Shopsystem, welches kontinuierlich aktualisiert wird, sondern verlängern über CouchCommerce diesen Software as a Service Vorteil bis an den mobilen Kunden. Denn besonders im Bereich der neuen Touch-Geräte ist der e-Commerce Markt sehr dynamisch und die Anpassungen für neue Geräte und Betriebssysteme aufwändig und teuer.

Wir freuen uns CouchCommerce heute auf dem plentymarkets Händler-Kongress in Kassel an unserem Stand vorstellen zu können. Alexander Ringsdorff spricht dort außerdem um 15:10 Uhr darüber wie mobile den e-Commerce verändert.

plentymarkets Händler können sich ab sofort bei CouchCommerce anmelden.