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

2. mobile
Pourquoi y aller ?
Pourquoi s’en méfier ?
Le point sur le Webresponsive

3. mobile
pourquoi
y aller ?

4. €500
millions
m-commerce en France en 2010
= 500 000 000 €
Xerfi

5. €13
milliards
m-commerce en France en 2015
= 13 000 000 000 €
Xerfi

6. $600
millions
chiffre d’affaire m-commerce ebay en 2009
= $600 000 000
eBay / Mobile Commerce Daily

7. $2
milliards
chiffre d’affaire m-commerce ebay en 2010
= $2 000 000 000
eBay / Mobile Commerce Daily

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

9. $5
milliards
chiffre d’affaire m-commerce ebay en 2011
= $5 000 000 000
eBay / Mobile Commerce Daily

10. $8
milliards
chiffre d’affaire m-commerce ebay en 2012
= $8 000 000 000
eBay / John Donahoe - CES Las Vegas - janvier 2012

11. $265 000
Avion Piper PA-46-310P Malibu de 1985
l’objet le plus cher vendu sur eBay mobile en 2010
Mashable

12. 3,5
Ferrari / mois
vendues sur eBay mobile en 2011
eBay / Mobile Commerce Daily - janvier 2011

13. 1”= 1
1 vente par seconde
sur eBay mobile UK en 2011
eBay / Mobile Commerce Daily - octobre 2011

14. Taux d’équipement smartphone
Australie 37
Suisse 34
Norvège 33
Espagne 33
Etats Unis 31
Danemark 30
Royaume Uni 30
Ré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

15. 6
millions
se connectent
tous les jours
Médiamétrie - octobre 2011

16. 27%
de smartphones
en France en 2011
Google think mobile - 2011

17. 40%
de smartphones
en France en 2011
Médiamétrie - octobre 2011

18. 12
millions
de smartphones vendus en France en 2011
GfK- octobre 2011

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

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

21. mobile vs. desktop
2007-2015 (estimations)
!"###
$"%##
./012/10*34124*5667
$"!##
&##
689:;1*./012/10*34124
<14=08>*./012/10*34124
'##
#
!##()**!##&)**!##+)**!#$#)**!#$$)**!#$!)**!#$,)**!#$')**!#$-)
Stanley Research

22. 39%
utilisent leur smartphone
aux toilettes
Google think mobile - 2011

23. 24%
ont fait un achat
sur leur smartphone*
* hors applis et téléchargements - FEVAD juin 2011

24. 47%
utilisent leur smartphone
pour préparer un achat
FEVAD juin 2011

25. 35%
ont utilisé leur smartphone
dans un magasin
FEVAD juin 2011

26. 36
pour regarder le prix
dans une autre
% enseigne
29
%
pour géolocaliser
d’autres enseignes
26
%
pour montrer le produit
au vendeur
FEVAD juin 2011

27. Les mobinautes
sont là,
mais pas encore
tous les
e-commerçants…

28. mobile
pourquoi
s’en méfier ?

29. S'il vous plaît...
dessine-moi une appli

30. 1- développement

32. 2- publication
sur le store

35. 3- téléchargement
par les utilisateurs

36. 588 492
applis sur l’AppStore
405 241
applis sur AndroidMarket
148apps.biz / AppBrain 14 mars 2012

37. 28
appliseninstallées
moyenne
Google Think Mobile

38. 80%
des applis de marque
n’atteignent pas 1000 téléchargements
Deloitte

39. 4- utilisation
par les utilisateurs

40. 28
appliseninstallées
moyenne
RAPPEL
Google Think Mobile

41. 11
utilisées
dans le dernier mois
Google Think Mobile

42. 5- maintenance

43. 24%
des applis sont supprimées
de l’AppStore
(37% sur AndroidMarket)
Research2Guidance

44. 24%
des applis sont supprimées
de l’AppStore
(37% sur AndroidMarket)
Research2Guidance

45. n°1
1er motif de suppression :
problème d’incompatibilité
avec le dernier OS
Research2Guidance

46. Retour à la case
départ !

47. maintenance d’une appli
=
nombre de versions du device
x
versions de l’OS
x
versions de l’appli

48. l’iPad =
sauveur de la presse
TOUTE LA PRESSE en mai 2010

49. 30%
commission d’Apple sur les abonnements
Apple

50. #fail

54. les applis
ne sont pas
magiques !

59. #fail

62. #fail

65. #fail

73. #fail

74. 22%
des e-commerçants mobile
(sites + apps)
CCM Benchmark - juillet 2011

75. =78%
des e-commerçants PAS mobile
(sites + apps)
CCM Benchmark - juillet 2011

76. 40%
des mobinautes
préfèrent acheter sur le site
17% via une appli
IAB M-Commerce 2011

77. 31%
des mobinautes
regrettent que les sites
ne soient pas optimisés
pour mobile
Consensus / WorldPay - Octobre 2011

78. #fail

79. 53%
des smartphonautes
utilisent des applis
comScore MobiLens - Avril 2011

80. 53%
des smartphonautes
browsent
comScore MobiLens - Avril 2011

81. sc oo p!
les
internautes…
surfent !

82. Activités sur smartphone
Utilisation browser vs. app (US)
Browser Apps
Acheter 73 27
Rechercher 63 37
Se divertir 60 40
S’informer 39 61
0 25 50 75 100
Yahoo! / Ipsos - Mobile Modes: How to Connect with Mobile Consumers - août 2011

85. tv
tablette
e-readers
console
smartphones

86. Apple iPad 2 Samsung Galaxy Tab 10.1
1024 x 768 px 1280 x 800 px

87. iPad 3
2048 x 1536 px

88. BlackBerry PlayBook
1024 x 600 px

89. Kindle fire
1024 x 600 px
+ server side optimization

90. Sony Xperia S Sony Xperia P Sony Xperia U
854 x 480 px 960 x 540 px 854 x 480 px

91. Sony Tablet P
Double screen

92. Sony Tablet P
Double screen
2 x 1024 x 480 px

93. desktop mobile iPad iPhone Androïd Win BlackBerry
www.ebay.com mobileweb.ebay.com
eBay extensions
& add-on m.ebay.com

95. la course
aux devices
est perdue
d’avance !?

96. mobile
le point sur
le webresponsive

97. « 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.

98. webresponsive
un seul site pour tous les devices

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

100. @mediaqueries

101. résolution
d’écran

102. nombre
de couleurs

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

104. 1920 px
1280px
1024px
800px des résolutions d’écrans
structurantes
640px (surtout la largeur !)
320px

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

106. Food Sense
http://foodsense.is

107. Andersson-Wise Architects
http://www.anderssonwise.com

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

109. showtime!

111. desktop
desktop
sma tablet
rtph tablet
one

113. avantages
et inconvénients

114. avantage
Servir plus de clients
plus souvent
Plus de clients peuvent faire leur
shopping quand ils veulent
où ils veulent et quelque soit
le device qu’ils choisissent

115. avantage
Nouvelles fonctionnalités
partout, tout de suite
Mise en place des évolutions
du site sur tous les devices
au même moment

116. avantage
Coût de set-up
Pas d’investissement dans
le développement et la recette
d’un site spécifique à chaque
catégorie de devices.

117. avantage
Coût d’exploitation
Pas de développement/recette
en double des évolutions du site web
dans les sites spécifiques
+ un seul site à maintenir (TMA)

118. avantage
Une seule URL
Bénéfique pour le SEO, le SMO,
l’e-mail marketing
et les usages cross devices
(pas de problème de 404,
de redirection vers la homepage...)

119. avantage
Future proof
Le site sera conçu pour s’adapter
à différentes largeurs d’écrans et
sera ainsi déjà prêt pour répondre
aux évolutions des devices et des
tendances d’usage (ex : web sur TV)

120. avantage
Les avantages du web
vs. apps natives
Pas de download dans un store,
instantanéité des mises à jour,
indépendance, 1 seule version
à supporter, SEO-friendly,
e-mailing-friendly.

121. inconvénients
Expérience adaptée
vs. 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

122. inconvénients
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.

123. inconvénients
Pas universel
Cette solution ne répondra pas
à tous les features phones,
principalement ceux de plus de 3 ans
(Motorola Razr, anciens BlackBerry ou Nokia).

124. inconvénients
Niveau de compétence
Restreint le nombre de prestataires
capables d’intervenir sur le front-end
à ceux disposant d’une vraie
expertise HTML/CSS/JS
et peut limiter le développement
low-cost.

125. inconvénients
Restreint les plug-ins externes
à ceux adaptés au mobile
84 Kb,
= 10 requêtes http,
1,340 seconde

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

127. desktop TV
desktop
feat
sma
tablet
ures
pho
ne rtph
one

128. desktop TV
desktop
feat
sma
tablet
ures
pho
ne rtph
one

129. desktop TV
desktop
feat
sma
tablet
ures
pho
ne rtph
one

130. desktop TV
desktop
feat
sma
tablet
ures
pho
ne rtph
one

131. desktop TV
desktop
feat
sma
tablet
ures
pho
ne rtph
one

132. desktop TV
desktop
feat
sma
tablet
ures
pho
ne rtph
one

133. www

134. www + app

135. www + app + m.

136. respon
www + app + m. + sive

137. respon
app + sive

138. respon
app + sive m.
+

139. respon
sive

140. le responsive
n’est pas
forcémment
exclusif !

141. rendre son site
mobile-compatible
ou mobile-optimized
est devenu une dette.

142. merci !
slecouturier@altima.fr
© altima 03/2012