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

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

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

6.
c’est quoi
le Web Responsive ?

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

8.
webresponsive
un seul site pour tous les devices

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

10.
Food Sense
http://foodsense.is

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

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

13.
résolutions
d’écran

14.
résolutions
d’écran

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

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

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

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

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

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

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

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

23.
couleurs

24.
nombre
de couleurs

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

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

27.
performances

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

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

30.
performance
mode off-line ou asynchrone

31.
@mediaqueries

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

33.
Pourquoi
c’est à la mode ?

34.
Je kiffe
le responsive

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

36.
SEO friendly

37.
maintenance
simplifiée
site mobile
site web

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

39.
déploiement simultané
des updates

40.
futureproof!

41.
même plus peur
des keynotes

42.
Mais…
est-ce vraiment
une mode ?

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

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

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

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

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

48.
#fail

49.
#fail

50.
#fail

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

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

53.
work in progress !

54.
framework
et architecture
technique

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

56.
performance
et hébergement

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

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

59.
architecture
de l’information

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

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

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

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

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

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

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

67.
envisager une
mutation progressive
desktop
sma
tablet rtph
one

68.
envisager une
mutation progressive
desktop
sma
rtph tablet
one

69.
envisager une
mutation progressive
sma desktop
rtph tablet
one

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

71.
showtime!

72.
Case-studies
altima°

73.
case-study
relay.com
P
OO
SC

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

75.
case-study
skimium.com
P
OO
SC

76.
et beaucoup
d’autres à suivre…

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