mobilePourquoi y aller ?Pourquoi s’en méfier ?Le point sur le Webresponsive
mobilepourquoi y aller ?
€500millionsm-commerce en France en 2010= 500 000 000 €             Xerfi
€13milliards m-commerce en France en 2015= 13 000 000 000 €              Xerfi
$600   millionschiffre d’affaire m-commerce ebay en 2009    = $600 000 000              eBay / Mobile Commerce Daily
$2 milliardschiffre d’affaire m-commerce ebay en 2010   = $2 000 000 000              eBay / Mobile Commerce Daily
«    Il est incroyable de penser       que $2 milliards de C.A.ont été générés par une plateforme   qui n’existait pas il ...
$5 milliardschiffre d’affaire m-commerce ebay en 2011  = $5 000 000 000              eBay / Mobile Commerce Daily
$8 milliardschiffre d’affaire m-commerce ebay en 2012  = $8 000 000 000          eBay / John Donahoe - CES Las Vegas - jan...
$265 000Avion Piper PA-46-310P Malibu de 1985 l’objet le plus cher vendu sur eBay mobile en 2010                       Mas...
3,5Ferrari / mois vendues sur eBay mobile en 2011       eBay / Mobile Commerce Daily - janvier 2011
1”= 11 vente par secondesur eBay mobile UK en 2011       eBay / Mobile Commerce Daily - octobre 2011
Taux d’équipement smartphone         Australie                                                                            ...
6millionsse connectenttous les jours    Médiamétrie - octobre 2011
27%de smartphonesen France en 2011     Google think mobile - 2011
40%de smartphonesen France en 2011     Médiamétrie - octobre 2011
12   millionsde smartphones vendus en France en 2011                GfK- octobre 2011
Part de marché des OS smartphones   France + Allemagne + Italie + Espagne + Royaume Uni                             5 %4 %...
Consommation de bande passante  France + Allemagne + Italie + Espagne + Royaume Uni                              7 %      ...
mobile vs. desktop                                              2007-2015 (estimations)                      !"###        ...
39%utilisent leur smartphone      aux toilettes          Google think mobile - 2011
24% ont fait un achatsur leur smartphone*     * hors applis et téléchargements - FEVAD juin 2011
47%utilisent leur smartphone  pour préparer un achat           FEVAD juin 2011
35%ont utilisé leur smartphone     dans un magasin            FEVAD juin 2011
36     pour regarder le prix     dans une autre %   enseigne29 %     pour géolocaliser     d’autres enseignes26 %     pour...
Les mobinautes    sont là, mais pas encore    tous lese-commerçants…
mobilepourquois’en méfier ?
Sil vous plaît...dessine-moi une appli
1- développement
2- publicationsur le store
3- téléchargementpar les utilisateurs
588 492  applis sur l’AppStore 405 241applis sur AndroidMarket        148apps.biz / AppBrain 14 mars 2012
28appliseninstallées        moyenne      Google Think Mobile
80%des applis de marquen’atteignent pas 1000 téléchargements                 Deloitte
4- utilisationpar les utilisateurs
28appliseninstallées        moyenne                            RAPPEL      Google Think Mobile
11utiliséesdans le dernier mois     Google Think Mobile
5- maintenance
24%des applis sont supprimées      de l’AppStore   (37% sur AndroidMarket)          Research2Guidance
24%des applis sont supprimées      de l’AppStore   (37% sur AndroidMarket)          Research2Guidance
n°1 1er motif de suppression :problème d’incompatibilité     avec le dernier OS          Research2Guidance
Retour à la casedépart !
maintenance d’une appli             =nombre de versions du device             x     versions de l’OS             x    vers...
l’iPad =sauveur de la presse       TOUTE LA PRESSE en mai 2010
30%commission d’Apple sur les abonnements                  Apple
#fail
les applisne sont pasmagiques !
#fail
#fail
#fail
#fail
22%des e-commerçants mobile       (sites + apps)         CCM Benchmark - juillet 2011
=78%des e-commerçants PAS mobile        (sites + apps)           CCM Benchmark - juillet 2011
40%      des mobinautespréfèrent acheter sur le site     17% via une appli            IAB M-Commerce 2011
31%  des mobinautesregrettent que les sitesne soient pas optimisés      pour mobile        Consensus / WorldPay - Octobre ...
#fail
53%des smartphonautes utilisent des applis       comScore MobiLens - Avril 2011
53%des smartphonautes     browsent      comScore MobiLens - Avril 2011
sc oo p!      lesinternautes…   surfent !
Activités sur smartphone                     Utilisation browser vs. app (US)                              Browser        ...
tv          tablette                                   e-readersconsole                     smartphones
Apple iPad 2    Samsung Galaxy Tab 10.11024 x 768 px       1280 x 800 px
iPad 32048 x 1536 px
BlackBerry PlayBook    1024 x 600 px
Kindle fire1024 x 600 px+ server side optimization
Sony Xperia S   Sony Xperia P   Sony Xperia U 854 x 480 px    960 x 540 px    854 x 480 px
Sony Tablet PDouble screen
Sony Tablet P  Double screen2 x 1024 x 480 px
desktop             mobile         iPad   iPhone   Androïd   Win   BlackBerrywww.ebay.com      mobileweb.ebay.comeBay exte...
la courseaux devicesest perdued’avance !?
mobilele point surle webresponsive
« Web Responsive » : c’est quoi ?     Une nouvelle démarche de design de site web      qui s’appuie sur la capacité des na...
webresponsiveun seul site pour tous les devices
« Web Responsive » : c’est quoi ?               fluid layout               mediaqueries               adaptative medias   ...
@mediaqueries
résolutiond’écran
nombrede couleurs
périphériques d’entrée    touch / keyboard…
1920 px1280px1024px800px     des résolutions d’écrans          structurantes640px     (surtout la largeur !)320px
1920 px                                                       TV1280px1024px                                              ...
Food Sensehttp://foodsense.is
Andersson-Wise Architectshttp://www.anderssonwise.com
The Boston Globehttp://www.bostonglobe.com
showtime!
desktop       desktopsma                        tabletrtph                                tabletone
avantageset inconvénients
avantageServir plus de clientsplus souventPlus de clients peuvent faire leurshopping quand ils veulentoù ils veulent et qu...
avantageNouvelles fonctionnalitéspartout, tout de suiteMise en place des évolutionsdu site sur tous les devicesau même mom...
avantageCoût de set-upPas d’investissement dansle développement et la recetted’un site spécifique à chaquecatégorie de dev...
avantageCoût d’exploitationPas de développement/recetteen double des évolutions du site webdans les sites spécifiques+ un ...
avantageUne seule URLBénéfique pour le SEO, le SMO,l’e-mail marketinget les usages cross devices(pas de problème de 404,de...
avantageFuture proofLe site sera conçu pour s’adapterà différentes largeurs d’écrans etsera ainsi déjà prêt pour répondrea...
avantageLes avantages du webvs. apps nativesPas de download dans un store,instantanéité des mises à jour,indépendance, 1 s...
inconvénientsExpérience adaptéevs. expérience naturelle du deviceCréation d’une expériencehomogène sur tous les devicesmai...
inconvénientsPas de 100% pixel perfectLe layout sera un peu différentsur chaque device et il ne seradonc pas possible d’as...
inconvénientsPas universelCette solution ne répondra pasà tous les features phones,principalement ceux de plus de 3 ans(Mo...
inconvénientsNiveau de compétenceRestreint le nombre de prestatairescapables d’intervenir sur le front-endà ceux disposant...
inconvénientsRestreint les plug-ins externesà ceux adaptés au mobile            84 Kb,          = 10 requêtes http,       ...
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
le responsive   n’est pas forcémment   exclusif !
rendre son site mobile-compatibleou mobile-optimizedest devenu une dette.
merci !slecouturier@altima.fr       © altima 03/2012
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Mobile : comment y aller sans le regretter ? à Lyon
Prochain SlideShare
Chargement dans…5
×

Mobile : comment y aller sans le regretter ? à Lyon

2 305 vues

Publié le

Conférence Mobile au MAC de Lyon le 15 mars 2012 : Comment y aller sans le regretter ?
Par Stéphane Lecouturier, Directeur Création & User Experience, altima°

Application, site mobile, iPhone, Android, iPad, tablette... Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup mois. Clarifiez votre vision du mobile en 60 minutes de démêlage de l’univers bouillonnant du cross-devices.

Au programme de cette conférence :

- Pourquoi faut-il absolument y aller ? (chiffres et retours d’expériences)
- Pourquoi faut-il s’en méfier ? (panorama des galères potentielles)
- Innovation : Web responsive (un seul site pour tous les devices), c’est quoi ? Comment ça marche ? (avantages et inconvénients)
- Démo d’un proto de site e-commerce responsive
- Échange avec Stéphane

En savoir plus : http://blog.altima.fr/?p=2364

Publié dans : Design
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 305
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
60
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Mobile : comment y aller sans le regretter ? à Lyon

  1. 1. mobilePourquoi y aller ?Pourquoi s’en méfier ?Le point sur le Webresponsive
  2. 2. mobilepourquoi y aller ?
  3. 3. €500millionsm-commerce en France en 2010= 500 000 000 € Xerfi
  4. 4. €13milliards m-commerce en France en 2015= 13 000 000 000 € Xerfi
  5. 5. $600 millionschiffre d’affaire m-commerce ebay en 2009 = $600 000 000 eBay / Mobile Commerce Daily
  6. 6. $2 milliardschiffre d’affaire m-commerce ebay en 2010 = $2 000 000 000 eBay / Mobile Commerce Daily
  7. 7. « Il est incroyable de penser que $2 milliards de C.A.ont été générés par une plateforme qui n’existait pas il y a 2 ans, et sur un terminal qui n’existait pas il y a 3 ans. Clare Gilmartin, VP of eBay Europe » eBay / Mobile Commerce Daily
  8. 8. $5 milliardschiffre d’affaire m-commerce ebay en 2011 = $5 000 000 000 eBay / Mobile Commerce Daily
  9. 9. $8 milliardschiffre d’affaire m-commerce ebay en 2012 = $8 000 000 000 eBay / John Donahoe - CES Las Vegas - janvier 2012
  10. 10. $265 000Avion Piper PA-46-310P Malibu de 1985 l’objet le plus cher vendu sur eBay mobile en 2010 Mashable
  11. 11. 3,5Ferrari / mois vendues sur eBay mobile en 2011 eBay / Mobile Commerce Daily - janvier 2011
  12. 12. 1”= 11 vente par secondesur eBay mobile UK en 2011 eBay / Mobile Commerce Daily - octobre 2011
  13. 13. Taux d’équipement smartphone Australie 37 Suisse 34 Norvège 33 Espagne 33 Etats Unis 31 Danemark 30 Royaume Uni 30République Tchèque 29 France 27 Corée du Sud 27 Russie 25 Italie 24 Autriche 21 Allemagne 18 Turquie 14 0 10 20 30 40 Google think mobile - 2011
  14. 14. 6millionsse connectenttous les jours Médiamétrie - octobre 2011
  15. 15. 27%de smartphonesen France en 2011 Google think mobile - 2011
  16. 16. 40%de smartphonesen France en 2011 Médiamétrie - octobre 2011
  17. 17. 12 millionsde smartphones vendus en France en 2011 GfK- octobre 2011
  18. 18. Part de marché des OS smartphones France + Allemagne + Italie + Espagne + Royaume Uni 5 %4 % 8 % Apple 30 % Android 27 % Symbian 26 % Apple Symbian Android Blackberry Microsoft autres Comscore octobre 2011
  19. 19. Consommation de bande passante France + Allemagne + Italie + Espagne + Royaume Uni 7 % 8 % Android 21 % Apple 3 % 61 % Apple Symbian Android Blackberry autres Comscore août 2011
  20. 20. mobile vs. desktop 2007-2015 (estimations) !"### $"%##./012/10*34124*5667 $"!## &## 689:;1*./012/10*34124 <14=08>*./012/10*34124 ## # !##()**!##&)**!##+)**!#$#)**!#$$)**!#$!)**!#$,)**!#$)**!#$-) Stanley Research
  21. 21. 39%utilisent leur smartphone aux toilettes Google think mobile - 2011
  22. 22. 24% ont fait un achatsur leur smartphone* * hors applis et téléchargements - FEVAD juin 2011
  23. 23. 47%utilisent leur smartphone pour préparer un achat FEVAD juin 2011
  24. 24. 35%ont utilisé leur smartphone dans un magasin FEVAD juin 2011
  25. 25. 36 pour regarder le prix dans une autre % enseigne29 % pour géolocaliser d’autres enseignes26 % pour montrer le produit au vendeur FEVAD juin 2011
  26. 26. Les mobinautes sont là, mais pas encore tous lese-commerçants…
  27. 27. mobilepourquois’en méfier ?
  28. 28. Sil vous plaît...dessine-moi une appli
  29. 29. 1- développement
  30. 30. 2- publicationsur le store
  31. 31. 3- téléchargementpar les utilisateurs
  32. 32. 588 492 applis sur l’AppStore 405 241applis sur AndroidMarket 148apps.biz / AppBrain 14 mars 2012
  33. 33. 28appliseninstallées moyenne Google Think Mobile
  34. 34. 80%des applis de marquen’atteignent pas 1000 téléchargements Deloitte
  35. 35. 4- utilisationpar les utilisateurs
  36. 36. 28appliseninstallées moyenne RAPPEL Google Think Mobile
  37. 37. 11utiliséesdans le dernier mois Google Think Mobile
  38. 38. 5- maintenance
  39. 39. 24%des applis sont supprimées de l’AppStore (37% sur AndroidMarket) Research2Guidance
  40. 40. 24%des applis sont supprimées de l’AppStore (37% sur AndroidMarket) Research2Guidance
  41. 41. n°1 1er motif de suppression :problème d’incompatibilité avec le dernier OS Research2Guidance
  42. 42. Retour à la casedépart !
  43. 43. maintenance d’une appli =nombre de versions du device x versions de l’OS x versions de l’appli
  44. 44. l’iPad =sauveur de la presse TOUTE LA PRESSE en mai 2010
  45. 45. 30%commission d’Apple sur les abonnements Apple
  46. 46. #fail
  47. 47. les applisne sont pasmagiques !
  48. 48. #fail
  49. 49. #fail
  50. 50. #fail
  51. 51. #fail
  52. 52. 22%des e-commerçants mobile (sites + apps) CCM Benchmark - juillet 2011
  53. 53. =78%des e-commerçants PAS mobile (sites + apps) CCM Benchmark - juillet 2011
  54. 54. 40% des mobinautespréfèrent acheter sur le site 17% via une appli IAB M-Commerce 2011
  55. 55. 31% des mobinautesregrettent que les sitesne soient pas optimisés pour mobile Consensus / WorldPay - Octobre 2011
  56. 56. #fail
  57. 57. 53%des smartphonautes utilisent des applis comScore MobiLens - Avril 2011
  58. 58. 53%des smartphonautes browsent comScore MobiLens - Avril 2011
  59. 59. sc oo p! lesinternautes… surfent !
  60. 60. Activités sur smartphone Utilisation browser vs. app (US) Browser Apps Acheter 73 27Rechercher 63 37Se divertir 60 40S’informer 39 61 0 25 50 75 100 Yahoo! / Ipsos - Mobile Modes: How to Connect with Mobile Consumers - août 2011
  61. 61. tv tablette e-readersconsole smartphones
  62. 62. Apple iPad 2 Samsung Galaxy Tab 10.11024 x 768 px 1280 x 800 px
  63. 63. iPad 32048 x 1536 px
  64. 64. BlackBerry PlayBook 1024 x 600 px
  65. 65. Kindle fire1024 x 600 px+ server side optimization
  66. 66. Sony Xperia S Sony Xperia P Sony Xperia U 854 x 480 px 960 x 540 px 854 x 480 px
  67. 67. Sony Tablet PDouble screen
  68. 68. Sony Tablet P Double screen2 x 1024 x 480 px
  69. 69. desktop mobile iPad iPhone Androïd Win BlackBerrywww.ebay.com mobileweb.ebay.comeBay extensions & add-on m.ebay.com
  70. 70. la courseaux devicesest perdued’avance !?
  71. 71. mobilele point surle webresponsive
  72. 72. « 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.
  73. 73. webresponsiveun seul site pour tous les devices
  74. 74. « Web Responsive » : c’est quoi ? fluid layout mediaqueries adaptative medias server optimization
  75. 75. @mediaqueries
  76. 76. résolutiond’écran
  77. 77. nombrede couleurs
  78. 78. périphériques d’entrée touch / keyboard…
  79. 79. 1920 px1280px1024px800px des résolutions d’écrans structurantes640px (surtout la largeur !)320px
  80. 80. 1920 px TV1280px1024px desktop desktop desktop800px640px tablet feat ures sma tab320px pho ne features rtph phone one smart tablet let phone
  81. 81. Food Sensehttp://foodsense.is
  82. 82. Andersson-Wise Architectshttp://www.anderssonwise.com
  83. 83. The Boston Globehttp://www.bostonglobe.com
  84. 84. showtime!
  85. 85. desktop desktopsma tabletrtph tabletone
  86. 86. avantageset inconvénients
  87. 87. avantageServir plus de clientsplus souventPlus de clients peuvent faire leurshopping quand ils veulentoù ils veulent et quelque soitle device qu’ils choisissent
  88. 88. avantageNouvelles fonctionnalitéspartout, tout de suiteMise en place des évolutionsdu site sur tous les devicesau même moment
  89. 89. avantageCoût de set-upPas d’investissement dansle développement et la recetted’un site spécifique à chaquecatégorie de devices.
  90. 90. avantageCoût d’exploitationPas de développement/recetteen double des évolutions du site webdans les sites spécifiques+ un seul site à maintenir (TMA)
  91. 91. avantageUne seule URLBénéfique pour le SEO, le SMO,l’e-mail marketinget les usages cross devices(pas de problème de 404,de redirection vers la homepage...)
  92. 92. avantageFuture proofLe site sera conçu pour s’adapterà différentes largeurs d’écrans etsera ainsi déjà prêt pour répondreaux évolutions des devices et destendances d’usage (ex : web sur TV)
  93. 93. avantageLes avantages du webvs. apps nativesPas de download dans un store,instantanéité des mises à jour,indépendance, 1 seule versionà supporter, SEO-friendly,e-mailing-friendly.
  94. 94. inconvénientsExpérience adaptéevs. expérience naturelle du deviceCréation d’une expériencehomogène sur tous les devicesmais qui n’est pas baséesur les principes ergonomiquespropres au device
  95. 95. inconvénientsPas de 100% pixel perfectLe layout sera un peu différentsur chaque device et il ne seradonc pas possible d’assurerune expérience 100% identiqueaux maquettes sur tous les devices.
  96. 96. inconvénientsPas universelCette solution ne répondra pasà tous les features phones,principalement ceux de plus de 3 ans(Motorola Razr, anciens BlackBerry ou Nokia).
  97. 97. inconvénientsNiveau de compétenceRestreint le nombre de prestatairescapables d’intervenir sur le front-endà ceux disposant d’une vraieexpertise HTML/CSS/JSet peut limiter le développementlow-cost.
  98. 98. inconvénientsRestreint les plug-ins externesà ceux adaptés au mobile 84 Kb, = 10 requêtes http, 1,340 seconde
  99. 99. le responsive c’est bien…mais pas que.
  100. 100. desktop TV desktopfeat sma tableturespho ne rtph one
  101. 101. desktop TV desktopfeat sma tableturespho ne rtph one
  102. 102. desktop TV desktopfeat sma tableturespho ne rtph one
  103. 103. desktop TV desktopfeat sma tableturespho ne rtph one
  104. 104. desktop TV desktopfeat sma tableturespho ne rtph one
  105. 105. desktop TV desktopfeat sma tableturespho ne rtph one
  106. 106. www
  107. 107. www + app
  108. 108. www + app + m.
  109. 109. responwww + app + m. + sive
  110. 110. responapp + sive
  111. 111. responapp + sive m. +
  112. 112. responsive
  113. 113. le responsive n’est pas forcémment exclusif !
  114. 114. rendre son site mobile-compatibleou mobile-optimizedest devenu une dette.
  115. 115. merci !slecouturier@altima.fr © altima 03/2012

×