Mediaweb | 20 Prachtige Responsive E-commerce sites

Geen zin om te lezen? Luister naar deze blogpost via de player hieronder:

Vrijwel elke nieuwe website die momenteel wordt opgeleverd, is responsive. Echter, webshops lopen op dit gebied achter. En dat is gek, want mensen besteden inmiddels meer tijd op hun smartphone dan voor de televisie. Daarom ter inspiratie een overzicht van 20 prachtige responsive e-commerce sites die bewijzen dat mobiel winkelen de toekomst heeft.

Als het om webdesign gaat, staat 2015 in Nederland in het teken van responsive web design. Dat is niet zo gek, want responsive web design is het beste anwoord op de gigantische proliferatie van smartphones, tablets, laptops, desktops en TV’s met een webbrowser en de eindeloze hoeveelheid verschillende schermgroottes die daarmee gepaard gaat.

Responsive e-commerce project bespreken?
Maak een afspraak

De selectie van 20 prachtige responsive e-commerce sites die ik heb gemaakt, is op zich redelijk willekeurig. Het is geen ranglijst. Het zijn voorbeelden ter inspiratie.

Criteria

Ik heb gekeken naar een aantal criteria, zoals het ontwerp: komt de merkbeleving goed over? De gebruiksvriendelijkheid op zowel desktop als smartphone. Het onderscheidend vermogen ten opzichte van de concurrentie. De kwaliteit van de content. En ten slotte een objectieve meting van de snelheid op desktop en smartphone met Google PageSpeed Insights. Met name op dat laatste punt is het bij de meeste webwinkels nog bar slecht gesteld. Maar dat zagen we al eerder bij ons onderzoek naar de snelheid van de websites van de 200 grootste Nederlandse ondernemingen.

Leestip: 33 Prachtige Webdesign Inspiratie Sites

Blue Lagoon

blue lagoon 

Ik heb mooie herinneringen aan mijn bezoeken aan de Blue Lagoon in IJsland. De laatste keer was in 2007. Vorig jaar overwoog ik om weer naar IJsland te reizen en bezocht ik de website van de Blue Lagoon om de voorpret. Ik was teleurgesteld in de website. Die leek sinds 2007 niet veranderd. Daarom was ik positief verrast toen ik onlangs de website weer bezocht. Een prachtige responsive website met veel sfeer, prachtige fotografie en een aangename navigatie op m’n smartphone.

bluelagoondetail

Het boeken van je bezoek aan deze bijzondere, vulkanische warmwaterbron gaat ook op je smartphone heel makkelijk. Ook krijg je een prima beeld van wat je er kunt verwachten en welke arrangementen de Blue Lagoon allemaal biedt. Ik kreeg gelijk weer zin om op het vliegtuig te stappen.

1 ontwerpOntwerp: 9

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 8

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 3,5

7 speedmobileSnelheid mobiel: 2,9

http://www.bluelagoon.com/

Deejo

deejo

Deejo maakt super lichte zakmessen voor chefs onderweg. In hun eigen woorden ‘nomadic knifes’. Deejo messen zijn er in drie maten. Je kun ze personaliseren door de keuze voor materiaal, versieringen (tattoos), kleur van het handvat en een eigen inscriptie. De website is bijzonder visueel ontworpen. Het product is de held. Het zweeft in de ruimte en je kunt het van alle kanten bekijken. Openen en sluiten. Experimenteren met de verschillende mogelijkheden om te personaliseren. Op de desktop is het een prachtige ervaring.

deejo detail

Bijzonder knap is dat de makers van de website die ervaring ook op een klein smartphone scherm weten te realiseren. Enige minpunt is dat de checkout op mijn smartphone ineens in het Frans was. Op de desktop gaat de checkout gek genoeg wel netjes in het Engels.

1 ontwerpOntwerp: 9,5

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 7

4 onderscheidOnderscheidend: 10

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 4,4

7 speedmobileSnelheid mobiel: 3,8

http://my.deejo.fr/en/

Suitsupply

suitsupply

De webshop van Suitsupply is direct herkenbaar voor een ieder die andere marketing uitingen van dit merk heeft gezien. De persoonlijkheid van het merk komt daarmee direct heel sterk naar voren. Ook op smartphones komt de merkbeleving  goed over.

suitsupply detail

Die krachtige merkbeleving volgen ze bij Suitsupply op met een makkelijke, intuïtieve online shopervaring. Ook op m’n smartphone werkte het vinden en bestellen van producten heel makkelijk. Een ijzersterke webwinkel.

1 ontwerpOntwerp: 9

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 9

5 inhoudInhoudelijk: 9

6 speeddesktopSnelheid desktop: 7,6

7 speedmobileSnelheid mobiel: 4,8

http://suitsupply.com

Leestip: Afbeeldingen voor je website of blog: de ultieme lijst

AH

ah 

Albert Heijn lanceerde vorig najaar een nieuwe, responsive website. Aan alles kun je zien dat over deze website heel goed is nagedacht. Merkbeleving en functionaliteit gaan in deze website hand in hand.

1 ontwerpOntwerp: 8

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 7

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 6,6

7 speedmobileSnelheid mobiel: 6,1

http://ah.nl

Coolblue

cool blue home

Coolblue begon in de zomer van 2013 met het responsive maken van hun webwinkels. Ze kozen ervoor om dit stapsgewijs te doen. Ze begonnen bij het winkelmandje en dat leverde al een conversieverhoging van 30% bij smartphones op. Inmiddels zijn de webwinkels van Coolblue volledig responsive.

coolbluedetail

Je kan goed merken dat ze bij Coolblue, net als bij Booking.com, heel veel kennis en ervaring hebben op het gebied van conversieverhogend design. Het is misschien niet allemaal even ‘mooi’, maar het werkt super. Zowel op desktops als smartphones. En bij een complexe website als deze is dat absoluut een geweldige prestatie.

Bestuderen en je voordeel ermee doen zou ik zeggen.

1 ontwerpOntwerp: 7

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 7

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 7,7

7 speedmobileSnelheid mobiel: 4,9

http://coolblue.nl

Oliver Harvey

Oliver Harvey

Deze website van Oliver Harvey, een producent van horecakleding, is een voorbeeld in business-to-business e-commerce. De combinatie van content, design en functionaliteit is uitstekend. Daarmee onderscheidt Oliver Harvey zich van de concurrentie.

oliverharvey detail

Je kan zien dat aan deze website veel aandacht is besteed en dat ze heel goed hebben nagedacht over positionering van het merk en het toevoegen van waardeperceptie door hun online aanwezigheid.

Een voorbeeld voor elke B2B leverancier die online wil verkopen.

1 ontwerpOntwerp: 9

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 9

4 onderscheidOnderscheidend: 8

5 inhoudInhoudelijk: 9

6 speeddesktopSnelheid desktop: 5,2

7 speedmobileSnelheid mobiel: 2,3

http://www.oliverharvey.co.uk/

Hickory Farms

hikckoryfarms 

Mooi voorbeeld van een merk met een ambachtelijke uitstraling die een moderne, maar toch bij het traditionele imago van het merk passende online presence neerzet. Het gevoel dat je krijgt bij een goede traiteur combineert in deze website prima met de functionaliteit van een moderne webshop.

1 ontwerpOntwerp: 7

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 7,5

4 onderscheidOnderscheidend: 8

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 5,5

7 speedmobileSnelheid mobiel: 4,6

http://www.hickoryfarms.com/

Raclettre

raclettre

Deze zwitserse speciaalzaak voor raclettekazen zet het product fraai neer. Ze bedachten een simpel concept: kiezen, bestellen, genieten. Alles ziet er tot in de puntjes verzorgd uit. Van de foto’s van de kazen tot en met de verpakking,

raclettredetail

Het bestelproces is zo eenvoudig mogelijk gemaakt met de keuze uit twee pakketten: 12 stuks of 24 stuks. Per pakket kan je de samenstelling zelf bepalen. Alleen de poging tot content marketing middels een blog is niet goed gelukt. Er staat maar één artikel in van 12 februari 2014 over de lancering van de site.

1 ontwerpOntwerp: 8

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 9

4 onderscheidOnderscheidend: 8

5 inhoudInhoudelijk: 7

6 speeddesktopSnelheid desktop: 7,2

7 speedmobileSnelheid mobiel: 5,7

http://www.raclettre.ch/de/konzept/#one

Olukai

olukai

Footwear met de ‘aloha spirit’ uit Hawaii. De hele website straalt het gevoel uit van een vakantie in de Stille Zuidzee. Naast de online shop met een grote keuze aan luxe sandalen en schoenen bevat de site ook een mooie blog (journal) met artikelen over allerlei outdoor activiteiten in Hawaii.

De shopervaring is aangenaam dankzij het gebruik van duidelijke foto’s, productinformatie en veel witruimte. Dit is ook goed doorgevoerd voor smartphones.

1 ontwerpOntwerp: 8

2 uxdesktopUX desktop: 8,5

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 8,5

5 inhoudInhoudelijk: 9

6 speeddesktopSnelheid desktop: 3,8

7 speedmobileSnelheid mobiel: 2

http://www.olukai.com/

R+Co

 r co home

De website van haarproducten producent R+Co combineert veel uitleg over de toepassingen van de producten met een heldere shopervaring. Het design oogt een beetje rommelig op de desktop, maar juist erg overzichtelijk op smartphones.

Wellicht is het ‘mobile first’ ontworpen, waarbij de desktop wat minder aandacht heeft gekregen.

r co detail

1 ontwerpOntwerp: 7

2 uxdesktopUX desktop: 6,5

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 7

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 7,3

7 speedmobileSnelheid mobiel: 5,3

http://www.randco.com

Johnny Loco

johnnyloco

Het lifestyle merk Johnny Loco, bekend van hippe, kleurige beach cruisers, creëerde een online platform voor mensen die een succesvolle carrière combineren met een relaxte levenshouding. Mensen die kunnen genieten van kleine momentjes en de mooie dingen in het leven.

johnnylocodetail

Het concept ‘Living Loco’ combineert content marketing door middel van magazine-achtige artikelen met een gebruiksvriendelijke webshop. Zo koppelt Johhny Loco merkbeleving aan directe online verkoop. Disclaimer: deze website is gemaakt door Mediaweb.

1 ontwerpOntwerp: 9

2 uxdesktopUX desktop: 8,5

3 uxmobileUX smartphone: 8,5

4 onderscheidOnderscheidend: 9

5 inhoudInhoudelijk: 9

6 speeddesktopSnelheid desktop: 6,9

7 speedmobileSnelheid mobiel: 5,4

http://johnnyloco.nl

Ook zo'n mooie responsive webshop?
Maak een afspraak

Boldking

boldking

Prachtig staaltje product storytelling dat bovendien goed gebruik maakt van zowel de smartphone als de desktop. De boodschap is simpel. Het verhaal inspirerend.  De grootste hobbel is om voldoende vertrouwen te wekken dat mannen het een keertje willen proberen.

boldkingdetail

Mooi ontworpen met een sterke merkbeleving, heldere boodschap en fraaie beeldtaal. Het checkoutproces is ook op de smartphone gebruiksvriendelijk. Het biedt zelfs de mogelijkheid om je aan te melden via Facebook. Iets wat we niet vaak zien in een e-commerce checkoutproces.

1 ontwerpOntwerp: 9,5

2 uxdesktopUX desktop: 9

3 uxmobileUX smartphone: 9

4 onderscheidOnderscheidend: 9,5

5 inhoudInhoudelijk: 9

6 speeddesktopSnelheid desktop: 5,4

7 speedmobileSnelheid mobiel: 5,2

http://boldking.com

Godiva

godiva 

Op het eerste gezicht op de desktop ziet de website van Godiva luxe chocolade er wat gedateerd uit door het strakke kader. Maar bij nader inzien is de site wel degelijk responsive. De ervaring op een smartphone is prima. Het vinden van producten naar keuze en het checkoutproces gaat ook op een klein schermpje prima. Daarbij doet Godiva aan content marketing door middel van het geven van informatie over hoe je chocolade kunt maken en tal van chocoladerecepten.

1 ontwerpOntwerp: 6

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 7,5

4 onderscheidOnderscheidend: 6

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 5,4

7 speedmobileSnelheid mobiel: 5,2

http://www.godiva.com/

Lebkov & Sons

lebkov

Lebkov & Sons heeft vier moderne lunchrooms in de buurt van NS-stations. De vijfde zaak is de webwinkel waar met name vaste klanten in de kantoren uit de buurt online hun lunch bestellen. Alles draait in deze webshop om het zo makkelijk mogelijk, ook op een smartphone, kunnen bestellen van een bezorgde lunch. Disclaimer: deze website is gemaakt door Mediaweb.

1 ontwerpOntwerp: 8

2 uxdesktopUX desktop: 8,5

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 9

5 inhoudInhoudelijk: 6

6 speeddesktopSnelheid desktop: 6,7

7 speedmobileSnelheid mobiel: 6,0

http://lebkov.nl

Ook zo'n mooie responsive webshop?
Maak een afspraak

CPO Outlets

cpooutlet

Amerikaanse webwinkel voor gereedschappen. Op het eerste gezicht een vrij standaard ‘magento-achtig’ design. Maar gezien de enorme hoeveelheid producten is de website wel overzichtelijk neergezet.

cpooutletdetail

Door het gebruik van thumbnail afbeeldingen in de navigatie en een makkelijk te navigeren selectie van de meest populaire producten per categorie, werkt de shop lekker intuïtief. Met name ook op je smartphone.

1 ontwerpOntwerp: 6

2 uxdesktopUX desktop: 7

3 uxmobileUX smartphone: 7,5

4 onderscheidOnderscheidend: 5

5 inhoudInhoudelijk: 6

6 speeddesktopSnelheid desktop: 7,8

7 speedmobileSnelheid mobiel: 5,0

http://www.cpooutlets.com/

NRC Abonnementen

abonnementen nrc

NRC Media zit midden in de digitale transformatie. De transitie van print naar online is voor de meeste uitgevers een enorme uitdaging. NRC biedt steeds meer online producten aan die geschikt zijn voor tablets en smartphones. Daarom bieden ze diverse abonnementsvormen aan in combinatie met een ipad of iphone.

abonnementennrcdetail

Lezers kunnen via de abonnementensite van NRC makkelijk en snel een abonnement afsluiten, desgewenst met een ipad of iphone erbij.

De website beperkt het aantal handelingen dat nodig is om een abonnement af te sluiten tot het minimum in twee overzichtelijke stappen (vier wanneer je er een ipad of iphone bij wilt bestellen). Disclaimer: deze website is gemaakt door Mediaweb.

1 ontwerpOntwerp: 9

2 uxdesktopUX desktop: 9,5

3 uxmobileUX smartphone: 9,5

4 onderscheidOnderscheidend: 8

5 inhoudInhoudelijk: 7

6 speeddesktopSnelheid desktop: 8,3

7 speedmobileSnelheid mobiel: 6,7

http://abonnementen.nrc.nl

Ook zo'n mooie responsive webshop?
Maak een afspraak

Fredericks of Hollywood

fredericks 

Lingerie merk Fredericks of Hollywood neemt online een voorsprong op concurrent Victoria’s Secret met deze responsive webshop.

In een land waar 10% van de bevolking al ‘mobile only’ is, geen slechte zet. Zeker als je ziet dat de ervaring op een smartphone eigenlijk die van de desktop overtreft. Evenwichtig gebruik van fotografie, typografie en witruimte.

fredericksdetail

1 ontwerpOntwerp: 7

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 8,5

4 onderscheidOnderscheidend: 6

5 inhoudInhoudelijk: 6

6 speeddesktopSnelheid desktop: 7,2

7 speedmobileSnelheid mobiel: 2,7

http://www.fredericks.com/

Costume National Scents

costumenational

Parfum merk Costume National Scents koos voor een webwinkel die sterk afwijkt van de standaarden waar veel consumenten aan gewend zijn. Dat is riskant uit oogpunt van gebruiksvriendelijkheid. Maar het kan positief uitpakken voor de merkbeleving. Bij deze website kun je dit goed zien.

De presentatie van de producten is fraai. Met mooie animaties en veel witruimte krijgen de flesjes parfum alle aandacht.

costumenationaldetail

Wel een beetje jammer van de wat ingewikkelde checkout procedure. Die bevat wel erg veel stappen en bij producten die niet op voorraad zijn is de terugkoppeling wat onduidelijk. Wel weer leuk gedaan is de mate van storytelling en informatie rondom de producten.

1 ontwerpOntwerp: 7

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 7,5

4 onderscheidOnderscheidend: 7,5

5 inhoudInhoudelijk: 8

6 speeddesktopSnelheid desktop: 6,7

7 speedmobileSnelheid mobiel: 5,7

http://en.costumenationalscents.com/

Nolten Schoenen

noltenschoenen

Mooi voorbeeld van een moderne, functionele webshop die het prima doet op smartphones en desktops. Het ontwerp is rustig met fraaie fotografie, aangename typografie en voldoende witruimte. Het maakt de webshop lekker overzichtelijk. En dat ondanks de grote hoeveelheid merken, producten en de diverse doelgroepen.

noltenschoenendetail

1 ontwerpOntwerp: 8

2 uxdesktopUX desktop: 8

3 uxmobileUX smartphone: 8

4 onderscheidOnderscheidend: 7

5 inhoudInhoudelijk: 6

6 speeddesktopSnelheid desktop: 7,6

7 speedmobileSnelheid mobiel: 6,2

http://www.noltenschoenen.nl/

Light & Living

webshoplightliving

Business to business webwinkel voor de amerikaanse markt van de Nederlandse groothandel in lichtarmaturen en interieurdecoratie Light & Living.

Een voorbeeld van mobile first design, maar ook opgenomen in deze lijst om te laten zien dat een webshop ook razendsnel kan zijn.

webshoplightliving pagespeed

De amerikaanse klanten van Light & Living kunnen er snel en makkelijk kiezen uit zo’n 1.300 producten, waarbij ze kunnen filteren op categorie, kleur en vorm.

webshop lightlivingdetail

Disclaimer: deze website is gemaakt door Mediaweb. Een meer op beleving gerichte versie voor klanten in Europa is inmiddels opgeleverd.

1 ontwerpOntwerp: 8.5

2 uxdesktopUX desktop: 9

3 uxmobileUX smartphone: 9

4 onderscheidOnderscheidend: 6

5 inhoudInhoudelijk: 6

6 speeddesktopSnelheid desktop: 9,6

7 speedmobileSnelheid mobiel: 9,2

https://webshop.light-living.com/

Leestip: E-commerce Trends 2016 en Webdesign Trends 2016

Ook zo'n mooie responsive webshop?
Maak een afspraak

Deze post delen?

e book online marketing checklist 2018

Meer inspiratie voor 2018?

Wekelijks een e-mail notificatie ontvangen als onze nieuwste blog live staat?
Ja graag! →

2 reacties op “

  1. Gravatar for Paul

    Paul

    Dit is naar mijn mening momenteel de beste responsive website.
    Ik heb nog nooit zoveel online gekocht...
    Hebbe dingetjes, maar ook zeker functionele producten, voor een zeer scherpe prijs

Reageren niet meer mogelijk.