Conférence Mobile : 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=2160 Voir la vidéo : http://vimeo.com/32189113 Télécharger les slides seuls sur altima.fr : http://www.altima.fr/upload/pdf/Mobile-comment-y-aller-sans-le-regretter-101111.pdf Photos : http://www.facebook.com/media/set/?set=a.260272514024698.80532.136958503022767&type=1

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. $265 000
Avion Piper PA-46-310P Malibu de 1985
l’objet le plus cher vendu sur eBay mobile en 2010
Mashable

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

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

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

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

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

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

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

18. Part de marché des OS smartphones
France + Allemagne + Italie + Espagne + Royaume Uni
6 %4 %
8 % Apple
31 %
Android
24 %
Symbian
29 %
Apple Symbian Android Blackberry Microsoft autres
Comscore août 2011

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

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

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

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

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

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

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

27. mobile
pourquoi
s’en méfier ?

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

29. 1- développement

31. 2- publication
sur le store

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

35. 460 000
applis sur l’AppStore
320 000
applis sur AndroidMarket
Research2Guidance - septembre 2011

36. 28
appliseninstallées
moyenne
Google Think Mobile

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

38. 4- utilisation
par les utilisateurs

39. 28
appliseninstallées
moyenne
RAPPEL
Google Think Mobile

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

41. 5- maintenance

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

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

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

45. Retour à la case
départ !

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

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

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

49. #fail

53. les applis
ne sont pas
magiques !

57. #fail

60. #fail

63. #fail

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

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

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

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

68. #fail

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

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

71. sc oo p!
les
internautes…
surfent !

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

75. tv
tablette
e-readers
console
smartphones

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

77. BlackBerry PlayBook
1024 x 600 px

78. Sony Tablet P
Double screen

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

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

81. desktop mobile iPad iPhone Android Win 7 BlackBerry
www.ebay.com mobileweb.ebay.com
eBay extensions
& add-on m.ebay.com

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

84. mobile
le point sur
le webresponsive

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

87. webresponsive
un seul site pour tous les devices

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

89. @mediaqueries

90. résolution
d’écran

91. nombre
de couleurs

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

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

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

95. Food Sense
http://foodsense.is

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

97. showtime!

99. desktop
desktop
sma tablet
rtph tablet
one

101. avantages
et inconvénients

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

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

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

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

106. 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...)

107. 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)

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

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

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

111. 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).

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

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

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

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

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

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

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

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

120. www

121. www + app

122. www + app + m.

123. respon
www + app + m. + sive

124. respon
app + sive

125. respon
app + sive m.
+

126. respon
sive

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

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

129. merci !
slecouturier@altima.fr
© altima 11/2011