Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

le

  • 4,253 vues

Présentation donnée par Grégory Moignard, directeur associé d'altima°. ...

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.

Statistiques

Vues

Total des vues
4,253
Vues sur SlideShare
3,093
Vues externes
1,160

Actions

J'aime
7
Téléchargements
87
Commentaires
2

6 Ajouts 1,160

http://www.scoop.it 621
http://www.formateurconsultant.com 520
http://www.twylah.com 6
http://voyelle.tumblr.com 6
https://twitter.com 4
http://srv07.admin.over-blog.com 3

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
  • Super présentation !!! Merci pour le partage !
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
  • Belle présentation sur le sujet du Responsive Design e-commerce : structurée et pédagogique.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

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

  • 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
  • 66. desktop TV desktopfeat sma tableturespho ne rtph one
  • 67. desktop TV desktopfeat sma tableturespho ne rtph one
  • 68. desktop TV desktopfeat sma tableturespho ne rtph one
  • 69. desktop TV desktopfeat sma tableturespho ne rtph one
  • 70. 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…
  • 92. merci ! gmoignard@altima.fr www.altima.fr@altima - @Greg_Moignard © altima 03/2013