Le téléchargement de votre SlideShare est en cours. ×
0
web responsive & e-commerceun seul site pour tous les devicespar Gregory MOIGNARDDirecteur associé
L’agenceQui sommes nous ?
ans                       15       d’expérience                                digitale                           %    cou...
we ♥ e-commerce
Web Responsiveet e-commerceUn seul site pour tous les devices
au menuSteve Jobs + Karl Lagerfeld+ les septs nains + Mickey …+ des retours d’expérience !+ des surprises pour ceux qui re...
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...
The Boston Globe http://www.bostonglobe.com/
salomon.com
résolutions  d’écran
résolutionsd’écran
1920 px1280px1024px800px     des résolutions d’écran          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éececi est un piège ... ceci n’est pas qu’une tablette
périphériques d’entréeremote… ?
Pourquoic’est à la mode ?
Je kiffele responsive
le m-commerce =nouvel eldorado du web ?m-commerce en France = 13,4 milliards d’euros en 2015Xerfi 03/2012Dans 5 ans, 19,2 ...
48 md’usagers mobile    en France      Comscore - mars 2013
53%  sont équipésd’un smartphone     Comscore - mars 2013
14%des français ont une tablette         (x2 vs n-1)            ComScore - mars 2013
la mobiltéC’est aussi passer de mon mobile à ma tabletteou de ma tablette à mon mobile
la mobiltéC’est aussi passer de mon mobile à ma tablette   ComScore - mars 2013ou de ma tablette à mon mobile
- MOBILE WORLD CONGRESS 2013 -répond aux évolutions du marchédes nouveaux devices tous les mois
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
woow génial ! …
oui mais y’atoujours un mais ...
expérience adaptéevs. expérience naturelle du device                         —      Création d’une expérience homogène sur...
pas de 100% pixel perfect                    —     Le layout sera un peu différent      sur chaque device et il ne sera   ...
une recette exhaustive                        —Il est important de bien définir ses devices cibles   en amont pour réussir...
compétence métier                           —    Restreint le nombre de prestataires capables    d’intervenir sur le front...
Mais…est-ce vraimentune mode ?
Délivrerla meilleureexpérienceà ses clientsn’est pas une mode,c’est une dette !
50%     des mobinautes       ne reviendront  plus sur un site mobile sice dernier n’est pas optimisé
#fail
#fail
Pourquoipas encorede sitese-commerceresponsive ?
Pourquoipas encorede GROS sitese-commerceresponsive ?
performances
performance matters!                   100 ms d’attente = 1 % de vente en moins                   (manque à gagner potenti...
performance matters!          Source : http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
performanceréseau Edge vs. 3G ou WiFi
performancemode off-line ou asynchrone
frameworket architecturetechnique
Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby                                                                  ...
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...
j’ai déjàun siteet des applis !
j’ai déjà un siteet/ou des applis !• comment transformer mon site weben responsive sans tout refondre ?• dois-je conserver...
comprendre ou définirl’écosytème digital• à quoi sert mon site web…• à quoi servent mes applis…• qui sont mes clients…• qu...
« Responsive design is a clever  solution for saving time andeffort but not the best solution  for serving all experience ...
le responsive c’est bien…mais pas que.
desktop   TV                       desktopfeat       sma              tableturespho ne    rtph       one
desktop   TV                       desktopfeat       sma              tableturespho ne    rtph       one
desktop   TV                       desktopfeat       sma              tableturespho ne    rtph       one
desktop   TV                       desktopfeat       sma              tableturespho ne    rtph       one
desktop   TV                       desktopfeat       sma              tableturespho ne    rtph       one
desktop   TV                       desktopfeat       sma              tableturespho ne    rtph       one
www
www + app
www + app +   m.
responwww + app +   m. +   sive
responapp +   sive
responapp +   sive         m.                 +
responsive
showtime!
Case-studiesaltima°
case-studyrelay.com
case-study• un site web pour inscription et  commande de magazines• + des applis : pour la consultation• 95 % d’utilisatio...
case-studywanimo.com
- wanimo.com -                                        +12,4%                                        valeur de la visite   ...
- wanimo.com -                                          +200 %                                     en conversion mobile & ...
case-studyskimium.com
case-study• un site web pour commander• pas de site mobile ni d’appli• un service (location de skis)  propice à la mobilit...
skimium.com des résultats époustouflants !
- skimium.com -                                                                 +9,3%                                     ...
- skimium.com -                                                                   +104 %                                  ...
- skimium.com -                                                          +30 %                                            ...
et beaucoupd’autres à suivre…
merci ! gmoignard@altima.fr    www.altima.fr@altima - @Greg_Moignard       © altima 03/2013
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Prochain SlideShare
Chargement dans... 5
×

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

6,194

Published on

Présentation donnée par Grégory Moignard, directeur associé d'altima°.
(cette présentation a été diffusé en sept 2012 lors du salon e-commerce, cette dernière version contient des résultats chiffrés sur les sites dernièrement lancés en mode responsive)

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
2 commentaires
8 mentions J'aime
Statistiques
Remarques
Aucun téléchargement
Vues
Total des vues
6,194
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
8
Actions
Partages
0
Téléchargements
99
Commentaires
2
J'aime
8
Ajouts 0
No embeds

No notes for slide

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

  1. 1. web responsive & e-commerceun seul site pour tous les devicespar Gregory MOIGNARDDirecteur associé
  2. 2. L’agenceQui sommes nous ?
  3. 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. 4. we ♥ e-commerce
  5. 5. Web Responsiveet e-commerceUn seul site pour tous les devices
  6. 6. au menuSteve Jobs + Karl Lagerfeld+ les septs nains + Mickey …+ des retours d’expérience !+ des surprises pour ceux qui restentjusqu’au bout…
  7. 7. c’est quoile Web Responsive ?
  8. 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. 9. webresponsiveun seul site pour tous les devices
  10. 10. Le « Web Responsive » : c’est quoi ? fluid layout mediaqueries adaptative medias server optimization
  11. 11. The Boston Globe http://www.bostonglobe.com/
  12. 12. salomon.com
  13. 13. résolutions d’écran
  14. 14. résolutionsd’écran
  15. 15. 1920 px1280px1024px800px des résolutions d’écran 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éececi est un piège ... ceci n’est pas qu’une tablette
  21. 21. périphériques d’entréeremote… ?
  22. 22. Pourquoic’est à la mode ?
  23. 23. Je kiffele responsive
  24. 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. 25. 48 md’usagers mobile en France Comscore - mars 2013
  26. 26. 53% sont équipésd’un smartphone Comscore - mars 2013
  27. 27. 14%des français ont une tablette (x2 vs n-1) ComScore - mars 2013
  28. 28. la mobiltéC’est aussi passer de mon mobile à ma tabletteou de ma tablette à mon mobile
  29. 29. la mobiltéC’est aussi passer de mon mobile à ma tablette ComScore - mars 2013ou de ma tablette à mon mobile
  30. 30. - MOBILE WORLD CONGRESS 2013 -répond aux évolutions du marchédes nouveaux devices tous les mois
  31. 31. SEO friendly
  32. 32. maintenancesimplifiée site mobile site web
  33. 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. 34. déploiement simultanédes updates
  35. 35. futureproof!
  36. 36. même plus peurdes keynotes
  37. 37. woow génial ! …
  38. 38. oui mais y’atoujours un mais ...
  39. 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. 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. 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. 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. 43. Mais…est-ce vraimentune mode ?
  44. 44. Délivrerla meilleureexpérienceà ses clientsn’est pas une mode,c’est une dette !
  45. 45. 50% des mobinautes ne reviendront plus sur un site mobile sice dernier n’est pas optimisé
  46. 46. #fail
  47. 47. #fail
  48. 48. Pourquoipas encorede sitese-commerceresponsive ?
  49. 49. Pourquoipas encorede GROS sitese-commerceresponsive ?
  50. 50. performances
  51. 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. 52. performance matters! Source : http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  53. 53. performanceréseau Edge vs. 3G ou WiFi
  54. 54. performancemode off-line ou asynchrone
  55. 55. frameworket architecturetechnique
  56. 56. Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby #fail http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html
  57. 57. frameworket architecture technique• comment s’effectuele rendering des pages HTML ?• framework commun web et mobile ?• quels formats d’images ?
  58. 58. performanceet hébergement
  59. 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. 60. j’ai déjàun siteet des applis !
  61. 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. 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. 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. 64. le responsive c’est bien…mais pas que.
  65. 65. desktop TV desktopfeat sma tableturespho ne rtph one
  66. 66. desktop TV desktopfeat sma tableturespho ne rtph one
  67. 67. desktop TV desktopfeat sma tableturespho ne rtph one
  68. 68. desktop TV desktopfeat sma tableturespho ne rtph one
  69. 69. desktop TV desktopfeat sma tableturespho ne rtph one
  70. 70. desktop TV desktopfeat sma tableturespho ne rtph one
  71. 71. www
  72. 72. www + app
  73. 73. www + app + m.
  74. 74. responwww + app + m. + sive
  75. 75. responapp + sive
  76. 76. responapp + sive m. +
  77. 77. responsive
  78. 78. showtime!
  79. 79. Case-studiesaltima°
  80. 80. case-studyrelay.com
  81. 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. 82. case-studywanimo.com
  83. 83. - wanimo.com - +12,4% valeur de la visite — +6,7% panier moyen — Après 22 jours d’exploitation
  84. 84. - wanimo.com - +200 % en conversion mobile & tablette — 5,4 % versus 2,68 % — Après 22 jours d’exploitation
  85. 85. case-studyskimium.com
  86. 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. 87. skimium.com des résultats époustouflants !
  88. 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. 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. 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. 91. et beaucoupd’autres à suivre…
  92. 92. merci ! gmoignard@altima.fr www.altima.fr@altima - @Greg_Moignard © altima 03/2013
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×