Schlagwort-Archive: online shop

The video comparison: responsive shop template vs. single page e-commerce web app

As I recently mentioned in a post shop merchants often approach me and ask about the difference between a shop with responsive templates and single page web apps like the ones we offer at CouchCommerce. Because written explanations are not exciting and cannot show all the differences in usability and app feeling we recorded a short video that I like to share with you.

The setup was an iPhone 5c connected to the 3G network. Using this smartphone we are opening the best RWD template available for Shopware and the latest demo web app from CouchCommerce. Both share the same inventory and products.

This was the exercise: open the shop via bookmark, navigate into the categories “Genusswelt” -> “Edelbrände” and select the product “Cigar Special 40%” to add it to the cart. Then go to the checkout and stop at the point where you start to enter personal information as a new customer.

Here is the result:

You can see how responsive shop templates behave compared to a single page web app. The gesture support and speed of single page web apps is, even though they run in the browser, as good as you know it from native apps that need to be installed from app stores. To the contrary responsive templates work like every other website and need to request next pages from the servers on every click. This fundamental difference causes the huge timing difference in our video.

During this test we had good 3G reception. But as soon as you are on the go and have interruptions and slow downs of the connection the difference will be even more significant. Single page web apps even keep working in case you lose the entire connection. You will never see a “404 page not found” error.

A list of all the advantages single page web apps provide can be found here in this German post.

And here are the links to the test shops: RWD Template / Single Page Web App

Benchmarking our new Mobile Commerce Web App

Ursprünglich veröffentlicht auf CouchCommerce Blog:

While we are really busy at CouchCommerce on-boarding all the merchants in time for the Christmas shopping season I just quickly wanted to share some excitement about our new AngularJS Web App.

This is the current result of our new Smartphone optimized Web App:

CouchCommerce Web App loading time

If you want to compare your current mobile or desktop site just give it a try here at Pingdoms free website speed test.

As you know loading time is extremely important in e-commerce. Here are some facts that should make you think from our friends at KISSmetrics:

  • A 1 second delay in page response can result in a 7% reduction in conversions.
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

Please visit their blog to find more interesting facts and a great infographic about the importance of loading…

Original ansehen noch 19 Wörter

Online-Shop Wissen: Mobile Template, Responsive Design vs. Native App vs. Web App

Die Themen Mobile Commerce und Couch Commerce stellen Online-Shops vor neue Herausforderungen. Wie begegne ich dem Anstieg der Besucher mit Tablet und Smartphone in meinem Online-Shop? Bietet mein Shopsystem Mobile Templates? Lasse ich mir Native Apps für iOS, Android und Windows programmieren oder fokussiere ich mich auf eine Web-App, die im Browser aller mobilen Geräte läuft?

Zur Orientierung erkläre ich kurz was man unter Nativen Apps, Web Apps und Mobile Templates bzw. Responsive Design versteht:

Mobile Templates & Responsive Design

Mobile Templates werden meist von Shopsystemen oder Template Entwicklern bereitgestellt. Wie bei einem “normalen” Shoptemplate für Desktop Computer mit Maus und Tastatur werden diese im Shopsystem installiert und müssen dann im Quellcode angepasst werden. Technisch funktionieren sie wie ein normaler Online-Shop. Bei jedem Touch wird aus dem Browser eine Anfrage an den Server gestellt und der gewünschte Inhalt zurück zum Gerät gesendet. Mobile Templates werden in der Regel für Smartphones angeboten, jedoch nicht für Tablets.

Responsive Designs werden mit Vorliebe von Agenturen angeboten. Ähnlich wie bei Mobile Templates wird die angezeigte Seite so konzipiert, dass ein Template für alle Geräte und Auflösungen erstellt wird, so dass sich die Größe automatisch anpasst.
Technisch funktionieren aber auch Responsive Designs wie Mobile Templates, also normale Websiten. Bei jedem Touch gibt es aus dem Browser heraus einen Server Request, so dass alle gewünschten Inhalte immer erst neu geladen und an das Gerät gesendet werden müssen.
Im Gegenteil zu einem Mobile Template passt sich das Responsive Design flexibel an das jeweilige Gerät und jede Auflösung an. Die Inhalte werden immer neu angeordnet. Der Vorteil gegenüber dem Mobile Template: Der Inhalt ist immer der selbe wie auf dem PC, er wird nur einmalig festgelegt.
Für Webseiten macht Responsive Design durchaus Sinn, jedoch weniger für die Verwendung im eCommerce, da hier sehr hohe Kosten in der Umsetzung und enormer Wartungsaufwand entstehen.

Vorteile:

  • Mobile Templates werden sofort im Browser angezeigt
  • Es ist keine Installation auf dem Gerät nötig
  • Es werden viele Betriebssysteme und Hersteller unterstützt
  • Gleicher Inhalt auf allen Geräten (nur responsive Design)

Nachteile:

  • Verlust des Warenkorbes bei schlechter Internetverbindung bzw. angewiesen auf gute und dauerhafte Internetverbindung
  • Nur optimiert für Smartphones und nicht für Tablets (mobile Template)
  • Eingeschränkte Usability aufgrund der Unterstützung von wenigen nativen Gesten
  • Hoher Installationsaufwand im Shopsystem
  • Hohe Kosten (responsive Design)

Beispiel:

Shopware Mobile Template für Smartphones

Native Apps

Native Apps werden bisher auch gerne einfach als Apps bezeichnet, da Apple diese durch die iOS Geräte geprägt hat. Darunter versteht man eine Anwendung die auf dem Gerät installiert wird. Zu finden sind Native Apps in App Stores, die auch die Regeln vorgeben nach denen entwickelt werden muss. Die Entwicklung von Nativen Apps ist mit viel Aufwand verbunden, da man sie für jedes Eco-System einzeln entwickeln muss (z.B. Apple, Android, Blackberry und Windows) und Tablets sowie Smartphones jeweils eine eigene Apps benötigen.

Vorteile:

  • Auffindbarkeit in App Stores
  • Viele Hardwarekomponenten können genutzt werden (z.B. GPS)
  • Unterstützung aller nativer Gesten für gute Usability

Nachteile:

  • App Stores geben Regeln & Geschäftsmodell vor
  • Hoher Entwicklungs- und Updateaufwand
  • Nutzung für Kunden nicht sofort sondern erst nach Installation möglich

Beispiel:

Oxid e-shop mobile

Web Apps

Web Apps sind die neuste Kategorie unter den drei Lösungen und erst dank der Entwicklung von Mobile Frameworks wie Sencha Touch und jQuery Mobile möglich. Diese Frameworks erlauben es Web Apps zu erstellen die aussehen wie Native Apps, alle bekannten Gesten unterstützen und sogar auf Hardwarekomponenten zuzugreifen. Trotzdem laufen sie im Browser der Geräte und können ohne Installation sofort genutzt werden.

Vorteile:

  • Web-Apps werden sofort im Browser angezeigt
  • Auch wenn die Internetverbindung kurz nicht verfügbar ist kann weiter gesurft werden und der Warenkorb bleibt erhalten
  • Alle für Online-Shops relevanten Hardwarekomponenten können genutzt werden

Nachteile:

  • Individuelle Entwicklung erfordert eine Agentur
  • Neue Technologie unterscheidet sich stark von der bisheriger Online-Shops
  • Nicht auffindbar in App Stores

Beispiel:

CouchCommerce Web-Apps für Online-Shops

Fazit

Das Thema Mobile Commerce nimmt jetzt erst richtig Fahrt auf, obwohl der Boom schon seit einigen Jahren immer wieder aufs neue vorhergesagt wurde. Ein Großteil des “mobilen” Umsatzes wird jedoch von zu Hause aus über Tablets gemacht, die langsam die Laptops & PCs ablösen, sowie den Katalog auf der Couch ersetzen. Bei der Erstellung der Mobile-Strategie sollte jeder Shopbetreiber daher neben Smartphones immer auch Tablets berücksichtigen. Noch dieses Jahr werden Android (Nexus 7) und Windows (Surface) den Tablet Markt in Deutschland betreten und Apples iPad Marktanteile verlieren. Ähnlich wie bei den Smartphones schon heute sollte daher berücksichtigt werden, dass auch auf dem Tablet Markt eine Diversifikation einsetzen wird und man mit dem Online-Shop auf möglichst vielen Betriebssystemen und Bildschirmgrößen optimiert verfügbar sein muss.

Eine Web-App stellt die Lösung mit der größten Abdeckung an Geräten dar und ist daher meine strategische Empfehlung für große und kleine Online-Shops. Die folgende Tabelle verdeutlicht diese Empfehlung.

Review: Bonprix startet in den Couch Commerce mit einem Tablet-Shop

Heute ist Bonprix mit einem für Tablets optimierten Online-Shop unter t.bonprix.de gestartet. Besucher mit Tablets (und auch Android Smartphones, das jedoch vermutlich versehentlich) werden automatisch von bonprix.de auf die neue Seite umgeleitet.

Mit dem Launch dieser für den Couch Commerce optimierten Seite springt Bonprix aus meiner Sicht direkt an die Spitze der Tablet-Shops in Deutschland. Umgesetzt wurde der Online-Shop scheinbar von der Agentur SapientNitro unter dem Einsatz von jQuery mobile. Es handelt sich um eine mobile Website mit Optimierung für Tablets. Als Web-App würde ich es jedoch nicht bezeichnen, da so gut wie alle Aktionen über Server Requests laufen und nicht direkt auf dem Tablet “client-seitig” wie bei Apps (egal ob nativ oder Web-App). Eine gute Internetverbindung ist daher zwangsweise erforderlich während der Nutzung und bei so gut wie jedem “Touch”, um einen Verlust des Warenkorbes auszuschließen.

Im Bloombargo Blog wird schön beschrieben welche Ideen in die Umsetzung eingeflossen sind und wie der Shop zu nutzen ist. Ich habe unten in einer Gallerie jeweils Screenshots von dem Desktop-Shop und dem neuen Tablet-Shop mit dem iPad gemacht, damit man die Optimierungen vergleichen kann.

Mir ist aufgefallen, dass Bonprix offensichtlich den bisherigen Online-Shop schon für Tablets optimiert hatte, da sich der neue Tablet-Shop an vielen Stellen gleicht. So funktioniert der Zoom bei Bildern in dem Desktop Online-Shop auch gut mit dem iPad, fehlt jedoch komplett in dem Tablet-Shop. Neu sind aber Slider-Optionen und die Anpassung an den Portrait- und Landscape-Mode. Auch bei der Navigation, die sehr umfangreich ist, kann man per Slide wählen. Textlinks wurden fast komplett entfernt und durch größere Touchflächen ersetzt. Besonders positiv hervorzuheben ist das alle Grafiken und Bilder direkt für das Retinadisplay des aktuellen iPads optimiert wurden.

Der Checkout wurde optisch für das Tablet optimiert, jedoch funktionell oder inhaltlich leider nicht angepasst. Durch das Herausstellen von Checkout Systemen wie z.B. PayPal oder die Reduzierung der abgefragten Inhalte könnte hier noch optimiert und besonders Neukunden besser zum Kauf bewegt werden.

Unten in der Gallerie habe ich jeweils im linken Tab den Tablet-Shop und im rechten Tab den Desktop-Shop geöffnet. So lassen sich die Seiten gut vergleichen.

Mit CouchCommerce werden wir diesen Sommer noch eine Plattform launchen, die Online-Shops automatisch in echte Web-Apps für Smartphones, Tablets und Smart TVs umwandelt. Damit ist es dann jedem Online-Shop möglich ohne das Beauftragen von Agenturen und sogar mit einem kleinem Budget direkt in die Post PC Ära einzusteigen.

Staples launcht Couch Commerce Online-Shop für Tablets

Der zweitgrößte Online-Shop Amerikas launcht nächste Woche unter http://t.staples.com eine Website nur für Tablet Besucher. Kunden die Staples.com besuchen und per Tablet auf die Seite zugreifen werden automatisch auf die für Couch Commerce optimierte Seite weitergeleitet.

Staples ist damit der erste große Online-Shop den ich kenne, der durch eine individuelle Lösung auf den Trend in Richtung Tablet Commerce reagiert. Erst kürzlich hatte Adobe eine kostenlose Studie veröffentlicht die aufzeigt wie groß das Umsatzpotential mit Tablet Besuchern ist und welche Wichtigkeit diese Käufergruppe aufgrund der explosionsartigen Verbreitung in diesem Jahr annehmen wird.

Adobe’s analysis of 16.2 billion visits to retail websites shows that consumers using tablets are a distinct and lucrative customer segment, spending more per purchase than other visitors. With the rapid growth of this powerful segment, retailers can no longer afford a “one-size-fits-all” approach to mobile optimization.

Da die Erstellung eines für Tablets optimierten Shops von Seiten des Aufwands und der Kosten durchaus mit einer Neuentwicklung eines Online-Shops vergleichbar ist, werden sich Shopbetreiber gut überlegen müssen ob der persönliche Anteil der Besucher mit Tablets das Investment bereits rechtfertigt. Darüber hinaus ist es nicht lange her, dass Smartphones als der große Mobile-Commerce-Trend angepriesen wurden und speziell hierfür Apps und Web-Apps entwickelt wurden die sich erst beweisen müssen.

Im CouchCommerce Blog habe ich eine Liste von Artikeln und Studien zusammengestellt die sich mit dem Thema Tablet Commerce / Couch Commerce befassen. Mehr Informationen zu Staples Tablet Shop gibt es bei Internet Retailer.

Calipso – das erste Open Source CMS auf Basis von Node.js und MongoDB

Bei meiner Suche nach Shopsystemen oder Frameworks im e-Commerce auf Basis von JavaScript und NoSQL anstelle von PHP und MySQL habe ich ein erstes CMS gefunden. Calipso heißt das noch junge Projekt, dass als Open Source veröffentlicht wurde und auf Node.js, sowie MongoDB basiert.

Soweit ich es sehen kann arbeitet momentan nur der Gründer Clifton an dem Projekt und ist natürlich auf der Suche nach weiteren Entwicklern, die Interesse haben sich zu beteiligen. Als Node.js Framework wird Express und für MongoDB das object modeling Tool Mongoose eingesetzt.

Auch wenn wir uns sicher noch ganz am Anfang der Entwicklung von Webanwendungen auf Basis neuer Technologien befinden, bekomme ich das Gefühl, dass Node.js und MongoDB das Rennen machen werden.

Laut RedWriteWeb ist Calipso neben Wheat, einem Blog System, das erste CMS, welches vollkommen auf Node.js und eine NoSQL Datenbank im Hintergrund setzt. Da die Skalierbarkeit und Performance bei dieser Architektur besonders gut ist, sollten besonders stark besuchte Seiten die Entwicklung von Calipso verfolgen. Hoffentlich wächst hier eines der ersten CMS einer neuen Web-Generation heran!

Visions Labs fördert großartige Ideen im e-Commerce

Das Schöne beim Arbeiten mit Open Source Systemen ist, dass sie leicht für Interessenten zugänglich sind und dazu auffordern eigene Ideen einfach mal selber umzusetzen. Im e-Commerce Bereich und besonders mit Magento habe ich dieses seit Sommer 2008 beobachtet, als noch nicht klar war wie aufwändig die Umsetzung eines Online-Shops mit Magento ist und scheinbar jeder sich selber versuchte, dann aber oft auf die Hilfe von Agenturen zurückgreifen musste.

Unter den vielen Umsteigern von anderen Systemen waren jedoch auch einige großartige neue Ideen von taten-hungrigen Gründern, die durch die scheinbar unbegrenzten Möglichkeiten eines Open Source Systems beflügelt waren. Leider konnten wir aus Budgetgründen so gut wie keine dieser Ideen betreuen, bis auf einige wenige Ausnahmen wie z.B. mydeco.com.

Um diesen Zustand zu ändern haben wir beschlossen Visions Labs ins Leben zu rufen. Mit Visions Labs wollen wir uns an großartigen und innovativen Startups im e-Commerce Bereich beteiligen und diese durch unsere erfahrenen Projektteams unterstützen. Neben der Entwicklungsleistung und dem Austausch vor Ort gibt es auch die Möglichkeit für einen begrenzten Zeitraum Büroplätze bei Visions zu beziehen und in Intensivphasen auch mal die Schlafboxen zu nutzen.

Die Unterstützung wird dadurch ermöglicht, dass wir unsere Projektteams in Zukunft so planen, dass ein Teil ihrer Arbeitszeit in Labs Projekten untergebracht werden kann.

Aktuell sehen wir uns bereits Vorschläge an, es ist jedoch noch keine Entscheidung für das erste Visions Labs Projekt gefallen. Bei Interesse daher bitte einfach per e-Mail an labs@visions.ag schreiben oder mich direkt kontaktierten.

Sobald das erste Projekt angelaufen ist, werde ich natürlich fortlaufend über den Fortschritt berichten. Ich bin sehr gespannt!