New URLs for the CouchCommerce single page Web Apps

New CouchCommerce URLsLet’s talk about URLs today and how they affect CouchCommerce shops.

It’s been not too long ago that the URLs in our web app looked like this.

http://m.your-shop.de/#/cat/a-unique-category-identifier (For category listings)
http://m.your-shop.de/#/cat/a-unique-category-identifier/products (For product listings)
http://m.your-shop.de/#/cat/a-unique-category-identifier/product/a-unique-product-identifier (For product pages)

There are a couple of problems related to such URLs and there has been a steady demand from customers to improve on them. Let’s first outline what the problems are.

Search Crawler Visibility

WebApps work differently from Websites. A traditional website fetches HTML, Images[1], CSS[1] and JavaScript[1] every time that you click on a link to navigate through the pages. More precisely, the browser hits the server at the given URL to fetch such assets every time that the URL changes. In a WebApp there are no different server side pages but still we want link-ability. Therefore engineers recycled an old technique that has been around since the early days of web browsers.

Anchors

This is an anchor:

http://example.com/#foo

Notice the hash before foo? This has been used for ages to direct the browser to jump to an element on the current page with the id foo. It is not part of the server side resource and therefore if you go from http://example.com to http://example.com/#foo the browser won’t hit the server because the actual resource did not change. Everything on the right hand side of the # character is only relevant for the local web page and changes do not trigger a HTTP request.

WebApps “abused” (and continue to “abuse”[2]) this fact and used such anchors for client side routing. A WebApp can react to changes to the right hand side of the hash to perform client side actions such as navigating to a different view. This is why a product page in the CouchCommerce WebApp was[2] accessed as http://m.your-shop.de/#/cat/a-unique-category-identifier/product/a-unique-product-identifier until recently. It’s really nothing more than a good old local anchor though.

What’s not to like?

The problem with such URLs is that they lie to you. The content is just not there. The content is entirely constructed on the client side. In the browser. Search engine crawlers, however, don’t see the web as a browser sees it[3]. They only see resources on a server. Unfortunately we don’t have them. Just like a native web written in Java or Objective-C views are entirely created on the client[4].

Pushstate API to the rescue

The outlined problems lead browser vendors to agree on an API to address the issue. A new API called `pushState` lets us change the URL of the browser without causing the browser to hit the server. Remember that any change to the URL previously caused the browser to hit the server to fetch a new HTML document.

We changed our app to make use of the `pushState` if available[2] so that the URLs from above transformed into:

http://m.your-shop.de/cat/a-unique-category-identifier
http://m.your-shop.de/cat/a-unique-category-identifier/products
http://m.your-shop.de/cat/a-unique-category-identifier/product/a-unique-product-identifier

Are we crawlable yet?

Unfortunately, that alone does not address the search crawler concerns. It may assist on the bigger mission depending on which way to address the problem one decides to go. In our case though, we address the problem differently. We give hints to search crawlers where to find snapshots of the html. Each time a search engine wants to crawl a page of a CouchCommerce shop, we point it to another direction where it can request a previously created and cached snapshot. That’s a recommended technique by Google and deserves a blog post on it’s own.

URLs for human beings

Notice the bold parts of the URLs? Computers love such parts. They are great to deconstruct a URL and map it to an actual view. It’s easy for a machine to understand that the first URL is a category view, the second one is a product listing and the last one is a product page. Unfortunately humans unlike machines don’t care about such special identifiers. What people care most about is that URLs don’t change between desktop and mobile view.

A product page in the desktop shop accessed at http://your-shop.de/some-category/some-product should just transform into http://m.your-shop.de/some-category/some-product for the mobile shop. Just an extra `m.`[5] to get from the desktop to the mobile view.

We implemented exactly that so that any[6] valid desktop shop URL is automatically a valid CouchCommerce shop URL just served from a different subdomain.

You can see the URLs in action on our demo shop but we will soon roll that out to all our shops.

http://couchdemoshop.couchcommerce.com/freizeitwelten/vintage

[1] Let’s not nitpick on caching here
[2] For older browser that don’t support the pushState API the URLs continue to use the hash based routing.
[3] That’s actually changing rapidly
[4] Albeit in a completely different fashion. Typically without HTML
[5] Or any other subdomain for mobile use. That’s up to the merchant.
[6] Well, not any. So far, it only works for category/product listings and product pages

CouchCommerce auf der Mobile Business Conference

MBC_300x250_w295_h246Next stop: Hamburg!

Am 23. & 24.06. findet die von der Internet World Business ins Leben gerufene Mobile Business Conference in Hamburg statt. Zwei Tage lang befassen sich Branchen Experten, Händler und Agenturen mit den Themen Mobile Marketing, Mobile Commerce, Apps & Co.

Auch wir werden selbstverständlich vor Ort sein und unseren mobilen Senf dazu geben ;)

Am 23. Juni um 14 Uhr könnt Ihr Alex Vortrag zum Thema: “Optimierung für Smartphones & Tablets am Beispiel von Arktis.de & Samova.net“ lauschen. In dem Vortrag zeigen wir euch welche Herausforderungen Händler (in diesem Fall Arktis und Samova) durch Besucher mit Smartphones & Tablets haben und vergleich die möglichen Lösungsansätze Responsive Web Design, mobile Template, native App und HTML5 Web App miteinander.

Die Präsentation werden wir euch im Nachgang natürlich wieder bei Slideshare bereitstellen. Wenn Ihr nicht direkt vor Ort sein könnt, folgt uns einfach bei Twitter! Wir berichten live und in Farbe!

Bis bald auf einem der nächsten Events!

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:

 

Webinar: Mobile SEO & SEM mit Magento, Shopware und Plentymarkets – Expertengespräch mit Simon Gall

CouchCommerce_UniversityAm 22.05. findet unser nächstes Webinar statt. Diesmal geht es um das Thema Mobile SEO & SEM. In diesem Webinar zeigen wir Ihnen, was bei den Themen Suchmaschinenoptimierung (SEO) und Marketing (AdWords/SEM) im mobile Commerce zu beachten ist und welche Fallstricke Sie umgehen sollten. Unser Team wird Ihnen einleitend einen Überblick zur Problematik von SEO und SEA im mobile Commerce geben. Danach führen wir ein Expertengespräch mit Simon Gall der unter anderem arktis.de und Warsteiner berät.

Jetzt kostenlos für das Mobile SEO & SEM Webinar anmelden!


Thema: Mobile SEO & SEM inkl. Expertengespräch mit Simon Gall

Wann: 22.05.14, 16:00 Uhr
Wo: CouchCommerce GoToWebinar online Hörsaal 12
Dozenten: Kai-Thomas KrauseVanessa Göbel & Simon Gall


Jetzt kostenlos für das Mobile SEO & SEM Webinar anmelden!

Simon Gall beantwortet Ihnen Fragen zur Priorisierung von mobile Seiten bei Google, wie die Vernachlässigung von mobiler SEO/SEM zu schlechteren Desktop-Ergebnissen und höheren Klickpreisen führt und wie es sich um Duplicate Content verhält, wenn man eine mobile Lösung nutzt. Zusätzlich reden wir über die folgenden Fragestellungen:

  • Was muss ich tun, damit mein mobiler Shop in den organischen Suchergebnissen besser gelistet wird?
  • Was muss ich beachten, wenn ich auch mobil AdWords schalten möchte?
  • SEO Quickwins? Was hat einen großen Impact?
  • Was macht man in einem Shop mit ausgelaufenen Artikeln, die noch ranken?

Viele weitere Themen stehen bereits auf dem Zettel und Ihre Fragen während des Webinars werden ebenfalls gerne beantwortet.

Wir freuen uns auf Ihre Teilnahme am Mobile SEO & SEM Webinar!

Einmal im Monat lernen Sie in der CouchCommerce University alles über die mobile Optimierung Ihrer Online Shops. Da die Teilnehmerzahl begrenzt ist würden wir Sie bitten sich rechtzeitig einen Platz zu sichern – nicht dass Sie nur noch einen Stehplatz bekommen oder auf der Treppe sitzen müssen  ;).

Das vorherige Webinar “plentymarkets mit CouchCommerce – In 30 Minuten zum mobil optimierten Plentymarkets Shop” steht für Sie zur Ansicht bereit. Wir werden jedes CouchU Webinar im Nachgang zur Verfügung stellen.

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

maddypopper.de im Interview mit CouchCommerce

maddypopper.de

maddypopper.de

Wir haben Ronald Dierks von madypopper.de ein paar Fragen rund um das Thema mobile Commerce gestellt und möchten euch gerne seine Antworten präsentieren.
Maddypopper ist ein Plentymarkets-Shop und Ronald Dierks hat sich für eine mobile Web App Lösung von CouchCommerce entschieden.


Welche Produkte bietet Ihr in eurem Shop an und seit wann seid Ihr online?
Wir sind seit gut 8 Jahren online und bieten Schmuckperlen und DIY Zubehör zur Schmuckherstellung für Hobbyisten und Kleingewerbliche sowie selbstgefertigten Designschmuck an.

Was war der Auslöser dafür euren Onlineshop für mobile Endgeräte zu optimieren?
Gestiegener mobiler Traffic mit vergleichsweise niedriger Conversion insbesondere bei Handy.

Wie hoch ist der Anteil eures mobilen Traffics (Smartphone/Tablet)?
ca. 25 %.

Wie sind zur Zeit (vor dem Einsatz von CouchCommerce) eure Conversion Rates?
Desktop 2%, Tablet 1,7 %, Handy 0,6%.

Eure Kunden sind auf den ersten Blick ja nicht die digital natives, wie hat sich der Trend entwickelt, dass eure Zielgruppe mehr und mehr in den eCommerce eintritt?
Es ist mittlerweile auch für unsere Zielgruppe selbstverständlich, online einzukaufen – zumal wir eine Nische bedienen und es unsere Produkte eben nicht beim Einzelhändler “um die Ecke” gibt. Viele unserer Kunden haben in unserem Ebay- und/oder Amazonshop gekauft und sind dann direkt zu www.maddypopper.de gewechselt.

Wie lange habt Ihr nach einer passenden mobilen Lösung gesucht?
ca. 3 Monate.

Und warum habt Ihr euch letztlich für CouchCommerce entschieden?
Gute mobile Darstellung, kostengünstiges Modell ohne Provision, alle Daten bei uns, Anbindung an Plentymarkets.

Was würdest du anderen Händlern raten, die ihre mobile Lösung noch nicht gefunden haben oder das Thema „Mobile“ noch nicht ins Auge gefasst haben?
Laufende Analyse und Beobachtung von mobilem Traffic und Conversion und ggfs. schnelles Handeln. 

Hast du ein “mobil optimiertes Vorbild” für deinen Online Shop? / Welcher Shop ist für dich am besten für mobile Endgeräte optimiert?
Vorbilder sind für uns diesbezüglich die Big-Player wie Ebay, Amazon, Tchibo etc.

Wie sieht deine mobile Shopping Affinität aus, kaufst du selber hauptsächlich über Smartphone oder Tablet ein?
Ich surfe schon sehr viel mit Handy oder Tablet in mobilen Shops und gehe immer mehr dazu über, dann auch mobil zu kaufen.

Vielen Dank für das Gespräch!


Vanessa Göbel

Vanessa Göbel

Wer an unseren Händlerinterviews teilnehmen möchte, kann sich gerne direkt bei Vanessa Göbel melden.

Telefon: 0511/165 80 82 68
Mail: vanessa@couchcommerce.com

Webinar Aufzeichnung – Plentymarkets in 30 Minuten mobil optimieren

Heute haben wir im Rahmen der CouchCommerce University unser erstes Webinar veranstaltet.

CouchCommerce_Universityplentymarkets_Logo

 

 

Thema: In 30 Minuten zum mobil optimierten Plentymarkets Shop
Dozenten: Kai-Thomas Krause & Vanessa Göbel

In diesem Webinar haben wir gezeigt, wie einfach und schnell Sie Ihren Plentymarkets Shop mit CouchCommerce verbinden und den bestehenden Online Shop mit ein paar Klicks mobil optimieren können. Unser Team führte Sie live durch einen Installations- und Einrichtungsprozess an dessen Ende eine fertige Web-App steht. Selbstverständlich gab es danach noch Zeit für eine Frage & Antwort Runde.

Die Aufzeichnung des Webinars finden Sie hier:

Bereits im Mai gibt es das nächste Webinar. Sichern Sie sich jetzt schon Ihre kostenlose Teilnahme!

Thema: Mobile SEO & SEM inkl. Expertengespräch mit Simon Gall
Wann: 22.05.14, 16:00 Uhr
Wo: CouchCommerce GoToWebinar online Hörsaal 12
Dozenten: Kai-Thomas KrauseVanessa Göbel & Simon Gall

In diesem Webinar zeigen wir Ihnen, was bei den Themen Suchmaschinenoptimierung (SEO) und Marketing (AdWords/SEM) im mobile Commerce zu beachten ist und welche Fallstricke Sie umgehen sollten. Unser Team wird Ihnen einleitend einen Überblick zur Problematik von SEO und SEA im mobile Commerce geben. Danach führen wir ein Expertengespräch mit Simon Gall der unter anderem arktis.de und Warsteiner berät.

Jetzt kostenlos für das Mobile SEO & SEM Webinar anmelden!

Einmal im Monat lernen Sie ab sofort in der CouchCommerce University alles über die mobile Optimierung Ihrer Online Shops. Die Anmeldung ist ab sofort freigeschaltet und natürlich kostenlos, aber da die Teilnehmerzahl begrenzt ist würden wir Sie bitten sich rechtzeitig einen Platz zu sichern – nicht dass Sie nur noch einen Stehplatz bekommen oder auf der Treppe sitzen müssen  ;).

Die Webinars der CouchCommerce University werden wir mit wechselndem Schwerpunkt veranstalten. Die nächsten Themen werden wir demnächst veröffentlichen und Sie rechtzeitig informieren.

Vanessa Göbel

Vanessa Göbel

Sie haben noch Fragen?
Dann nehmen Sie gerne direkt Kontakt zu Vanessa Göbel auf.
Telefon: 0511/165 80 82 68 oder per Mail an vanessa@couchcommerce.com

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.