Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)

1. web responsive & e-commerceun seul site pour tous les devicespar Gregory MOIGNARDDirecteur associé

2. L’agenceQui sommes nous ?

3. ans 15 d’expérience digitale % couverture 100 métiers e-commerceLille • Paris • Lyon East 220 collaborateurs passionnés agences 7 Lille, Paris, Lyon, Shanghai, Pékin, Moscou, Rabat

4. we ♥ e-commerce

5. Web Responsiveet e-commerceUn seul site pour tous les devices

6. au menuSteve Jobs + Karl Lagerfeld+ les septs nains + Mickey …+ des retours d’expérience !+ des surprises pour ceux qui restentjusqu’au bout…

7. c’est quoile Web Responsive ?

8. 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.

9. webresponsiveun seul site pour tous les devices

10. Le « Web Responsive » : c’est quoi ? fluid layout mediaqueries adaptative medias server optimization

11. The Boston Globe http://www.bostonglobe.com/

12. salomon.com

13. résolutions d’écran

14. résolutionsd’écran

15. 1920 px1280px1024px800px des résolutions d’écran structurantes640px (surtout la largeur !)320px

16. 1920 px TV1280px1024px desktop desktop desktop800px640px tablet feat ures sma tab320px pho ne features rtph phone one smart tablet let phone

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

18. périphériques d’entrée

19. périphériques d’entrée touch / keyboard…

20. périphériques d’entréececi est un piège ... ceci n’est pas qu’une tablette

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

22. Pourquoic’est à la mode ?

23. Je kiffele responsive

24. le m-commerce =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

25. 48 md’usagers mobile en France Comscore - mars 2013

26. 53% sont équipésd’un smartphone Comscore - mars 2013

27. 14%des français ont une tablette (x2 vs n-1) ComScore - mars 2013

28. la mobiltéC’est aussi passer de mon mobile à ma tabletteou de ma tablette à mon mobile

29. la mobiltéC’est aussi passer de mon mobile à ma tablette ComScore - mars 2013ou de ma tablette à mon mobile

30. - MOBILE WORLD CONGRESS 2013 -répond aux évolutions du marchédes nouveaux devices tous les mois

31. SEO friendly

32. maintenancesimplifiée site mobile site web

33. déploiement simultanédes updates desktop mobile iPad iPhone Androïd Win BlackBerrywww.ebay.com mobileweb.ebay.comeBay extensions & add-on m.ebay.com

34. déploiement simultanédes updates

35. futureproof!

36. même plus peurdes keynotes

37. woow génial ! …

38. oui mais y’atoujours un mais ...

39. expérience adaptéevs. expérience naturelle du device — Création d’une expérience homogène sur tous les devices mais qui n’est pas basée sur les principes ergonomiques propres au device —

40. pas de 100% pixel perfect — Le layout sera un peu différent sur chaque device et il ne sera donc pas possible d’assurer une expérience 100% identique aux maquettes sur tous les devices. —

41. une recette exhaustive —Il est important de bien définir ses devices cibles en amont pour réussir une recette complète. Chaque évolution sera déployée plus rapidement mais sera testée plus longtemps. —

42. compétence métier — Restreint le nombre de prestataires capables d’intervenir sur le front-end à ceux disposantd’une vraie expertise HTML/CSS/JS, de conception et d’optimisation de la performance. —

43. Mais…est-ce vraimentune mode ?

44. Délivrerla meilleureexpérienceà ses clientsn’est pas une mode,c’est une dette !

45. 50% des mobinautes ne reviendront plus sur un site mobile sice dernier n’est pas optimisé

46. #fail

47. #fail

48. Pourquoipas encorede sitese-commerceresponsive ?

49. Pourquoipas encorede GROS sitese-commerceresponsive ?

50. performances

51. 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

52. performance matters! Source : http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

53. performanceréseau Edge vs. 3G ou WiFi

54. performancemode off-line ou asynchrone

55. frameworket architecturetechnique

56. Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby #fail http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html

57. frameworket architecture technique• comment s’effectuele rendering des pages HTML ?• framework commun web et mobile ?• quels formats d’images ?

58. performanceet hébergement

59. 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 ?

60. j’ai déjàun siteet des applis !

61. j’ai déjà un siteet/ou des applis !• comment transformer mon site weben responsive sans tout refondre ?• dois-je conserver mes applis ?• comment je fais pour scannerun code barre sans appli ?

62. 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…

63. « Responsive design is a clever solution for saving time andeffort but not the best solution for serving all experience » @bkwalker pleinière 1to1

64. le responsive c’est bien…mais pas que.

65. desktop TV desktopfeat sma tableturespho ne rtph one

71. www

72. www + app

73. www + app + m.

74. responwww + app + m. + sive

75. responapp + sive

76. responapp + sive m. +

77. responsive

78. showtime!

79. Case-studiesaltima°

80. case-studyrelay.com

81. 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é

82. case-studywanimo.com

83. - wanimo.com - +12,4% valeur de la visite — +6,7% panier moyen — Après 22 jours d’exploitation

84. - wanimo.com - +200 % en conversion mobile & tablette — 5,4 % versus 2,68 % — Après 22 jours d’exploitation

85. case-studyskimium.com

86. case-study• un site web pour commander• pas de site mobile ni d’appli• un service (location de skis) propice à la mobilité• une cible internationale• l’autoroute de la conversion

87. skimium.com des résultats époustouflants !

88. - skimium.com - +9,3% en conversion — +7,8% en conversion desktop — Évolution observée entre les périodes du 13/10 au 05/03/2012 et du 11/10 au 03/03/2015 sur les supports tablettes et mobiles. — Outil de mesure : Google analytics

89. - skimium.com - +104 % en conversion mobile — +90 % en conversion tablette — +7,8% en conversion desktop Évolution observée entre les périodes du 13/10 au 05/03/2012 et du 11/10 au 03/03/2015 sur les supports tablettes et mobiles. — Outil de mesure : Google analytics

90. - skimium.com - +30 % — cest le pourcentage de la croissance CA versus N-1 apportée par le responsive. SI on part du principe que limpact de conversion & de CA que lon visualise sur les desktops aurait été le même pour le trafic mobile. — Évolution observée entre les périodes du 13/10 au 05/03/2012 et du 11/10 au 03/03/2015 sur les supports tablettes et mobiles. — Outil de mesure : Google analytics

91. et beaucoupd’autres à suivre…