Web responsive & E-Commerce, un seul site pour tous les devices ?

web responsive & e-commerceun seul site pour tous les devicespar Stéphane LecouturierDirecteur de Création et User Experience

L’agenceQui sommes nous ?

couverturemétierse-commerce

agencesLille, Paris, Lyon,Shanghai soon…

ansd’expériencedigitale

collaborateurspassionnés

%100

4 220

15

we e-commerce♥

Web Responsiveet e-commerceUn seul site pour tous les devices

au menuSteve Jobs + Mona Lisa+ Bruce Lee + Karl Lagerfeld+ les septs nains + George Clooney…

+ 2 SCOOPS !

+ des surprises pour ceux qui restent jusqu’au bout…

c’est quoile Web Responsive ?

Le « Web Responsive » : c’est quoi ?

Une nouvelle démarche de design de site webqui s’appuie sur la capacité des navigateurs

à détecter les caractéristiques du device.

Plutôt que de construire différents sites pour différents types de devices, l’approche « responsive »

consiste en un seul site qui s’adapteà plusieurs devices et ainsi de supporter

davantage de devices sans devoir développeret maintenir plusieurs sites différents.

webresponsiveun seul site pour tous les devices

fluid layoutmediaqueriesadaptative mediasserver optimization

Le « Web Responsive » : c’est quoi ?

Food Sensehttp://foodsense.is

Andersson-Wise Architectshttp://www.anderssonwise.com

The Boston Globehttp://www.bostonglobe.com/

résolutionsd’écran

résolutionsd’écran

1920 px

1280px

1024px

800px

640px

320px

des résolutions d’écransstructurantes(surtout la largeur !)

1920 px

1280px

1024px

800px

640px

320pxsmartphone smart

phone

TV

desktopdesktop desktop

featuresphone features

phone

tablettablettablet

des résolutions réelleset des résolutions s(t)imuléesretina displays

périphériquesd’entrée

périphériques d’entréetouch / keyboard…

périphériques d’entréeremote… ?

périphériques d’entréeremote… ?

périphériques d’entréegesture, voice… ?

couleurs

nombrede couleurs

couleursdes profils colorimétriques différents ?

couleursdes profils colorimétriques différents ?

performances

performance matters!

100 ms d’attente = 1 % de vente en moins(manque à gagner potentiel de 191 millions de $ en 2008)

Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters

400 ms d’attente =5 à 9 % de perte de trafic

500 ms d’attente = baisse de trafic de 20 %Le coût de la lenteur augmente de jour en jour

1 s d’attente = baisse des revenus de 4 %

performanceréseau Edge vs. 3G ou WiFi

performancemode off-line ou asynchrone

@mediaqueries

Be formless.Shapeless, like water.

If you put water into a cup,it becomes the cup.

You put water into a bottleand it becomes the bottle.

You put it in a teapot,it becomes the teapot.

Be water, my friend.  Bruce Lee

http://www.youtube.com/watch?v=pGFf3SRP1bE

Pourquoic’est à la mode ?

Je kiffele responsive

le responsive =nouvel eldorado du web ?

m-commerce en France = 13,4 milliards d’euros en 2015Xerfi 03/2012

Dans 5 ans, 19,2 milliards d'euros seront générésgrâce au m-commerce dans sept pays d'Europe,dont 3,1 en France. Forrester 07/2012

SEO friendly

maintenance simplifiée

site mobile

site web

www.ebay.com mobileweb.ebay.com

m.ebay.comeBay extensions

& add-on

iPhone Androïd Win BlackBerrydesktop mobile iPad

déploiement simultanédes updates

déploiement simultanédes updates

futureproof!

même plus peurdes keynotes

Mais…est-ce vraiment une mode ?

Délivrerla meilleure expérienceà ses clientsn’est pas une mode,c’est une dette !

22%des e-commerçants mobile

(sites + apps)

CCM Benchmark - juillet 2011

=78%des e-commerçants PAS mobile

(sites + apps)

CCM Benchmark - juillet 2011

40%des mobinautes

préfèrent acheter sur le site

IAB M-Commerce 2011

17% via une appli

31%des mobinautes

regrettent que les sitesne soient pas optimisés

pour mobileConsensus / WorldPay - Octobre 2011

#fail

#fail

#fail

Pourquoipas encorede sitese-commerce responsive ?

Pourquoipas encorede GROS sitese-commerce responsive ?

work in progress !

frameworket architecture technique

frameworket architecture technique

• comment s’effectuele rendering des pages HTML ?

• framework commun web et mobile ?

• quels formats d’images ?

performanceet hébergement

performanceet hébergement

• même hébergement web et mobile ?

• gestion du cache ?

• optimisation des médiasà la volée pour le mobile ?

• comment je détecte les devices ?

http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html

#fail

Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby

architecturede l’information

architecturede l’information• mes catégories produitssont-elles adaptées au mobile ?

• mes contenus sont-ils adaptéspour le mobile ?

• dois-je adapter mon site en fonction du contexte ?

webresponsiveun seul site pour tous les devices

rappel !

17 catégories+ 102 sous-catégories

4 catégories+ 35 sous-catégories

j’ai déjàun siteet des apps !

j’ai déjà un siteet/ou des applis !

• comment transformer mon site weben responsive sans tout refondre ?

• mon site web est-il compatible iPad ?

j’ai déjà un siteet/ou des applis !• dois-je conserver mes applis ?

• est-ce que je peux encapsulerdu HTML dans mes applis ?

• comment je fais pour scannerun code barre sans appli ?

comprendre ou définirl’écosytème digital

• à quoi sert mon site web…• à quoi servent mes applis…• qui sont mes clients…• quels devices utilisent-ils…• dans quel contexte…• d’où vient mon CA…

smartphone

desktoptablet

envisager unemutation progressive

smartphone

desktoptablet

envisager unemutation progressive

desktoptabletsma

rtphone

envisager unemutation progressive

smartphone

TVdesktopdesktop

featuresphone tablet

showtime!

Case-studiesaltima°

case-studyrelay.com

SCOOP

case-study

• un site web pour inscription et commande de magazines

• + des applis : pour la consultation

• 95 % d’utilisation tablette

• contrainte Apple in app purchase :30 % de mon CA menacé

case-studyskimium.com

SCOOP

et beaucoupd’autres à suivre…

merci !slecouturier@altima.fr

www.altima.fr

@altima

© altima 09/2012