1. web responsive & e-commerce
un seul site pour tous les devices
par Gregory MOIGNARD
Directeur associé

2. L’agence
Qui sommes nous ?

3. ans
15 d’expérience
digitale
% couverture
100 métiers
e-commerce
Lille • Paris • Lyon
East
220 collaborateurs
passionnés
agences
7 Lille, Paris, Lyon, Shanghai,
Pékin, Moscou, Rabat

4. we ♥ e-commerce

6. Web Responsive
et e-commerce
Un seul site pour tous les devices

7. au menu
Steve Jobs + Karl Lagerfeld
+ les septs nains + Mickey …
+ des retours d’expérience !
+ des surprises pour ceux qui restent
jusqu’au bout…

8. c’est quoi
le Web Responsive ?

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

12. webresponsive
un seul site pour tous les devices

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

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

15. salomon.com

16. résolutions
d’écran

17. résolutions
d’écran

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

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

20. des résolutions réelles
et des résolutions s(t)imulées
retina displays

21. périphériques
d’entrée

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

23. périphériques d’entrée
ceci est un piège ... ceci n’est pas qu’une tablette

24. périphériques d’entrée
remote… ?

25. Pourquoi
c’est à la mode ?

26. Je kiffe
le responsive

27. le m-commerce =
nouvel eldorado du web ?
m-commerce en France = 13,4 milliards d’euros en 2015
Xerfi 03/2012
Dans 5 ans, 19,2 milliards d'euros seront générés
grâce au m-commerce dans sept pays d'Europe,
dont 3,1 en France. Forrester 07/2012

28. 48 m
d’usagers mobile
en France
Comscore - mars 2013

29. 53%
sont équipés
d’un smartphone
Comscore - mars 2013

30. 14%
des français ont une tablette
(x2 vs n-1)
ComScore - mars 2013

31. la mobilté
C’est aussi passer de mon mobile à ma tablette
ou de ma tablette à mon mobile

32. la mobilté
C’est aussi passer de mon mobile à ma tablette ComScore - mars 2013
ou de ma tablette à mon mobile

33. - MOBILE WORLD CONGRESS 2013 -
répond aux évolutions du marché
des nouveaux devices tous les mois

34. SEO friendly

35. maintenance
simplifiée
site mobile
site web

36. déploiement simultané
des updates
desktop mobile iPad iPhone Androïd Win BlackBerry
www.ebay.com mobileweb.ebay.com
eBay extensions
& add-on m.ebay.com

37. déploiement simultané
des updates

38. futureproof!

39. même plus peur
des keynotes

40. woow génial ! …

41. oui mais y’a
toujours un mais ...

42. 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
—

43. 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.
—

44. 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.
—

45. compétence métier
—
Restreint le nombre de prestataires capables
d’intervenir sur le front-end à ceux disposant
d’une vraie expertise HTML/CSS/JS, de conception et
d’optimisation de la performance.
—

46. Mais…
est-ce vraiment
une mode ?

47. Délivrer
la meilleure
expérience
à ses clients
n’est pas une mode,
c’est une dette !

48. 50%
des mobinautes
ne reviendront
plus sur un site mobile si
ce dernier n’est pas optimisé

49. #fail

53. #fail

54. Pourquoi
pas encore
de sites
e-commerce
responsive ?

55. Pourquoi
pas encore
de GROS sites
e-commerce
responsive ?

56. performances

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

58. performance matters!
Source : http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

59. performance
réseau Edge vs. 3G ou WiFi

60. performance
mode off-line ou asynchrone

61. framework
et architecture
technique

63. Comparison of Mobile & Desktop RWD Views
By Jason Grigsby
#fail
http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html

64. framework
et architecture technique
• comment s’effectue
le rendering des pages HTML ?
• framework commun web et mobile ?
• quels formats d’images ?

65. performance
et hébergement

66. performance
et 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 ?

67. j’ai déjà
un site
et des applis !

68. j’ai déjà un site
et/ou des applis !
• comment transformer mon site web
en responsive sans tout refondre ?
• dois-je conserver mes applis ?
• comment je fais pour scanner
un code barre sans appli ?

69. comprendre ou définir
l’é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…

70. « Responsive design is a clever
solution for saving time and
effort but not the best solution
for serving all experience »
@bkwalker
pleinière 1to1

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

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

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

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

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

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

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

78. www

79. www + app

80. www + app + m.

81. respon
www + app + m. + sive

82. respon
app + sive

83. respon
app + sive m.
+

84. respon
sive

85. showtime!

86. Case-studies
altima°

87. case-study
relay.com

88. 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é

90. case-study
wanimo.com

92. - wanimo.com -
+12,4%
valeur de la visite
—
+6,7%
panier moyen
—
Après 22 jours d’exploitation

93. - wanimo.com -
+200 %
en conversion mobile & tablette
—
5,4 %
versus 2,68 %
—
Après 22 jours d’exploitation

94. case-study
skimium.com

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

96. skimium.com des résultats époustouflants !

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

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

99. - skimium.com -
+30 %
—
c'est le pourcentage de la croissance CA versus N-1 apportée par le
responsive.
SI on part du principe que l'impact de conversion & de CA que l'on
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

100. et beaucoup
d’autres à suivre…

102. merci !
gmoignard@altima.fr
www.altima.fr
@altima - @Greg_Moignard
© altima 03/2013