web responsive & e-commerceun seul site pour tous les devicespar Stéphane LecouturierDirecteur de Création et User Experience
L’agenceQui sommes nous ?
couverturemétierse-commerce
agencesLille, Paris, Lyon,Shanghai soon…
ansd’expériencedigitale
collaborateurspassionnés
%100
4 220
15
we e-commerce♥
Web Responsiveet e-commerceUn seul site pour tous les devices
au menuSteve Jobs + Mona Lisa+ Bruce Lee + Karl Lagerfeld+ les septs nains + George Clooney…
+ 2 SCOOPS !
+ des surprises pour ceux qui restent jusqu’au bout…
c’est quoile Web Responsive ?
Le « Web Responsive » : c’est quoi ?
Une nouvelle démarche de design de site webqui 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évelopperet maintenir plusieurs sites différents.
webresponsiveun seul site pour tous les devices
fluid layoutmediaqueriesadaptative mediasserver optimization
Le « Web Responsive » : c’est quoi ?
Andersson-Wise Architectshttp://www.anderssonwise.com
résolutionsd’écran
résolutionsd’écran
1920 px
1280px
1024px
800px
640px
320px
des résolutions d’écransstructurantes(surtout la largeur !)
1920 px
1280px
1024px
800px
640px
320pxsmartphone smart
phone
TV
desktopdesktop desktop
featuresphone features
phone
tablettablettablet
des résolutions réelleset des résolutions s(t)imuléesretina displays
périphériquesd’entrée
périphériques d’entréetouch / keyboard…
périphériques d’entréeremote… ?
périphériques d’entréeremote… ?
périphériques d’entréegesture, voice… ?
couleurs
nombrede couleurs
couleursdes profils colorimétriques différents ?
couleursdes profils colorimétriques différents ?
performances
performance matters!
100 ms d’attente = 1 % de vente en moins(manque à gagner potentiel de 191 millions de $ en 2008)
Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters
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 %
performanceréseau Edge vs. 3G ou WiFi
performancemode off-line ou asynchrone
@mediaqueries
Be formless.Shapeless, like water.
If you put water into a cup,it becomes the cup.
You put water into a bottleand 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
Pourquoic’est à la mode ?
Je kiffele responsive
le responsive =nouvel eldorado du web ?
m-commerce en France = 13,4 milliards d’euros en 2015Xerfi 03/2012
Dans 5 ans, 19,2 milliards d'euros seront générésgrâce au m-commerce dans sept pays d'Europe,dont 3,1 en France. Forrester 07/2012
SEO friendly
maintenance simplifiée
site mobile
site web
www.ebay.com mobileweb.ebay.com
m.ebay.comeBay extensions
& add-on
iPhone Androïd Win BlackBerrydesktop mobile iPad
déploiement simultanédes updates
déploiement simultanédes updates
futureproof!
même plus peurdes keynotes
Mais…est-ce vraiment une mode ?
Délivrerla meilleure expérienceà ses clientsn’est pas une mode,c’est une dette !
22%des e-commerçants mobile
(sites + apps)
CCM Benchmark - juillet 2011
=78%des e-commerçants PAS mobile
(sites + apps)
CCM Benchmark - juillet 2011
40%des mobinautes
préfèrent acheter sur le site
IAB M-Commerce 2011
17% via une appli
31%des mobinautes
regrettent que les sitesne soient pas optimisés
pour mobileConsensus / WorldPay - Octobre 2011
#fail
#fail
#fail
Pourquoipas encorede sitese-commerce responsive ?
Pourquoipas encorede GROS sitese-commerce responsive ?
work in progress !
frameworket architecture technique
frameworket architecture technique
• comment s’effectuele rendering des pages HTML ?
• framework commun web et mobile ?
• quels formats d’images ?
performanceet hébergement
performanceet 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 ?
http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html
#fail
Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby
architecturede l’information
architecturede l’information• mes catégories produitssont-elles adaptées au mobile ?
• mes contenus sont-ils adaptéspour le mobile ?
• dois-je adapter mon site en fonction du contexte ?
webresponsiveun seul site pour tous les devices
rappel !
17 catégories+ 102 sous-catégories
4 catégories+ 35 sous-catégories
j’ai déjàun siteet des apps !
j’ai déjà un siteet/ou des applis !
• comment transformer mon site weben responsive sans tout refondre ?
• mon site web est-il compatible iPad ?
j’ai déjà un siteet/ou des applis !• dois-je conserver mes applis ?
• est-ce que je peux encapsulerdu HTML dans mes applis ?
• comment je fais pour scannerun code barre sans appli ?
comprendre ou définirl’é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…
smartphone
desktoptablet
envisager unemutation progressive
smartphone
desktoptablet
envisager unemutation progressive
desktoptabletsma
rtphone
envisager unemutation progressive
smartphone
TVdesktopdesktop
featuresphone tablet
showtime!
Case-studiesaltima°
case-studyrelay.com
SCOOP
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é
case-studyskimium.com
SCOOP
et beaucoupd’autres à suivre…
Recommended
