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.

1. web responsive & e-commerce
un seul site pour tous les devices
par Stéphane Lecouturier
Directeur de Création et User Experience

2. L’agence
Qui sommes nous ?

3. couverture ans
100 %
métiers
e-commerce
15 d’expérience
digitale
4 agences
Lille, Paris, Lyon,
Shanghai soon…
220 collaborateurs
passionnés
we ♥ e-commerce

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

6. au menu
Steve Jobs + Mona Lisa
+ Bruce Lee + Karl Lagerfeld
+ les septs nains + George Clooney…
+ 2 SCOOPS !
+ des surprises pour ceux qui restent
jusqu’au bout…

7. c’est quoi
le 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.

10. webresponsive
un seul site pour tous les devices

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

12. Food Sense
http://foodsense.is

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

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

15. résolutions
d’écran

16. résolutions
d’écran

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

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

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

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

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

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

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

24. périphériques d’entrée
gesture, voice… ?

25. couleurs

26. nombre
de couleurs

27. couleurs
des profils colorimétriques différents ?

28. couleurs
des profils colorimétriques différents ?

29. performances

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

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

32. performance
mode off-line ou asynchrone

33. @mediaqueries

34. Be formless.
Shapeless, like water.
If you put water into a cup,
it becomes the cup.
You put water into a bottle
and it becomes the bottle.
You put it in a teapot,
it becomes the teapot.
Be water, my friend. Bruce Lee
http://www.youtube.com/watch?v=pGFf3SRP1bE

35. Pourquoi
c’est à la mode ?

36. Je kiffe
le responsive

37. le responsive =
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

38. SEO friendly

39. maintenance
simplifiée
site mobile
site web

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

41. déploiement simultané
des updates

42. futureproof!

43. même plus peur
des keynotes

44. Mais…
est-ce vraiment
une mode ?

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

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

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

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

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

50. #fail

54. #fail

58. #fail

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

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

61. work in progress !

62. framework
et architecture
technique

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

64. performance
et hébergement

65. 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 ?

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

67. architecture
de l’information

68. architecture
de l’information
• mes catégories produits
sont-elles adaptées au mobile ?
• mes contenus sont-ils adaptés
pour le mobile ?
• dois-je adapter mon site en fonction
du contexte ?

70. webresponsive
un seul site pour tous les devices
rappel !

72. 17 catégories
+ 102 sous-catégories
4 catégories
+ 35 sous-catégories

73. j’ai déjà
un site
et des apps !

74. j’ai déjà un site
et/ou des applis !
• comment transformer mon site web
en responsive sans tout refondre ?
• mon site web est-il compatible iPad ?

75. j’ai déjà un site
et/ou des applis !
• dois-je conserver mes applis ?
• est-ce que je peux encapsuler
du HTML dans mes applis ?
• comment je fais pour scanner
un code barre sans appli ?

76. 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…

77. envisager une
mutation progressive
desktop
sma
tablet rtph
one

78. envisager une
mutation progressive
desktop
sma
rtph tablet
one

79. envisager une
mutation progressive
sma desktop
rtph tablet
one

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

81. showtime!

82. Case-studies
altima°

83. case-study
relay.com
P
OO
SC

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

86. case-study
skimium.com
P
OO
SC

88. et beaucoup
d’autres à suivre…

89. merci !
slecouturier@altima.fr
www.altima.fr
@altima
© altima 09/2012