Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,135 views

Published on

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.

Published in: Design

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

×