web responsive & e-commerceun seul site pour tous les devicespar Stéphane LecouturierDirecteur de Création et User Experie...
L’agenceQui sommes nous ?
couverture                  ans100 %        métiers        e-commerce                              15    d’expérience     ...
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 po...
c’est quoile Web Responsive ?
Le « Web Responsive » : c’est quoi ?     Une nouvelle démarche de design de site web      qui s’appuie sur la capacité des...
webresponsiveun seul site pour tous les devices
Le « Web Responsive » : c’est quoi ?                fluid layout                mediaqueries                adaptative med...
Food Sensehttp://foodsense.is
Andersson-Wise Architectshttp://www.anderssonwise.com
The Boston Globehttp://www.bostonglobe.com/
résolutions  d’écran
résolutionsd’écran
1920 px1280px1024px800px     des résolutions d’écrans          structurantes640px     (surtout la largeur !)320px
1920 px                                                       TV1280px1024px                                              ...
des résolutions réelleset des résolutions s(t)imuléesretina displays
périphériques  d’entrée
périphériques d’entrée    touch / 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 potenti...
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...
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/2012Dans 5 ans, 19,2 ...
SEO friendly
maintenancesimplifiée                    site mobile         site web
déploiement simultanédes updates    desktop             mobile         iPad   iPhone   Androïd   Win   BlackBerrywww.ebay....
déploiement simultanédes updates
futureproof!
même plus peurdes keynotes
Mais…est-ce vraimentune mode ?
Délivrerla meilleureexpé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 mobinautespréfèrent acheter sur le site     17% via une appli            IAB M-Commerce 2011
31%  des mobinautesregrettent que les sitesne soient pas optimisés      pour mobile        Consensus / WorldPay - Octobre ...
#fail
#fail
#fail
Pourquoipas encorede sitese-commerceresponsive ?
Pourquoipas encorede GROS sitese-commerceresponsive ?
work in progress !
frameworket architecturetechnique
frameworket architecture technique• comment s’effectuele rendering des pages HTML ?• framework commun web et mobile ?• que...
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...
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...
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-...
j’ai déjà un siteet/ou des applis !• dois-je conserver mes applis ?• est-ce que je peux encapsulerdu HTML dans mes applis ...
comprendre ou définirl’écosytème digital• à quoi sert mon site web…• à quoi servent mes applis…• qui sont mes clients…• qu...
envisager unemutation progressive  desktop                       sma             tablet    rtph                       one
envisager unemutation progressive                       desktop  sma  rtph     tablet  one
envisager unemutation progressive   sma                 desktop   rtph     tablet   one
desktop   TV                       desktopfeat       sma              tableturespho ne    rtph       one
showtime!
Case-studiesaltima°
case-studyrelay.com                P               OO             SC
case-study• un site web pour inscription et  commande de magazines• + des applis : pour la consultation• 95 % d’utilisatio...
case-studyskimium.com                 P                OO              SC
et beaucoupd’autres à suivre…
merci !slecouturier@altima.fr    www.altima.fr         @altima        © altima 09/2012
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
Prochain SlideShare
Chargement dans…5
×

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

3 984 vues

Publié le

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.

Publié dans : Design
0 commentaire
17 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 984
Sur SlideShare
0
Issues des intégrations
0
Intégrations
269
Actions
Partages
0
Téléchargements
193
Commentaires
0
J’aime
17
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. web responsive & e-commerceun seul site pour tous les devicespar Stéphane LecouturierDirecteur de Création et User Experience
  2. 2. L’agenceQui sommes nous ?
  3. 3. couverture ans100 % métiers e-commerce 15 d’expérience digitale4 agences Lille, Paris, Lyon, Shanghai soon… 220 collaborateurs passionnés we ♥ e-commerce
  4. 4. Web Responsiveet e-commerceUn seul site pour tous les devices
  5. 5. au menuSteve Jobs + Mona Lisa+ Bruce Lee + Karl Lagerfeld+ les septs nains + George Clooney…+ 2 SCOOPS !+ des surprises pour ceux qui restentjusqu’au bout…
  6. 6. c’est quoile Web Responsive ?
  7. 7. Le « Web Responsive » : c’est quoi ? Une nouvelle démarche de design de site web qui 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évelopper et maintenir plusieurs sites différents.
  8. 8. webresponsiveun seul site pour tous les devices
  9. 9. Le « Web Responsive » : c’est quoi ? fluid layout mediaqueries adaptative medias server optimization
  10. 10. Food Sensehttp://foodsense.is
  11. 11. Andersson-Wise Architectshttp://www.anderssonwise.com
  12. 12. The Boston Globehttp://www.bostonglobe.com/
  13. 13. résolutions d’écran
  14. 14. résolutionsd’écran
  15. 15. 1920 px1280px1024px800px des résolutions d’écrans structurantes640px (surtout la largeur !)320px
  16. 16. 1920 px TV1280px1024px desktop desktop desktop800px640px tablet feat ures sma tab320px pho ne features rtph phone one smart tablet let phone
  17. 17. des résolutions réelleset des résolutions s(t)imuléesretina displays
  18. 18. périphériques d’entrée
  19. 19. périphériques d’entrée touch / keyboard…
  20. 20. périphériques d’entréeremote… ?
  21. 21. périphériques d’entréeremote… ?
  22. 22. périphériques d’entréegesture, voice… ?
  23. 23. couleurs
  24. 24. nombrede couleurs
  25. 25. couleursdes profils colorimétriques différents ?
  26. 26. couleursdes profils colorimétriques différents ?
  27. 27. performances
  28. 28. performance matters! 100 ms d’attente = 1 % de vente en moins (manque à gagner potentiel de 191 millions de $ en 2008) 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 % Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters
  29. 29. performanceréseau Edge vs. 3G ou WiFi
  30. 30. performancemode off-line ou asynchrone
  31. 31. @mediaqueries
  32. 32. 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 Leehttp://www.youtube.com/watch?v=pGFf3SRP1bE
  33. 33. Pourquoic’est à la mode ?
  34. 34. Je kiffele responsive
  35. 35. le responsive =nouvel eldorado du web ?m-commerce en France = 13,4 milliards d’euros en 2015Xerfi 03/2012Dans 5 ans, 19,2 milliards deuros seront générésgrâce au m-commerce dans sept pays dEurope,dont 3,1 en France. Forrester 07/2012
  36. 36. SEO friendly
  37. 37. maintenancesimplifiée site mobile site web
  38. 38. déploiement simultanédes updates desktop mobile iPad iPhone Androïd Win BlackBerrywww.ebay.com mobileweb.ebay.comeBay extensions & add-on m.ebay.com
  39. 39. déploiement simultanédes updates
  40. 40. futureproof!
  41. 41. même plus peurdes keynotes
  42. 42. Mais…est-ce vraimentune mode ?
  43. 43. Délivrerla meilleureexpérienceà ses clientsn’est pas une mode,c’est une dette !
  44. 44. 22%des e-commerçants mobile (sites + apps) CCM Benchmark - juillet 2011
  45. 45. =78%des e-commerçants PAS mobile (sites + apps) CCM Benchmark - juillet 2011
  46. 46. 40% des mobinautespréfèrent acheter sur le site 17% via une appli IAB M-Commerce 2011
  47. 47. 31% des mobinautesregrettent que les sitesne soient pas optimisés pour mobile Consensus / WorldPay - Octobre 2011
  48. 48. #fail
  49. 49. #fail
  50. 50. #fail
  51. 51. Pourquoipas encorede sitese-commerceresponsive ?
  52. 52. Pourquoipas encorede GROS sitese-commerceresponsive ?
  53. 53. work in progress !
  54. 54. frameworket architecturetechnique
  55. 55. frameworket architecture technique• comment s’effectuele rendering des pages HTML ?• framework commun web et mobile ?• quels formats d’images ?
  56. 56. performanceet hébergement
  57. 57. 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 ?
  58. 58. Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby #fail http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html
  59. 59. architecturede l’information
  60. 60. 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 fonctiondu contexte ?
  61. 61. webresponsiveun seul site pour tous les devices rappel !
  62. 62. 17 catégories+ 102 sous-catégories 4 catégories+ 35 sous-catégories
  63. 63. j’ai déjàun siteet des apps !
  64. 64. 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 ?
  65. 65. 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 ?
  66. 66. 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…
  67. 67. envisager unemutation progressive desktop sma tablet rtph one
  68. 68. envisager unemutation progressive desktop sma rtph tablet one
  69. 69. envisager unemutation progressive sma desktop rtph tablet one
  70. 70. desktop TV desktopfeat sma tableturespho ne rtph one
  71. 71. showtime!
  72. 72. Case-studiesaltima°
  73. 73. case-studyrelay.com P OO SC
  74. 74. 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é
  75. 75. case-studyskimium.com P OO SC
  76. 76. et beaucoupd’autres à suivre…
  77. 77. merci !slecouturier@altima.fr www.altima.fr @altima © altima 09/2012

×