89
web responsive & e-commerce un seul site pour tous les devices par Stéphane Lecouturier Directeur de Création et User Experience

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

  • Upload
    altima

  • View
    3.492

  • Download
    4

Embed Size (px)

DESCRIPTION

Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°. Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ? Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins. Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.

Citation preview

Page 1: 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

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

L’agenceQui sommes nous ?

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

couverturemétierse-commerce

agencesLille, Paris, Lyon,Shanghai soon…

ansd’expériencedigitale

collaborateurspassionnés

%100

4 220

15

we e-commerce♥

Page 4: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 5: Web responsive & E-Commerce, un seul site pour tous les devices ?

Web Responsiveet e-commerceUn seul site pour tous les devices

Page 6: Web responsive & E-Commerce, un 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…

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

c’est quoile Web Responsive ?

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

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.

Page 9: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 10: Web responsive & E-Commerce, un seul site pour tous les devices ?

webresponsiveun seul site pour tous les devices

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

fluid layoutmediaqueriesadaptative mediasserver optimization

Le « Web Responsive » : c’est quoi ?

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

Food Sensehttp://foodsense.is

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

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

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

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

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

résolutionsd’écran

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

résolutionsd’écran

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

1920 px

1280px

1024px

800px

640px

320px

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

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

1920 px

1280px

1024px

800px

640px

320pxsmartphone smart

phone

TV

desktopdesktop desktop

featuresphone features

phone

tablettablettablet

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

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

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

périphériquesd’entrée

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

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

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

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

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

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

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

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

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

couleurs

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

nombrede couleurs

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

couleursdes profils colorimétriques différents ?

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

couleursdes profils colorimétriques différents ?

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

performances

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

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 %

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

performanceréseau Edge vs. 3G ou WiFi

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

performancemode off-line ou asynchrone

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

@mediaqueries

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

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

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

Pourquoic’est à la mode ?

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

Je kiffele responsive

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

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

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

SEO friendly

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

maintenance simplifiée

site mobile

site web

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

déploiement simultanédes updates

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

futureproof!

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

même plus peurdes keynotes

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

Mais…est-ce vraiment une mode ?

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

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

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

22%des e-commerçants mobile

(sites + apps)

CCM Benchmark - juillet 2011

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

=78%des e-commerçants PAS mobile

(sites + apps)

CCM Benchmark - juillet 2011

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

40%des mobinautes

préfèrent acheter sur le site

IAB M-Commerce 2011

17% via une appli

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

31%des mobinautes

regrettent que les sitesne soient pas optimisés

pour mobileConsensus / WorldPay - Octobre 2011

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

#fail

Page 51: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 52: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 53: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 54: Web responsive & E-Commerce, un seul site pour tous les devices ?

#fail

Page 55: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 56: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 57: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 58: Web responsive & E-Commerce, un seul site pour tous les devices ?

#fail

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

Pourquoipas encorede sitese-commerce responsive ?

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

Pourquoipas encorede GROS sitese-commerce responsive ?

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

work in progress !

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

frameworket architecture technique

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

frameworket architecture technique

• comment s’effectuele rendering des pages HTML ?

• framework commun web et mobile ?

• quels formats d’images ?

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

performanceet hébergement

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

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 ?

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

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

#fail

Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby

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

architecturede l’information

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

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 ?

Page 69: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 70: Web responsive & E-Commerce, un seul site pour tous les devices ?

webresponsiveun seul site pour tous les devices

rappel !

Page 71: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 72: Web responsive & E-Commerce, un seul site pour tous les devices ?

17 catégories+ 102 sous-catégories

4 catégories+ 35 sous-catégories

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

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

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

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 ?

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

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 ?

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

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…

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

smartphone

desktoptablet

envisager unemutation progressive

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

smartphone

desktoptablet

envisager unemutation progressive

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

desktoptabletsma

rtphone

envisager unemutation progressive

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

smartphone

TVdesktopdesktop

featuresphone tablet

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

showtime!

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

Case-studiesaltima°

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

case-studyrelay.com

SCOOP

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

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é

Page 85: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 86: Web responsive & E-Commerce, un seul site pour tous les devices ?

case-studyskimium.com

SCOOP

Page 87: Web responsive & E-Commerce, un seul site pour tous les devices ?
Page 88: Web responsive & E-Commerce, un seul site pour tous les devices ?

et beaucoupd’autres à suivre…