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

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

Bildschirmfoto 2014-06-18 um 11.44.00

Originally posted on Alexander Ringsdorff:
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…

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

Mobile Commerce Aufzeichnungen der Meet Magento 2014

Auf der vergangenen Meet Magento, die Mitte Mai in Leipzig stattfand waren auch wir vertreten und wurden gebeten einen Vortrag über mobile Commerce zu halten. Dies hat mein werter Kollege Kai übernommen und mit dem Vortrag “Practical Knowledge Mobile Commerce” den kompletten Raum gefüllt.

Vortrag Practical Knowledge Mobile Commerce

Der Vortrag befasst sich vor allem mit den Vor- und Nachteile der Technologien zur mobilen Optimierung und den Problemen sowie Lösungsansätzen für Händler und Agenturen.

Die Präsentation zu unserem Vortrag haben wir euch bei Slideshare zur Verfügung gestellt.

Da wir nicht die einzigen waren die einen Vortrag zum Thema mobile gehalten haben, findet Ihr im Folgenden noch zwei weitere sehr sehenswerte Vorträge.

Vortrag Magento powered Mobile Shop WebApp auf AngularJS

Dimitri Gatowski von Commerce Plus hat einen anschaulichen Praxisvortrag zur in Eigenentwicklung erstellten mobilen Web App Lösung für Smartphones gehalten, die mit AngularJS umgesetzt wurde. Er berichtet in seinem Vortrag “Magento powered Mobile Shop Web App auf AngularJS“, weshalb sich für die Web App Technologie mit AngularJS entschieden wurde und wie die Integration mit Magento funktioniert.

Die Slides zum Vortrag sind hier zu finden.

Vortrag One Page Shops mit Magento & AngularJS

Ein weiterer sehr interessanter und sehenswerter  Vortrag wurde von Vinai Kopp über Single Page Shops gehalten. In seiner Präsentation zu “One Page Shops mit Magento & AngularJS” zeigt er die einfache Umsetzung von Single Page Shops mit AngularJS und Magento auf.

Die Slides zum Vortrag von Vinai Kopp sind selbstverständlich auch verfügbar.

Ein paar lesenswerte Zusammenfassungen der Meet Magento gibt es hier:

Resumée zur Meet Magento 2014 in Leipzig #mm14de, neoshops.de
Meet Magento: Die spannendsten Eindrücke aus Leipzig
, excitingcommerce.de
Das Magento-Klassentreffen 2014, shoptechblog.de
The Harsh Truth of Magento Enterprise (#mm14de), geistreich78.info

CouchCommerce auf Twitter und Co. – Wo sind wir zu finden?

logos

In einem Firmenleben sammeln sich im Laufe der Zeit einige Accounts und Social Media Profile an. Neben den “Standards” wie Facebook und Twitter gibt es noch eine Reihe weiterer Orte mit Inhalten und Informationen von uns im Netz. Um euch einen Überblick … Continue reading

Webinar: Mobile Zertifizierung mit Trusted Shops inkl. Expertengespräch mit Christian Berg

CouchCommerce_UniversityAm 25.06. findet unser nächstes Webinar statt. Diesmal geht es um das Thema Mobile Zertifizierung mit Trusted Shops. In diesem Webinar zeigen wir zusammen mit Christian Berg von Trusted Shops, wie die mobile Zertifizierung von Trusted Shops bei CouchCommerce aussieht und weshalb sie wichtiger denn je ist.
Sie wollten schon immer wissen weshalb es neben dem Zertifikat für Ihren Desktop Shop ein mobiles Zusatzzertifikat gibt und wie Ihnen das Gütesiegel in Ihrem mobil optimierten Shop eine noch höhere Conversion bieten kann? Dann melden Sie sich für das anstehende Webinar an!


logo_eu_b2b Thema: Mobile Zertifizierung mit Trusted Shops inkl. Expertengespräch mit Christian Berg
Wann: 25.06.14, 16:00 Uhr
Wo: CouchCommerce GoToWebinar online Hörsaal 12
Dozent: Kai-Thomas Krause

Eine Zertifizierung für den eigenen Shop ist heute wichtiger denn je. Sie signalisiert dem Kunden, dass Sie ein vertrauenswürdiger Partner sind und schützt Sie als Händler vor Abmahnungen. Sie haben Fragen zum mobilen Zertifikat von Trusted Shops? Sie können bereits vorab Ihre Fragen einreichen.

Jetzt kostenlos für das Mobile Zertifizierung mit Trusted Shops Webinar anmelden!


Einmal im Monat lernen Sie in der CouchCommerce University alles über die mobile Optimierung Ihrer Online Shops. Die Anmeldung ist jeder Zeit 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 Webinare der CouchCommerce University werden mit wechselndem Schwerpunkt veranstalten. Die nächsten Themen werden wir demnächst veröffentlichen und Sie rechtzeitig informieren.
Die Webinare “plentymarkets mit CouchCommerce – In 30 Minuten zum mobil optimierten Plentymarkets Shop” und “Mobile SEO & SEM inkl. Expertengespräch mit Simon Gall“ sind als Video verfügbar!


Unser nächstes Webinar findet im Juli statt:

Thema: Mit PAYONE und CouchCommerce zur einfachen Zahlungsabwicklung
Wann: 30.07.14, 16:00 Uhr
Wo: CouchCommerce GoToWebinar online Hörsaal 12
Dozent: Kai-Thomas Krause

Eine einfache und schnelle Zahlungsabwicklung ist einer der wichtigsten Treiber für den Umsatz – auch und gerade im mobilen Shop. In diesem Webinar zeigen wir Ihnen, wie Sie schnell und effektiv PAYONE mit CouchCommerce einrichten können, um Ihren Shop bei den mobilen Zahlungsmethoden optimal aufzustellen. Sie können gerne vorab Ihre Fragen einreichen.

Jetzt kostenlos für das PAYONE und CouchCommerce Webinar anmelden!

Solution Partner Shopwerft erweitert das CouchCommerce Magento Modul

shopwerft_logo

Unsere Partneragentur Shopwerft aus Hamburg unterstützt Betreiber von Magento-Shops bei der Anbindung Ihres Shops an CouchCommerce.

Innerhalb eines aktuellen Kundenprojektes setzt Shopwerft für die optimale User Experience im mobilen Bereich die CouchCommerce Web App ein. Der Kunde hatte eine spezielle Anforderung die in der aktuellen Version des Moduls nicht vorgesehen war. Für solche Erweiterungen haben wir die CouchCommerce Connector Module so konzipiert, dass wir Events gesetzt haben, so dass diese zusätzlichen Funktionen ganz einfach hinzugefügt werden können.

Welcher Fall hier genau bearbeitet wurde und wie die Lösung dafür aussieht hat Benjamin Wunderlich sehr anschaulich in einem Blogpost zusammengefasst.

Jan, der bei uns an dem Magento Modul arbeitet, freut sich über die Erweiterung durch Shopwerft:

“He created an extension for our module, that listens to an event, that is thrown from our module to make a customization. This is exactly what I intended with the events and I’m absolutely excited, that Shopwerft makes use of it!”

Wir freuen uns sehr darüber, dass unsere Module so gut bewertet werden und qualitativ auf höchstem Niveau entwickelt sind. Contributer und Solution Partner sind immer herzlich willkommen mit uns an Erweiterungen zu arbeiten. Zusammen können wir so die besten mobile commerce Lösungen anbieten! :)

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.

Judith takes her seat at CouchCommerce

Judith makes herself at home on the Couch since February and we are so glad to have her in our team. She supports us as a brilliant designer! Judith is a digital media designer and studies visual communications at the university of applied science in Hannover in the 6th semester.

judith

Judith loves to work on digital and print products and does a fabulous job as you can see on her website. Judith isn’t very much interested in doing sports but every now and then she plays some badminton for her bad consciences ;).

Besides that she loves music and if she isn’t at the university or on our couch at CouchCommerce you can find her at concerts and festivals. She is also very much into the colorful color black and she loves to watch series like Breaking Bad and The Big Bang Theory!

And if you like to find her outside in the sunlight this will most likely be with a beer to watch the sunset at the Herrenhäuser Gärten – according to her principle: the sun makes you foolish :D.