Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 89 Anzeige

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

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Andere mochten auch (20)

Anzeige

Ähnlich wie Web responsive & E-Commerce, un seul site pour tous les devices ? (20)

Weitere von altima° (20)

Anzeige

Aktuellste (20)

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

  1. 1. web responsive & e-commerce un seul site pour tous les devices par Stéphane Lecouturier Directeur de Création et User Experience
  2. 2. L’agence Qui sommes nous ?
  3. 3. couverture ans 100 % métiers e-commerce 15 d’expérience digitale 4 agences Lille, Paris, Lyon, Shanghai soon… 220 collaborateurs passionnés we ♥ e-commerce
  4. 4. Web Responsive et e-commerce Un seul site pour tous les devices
  5. 5. au menu Steve Jobs + Mona Lisa + Bruce Lee + Karl Lagerfeld + les septs nains + George Clooney… + 2 SCOOPS ! + des surprises pour ceux qui restent jusqu’au bout…
  6. 6. c’est quoi le 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. webresponsive un seul site pour tous les devices
  9. 9. Le « Web Responsive » : c’est quoi ? fluid layout mediaqueries adaptative medias server optimization
  10. 10. Food Sense http://foodsense.is
  11. 11. Andersson-Wise Architects http://www.anderssonwise.com
  12. 12. The Boston Globe http://www.bostonglobe.com/
  13. 13. résolutions d’écran
  14. 14. résolutions d’écran
  15. 15. 1920 px 1280px 1024px 800px des résolutions d’écrans structurantes 640px (surtout la largeur !) 320px
  16. 16. 1920 px TV 1280px 1024px desktop desktop desktop 800px 640px tablet feat ures sma tab 320px pho ne features rtph phone one smart tablet let phone
  17. 17. des résolutions réelles et des résolutions s(t)imulées retina 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ée remote… ?
  21. 21. périphériques d’entrée remote… ?
  22. 22. périphériques d’entrée gesture, voice… ?
  23. 23. couleurs
  24. 24. nombre de couleurs
  25. 25. couleurs des profils colorimétriques différents ?
  26. 26. couleurs des 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. performance réseau Edge vs. 3G ou WiFi
  30. 30. performance mode 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 bottle and 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
  33. 33. Pourquoi c’est à la mode ?
  34. 34. Je kiffe le responsive
  35. 35. le responsive = nouvel eldorado du web ? m-commerce en France = 13,4 milliards d’euros en 2015 Xerfi 03/2012 Dans 5 ans, 19,2 milliards d'euros seront générés grâce au m-commerce dans sept pays d'Europe, dont 3,1 en France. Forrester 07/2012
  36. 36. SEO friendly
  37. 37. maintenance simplifiée site mobile site web
  38. 38. déploiement simultané des updates desktop mobile iPad iPhone Androïd Win BlackBerry www.ebay.com mobileweb.ebay.com eBay extensions & add-on m.ebay.com
  39. 39. déploiement simultané des updates
  40. 40. futureproof!
  41. 41. même plus peur des keynotes
  42. 42. Mais… est-ce vraiment une mode ?
  43. 43. Délivrer la meilleure expérience à ses clients n’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 mobinautes préfèrent acheter sur le site 17% via une appli IAB M-Commerce 2011
  47. 47. 31% des mobinautes regrettent que les sites ne soient pas optimisés pour mobile Consensus / WorldPay - Octobre 2011
  48. 48. #fail
  49. 49. #fail
  50. 50. #fail
  51. 51. Pourquoi pas encore de sites e-commerce responsive ?
  52. 52. Pourquoi pas encore de GROS sites e-commerce responsive ?
  53. 53. work in progress !
  54. 54. framework et architecture technique
  55. 55. framework et architecture technique • comment s’effectue le rendering des pages HTML ? • framework commun web et mobile ? • quels formats d’images ?
  56. 56. performance et hébergement
  57. 57. performance et 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 Views By Jason Grigsby #fail http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html
  59. 59. architecture de l’information
  60. 60. architecture de l’information • mes catégories produits sont-elles adaptées au mobile ? • mes contenus sont-ils adaptés pour le mobile ? • dois-je adapter mon site en fonction du contexte ?
  61. 61. webresponsive un 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 site et des apps !
  64. 64. j’ai déjà un site et/ou des applis ! • comment transformer mon site web en responsive sans tout refondre ? • mon site web est-il compatible iPad ?
  65. 65. j’ai déjà un site et/ou des applis ! • dois-je conserver mes applis ? • est-ce que je peux encapsuler du HTML dans mes applis ? • comment je fais pour scanner un code barre sans appli ?
  66. 66. comprendre ou définir l’é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 une mutation progressive desktop sma tablet rtph one
  68. 68. envisager une mutation progressive desktop sma rtph tablet one
  69. 69. envisager une mutation progressive sma desktop rtph tablet one
  70. 70. desktop TV desktop feat sma tablet ures pho ne rtph one
  71. 71. showtime!
  72. 72. Case-studies altima°
  73. 73. case-study relay.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-study skimium.com P OO SC
  76. 76. et beaucoup d’autres à suivre…
  77. 77. merci ! slecouturier@altima.fr www.altima.fr @altima © altima 09/2012

×