web responsive & e-commerce : un seul site pour tous les devices ? (version bis)
Post on 20-Aug-2015
6.279 Views
Preview:
TRANSCRIPT
web responsive & e-commerceun seul site pour tous les devicespar Gregory MOIGNARDDirecteur associé
L’agenceQui sommes nous ?
couverturemétierse-commerce
agencesLille, Paris, Lyon, Shanghai, Pékin, Moscou, Rabat
ansd’expériencedigitale
collaborateurspassionnés
%100
220
Lille • Paris • Lyon
East
7
15
we e-commerce♥
Web Responsiveet e-commerceUn seul site pour tous les devices
au menuSteve Jobs + Karl Lagerfeld+ les septs nains + Mickey …
+ des retours d’expérience !
+ 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 ?
http://www.bostonglobe.com/
The Boston Globe
salomon.com
résolutionsd’écran
résolutionsd’écran
1920 px
1280px
1024px
800px
640px
320px
des résolutions d’écranstructurantes(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éececi est un piège ... ceci n’est pas qu’une tablette
périphériques d’entréeremote… ?
Pourquoic’est à la mode ?
Je kiffele responsive
le m-commerce =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
48 md’usagers mobile
en France
Comscore - mars 2013
53%sont équipés
d’un smartphone
Comscore - mars 2013
14%des français ont une tablette
(x2 vs n-1)
ComScore - mars 2013
la mobiltéC’est aussi passer de mon mobile à ma tablette ou de ma tablette à mon mobile
la mobiltéC’est aussi passer de mon mobile à ma tablette ou de ma tablette à mon mobile
ComScore - mars 2013
répond aux évolutions du marchédes nouveaux devices tous les mois
- MOBILE WORLD CONGRESS 2013 -
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
woow génial ! …
oui mais y’a toujours un mais ...
expérience adaptéevs. 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 ergonomiquespropres au device
—
pas de 100% pixel perfect
—Le layout sera un peu différentsur chaque device et il ne sera
donc pas possible d’assurerune expérience 100% identique
aux maquettes sur tous les devices.—
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.
—
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.
—
Mais…est-ce vraiment une mode ?
Délivrerla meilleure expérienceà ses clientsn’est pas une mode,c’est une dette !
50%des mobinautes
ne reviendrontplus sur un site mobile si
ce dernier n’est pas optimisé
#fail
#fail
Pourquoipas encorede sitese-commerce responsive ?
Pourquoipas encorede GROS sitese-commerce responsive ?
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 %
performance matters!
Source : http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
performanceréseau Edge vs. 3G ou WiFi
performancemode off-line ou asynchrone
frameworket architecture technique
http://www.uie.com/uietips/online_uietips/uietips__09_11_12.html
#fail
Comparison of Mobile & Desktop RWD ViewsBy Jason Grigsby
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 ?
j’ai déjàun siteet des applis !
j’ai déjà un siteet/ou des applis !
• comment transformer mon site weben responsive sans tout refondre ?
• dois-je conserver 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…
« Responsive design is a clever solution for saving time and
effort but not the best solution for serving all experience »
@bkwalkerpleinière 1to1
le responsivec’est bien…
mais pas que.
smartphone
TVdesktopdesktop
featuresphone tablet
smartphone
TVdesktopdesktop
featuresphone tablet
smartphone
TVdesktopdesktop
featuresphone tablet
smartphone
TVdesktopdesktop
featuresphone tablet
smartphone
TVdesktopdesktop
featuresphone tablet
smartphone
TVdesktopdesktop
featuresphone tablet
www
www app+
m.www app+ +
m.responsivewww app+ + +
app +responsive
app m.+ +responsive
responsive
showtime!
Case-studiesaltima°
case-studyrelay.com
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-studywanimo.com
+12,4%valeur de la visite
—+6,7%panier moyen
—
- wanimo.com -
Après 22 jours d’exploitation
Après 22 jours d’exploitation
- wanimo.com -
+200 %en conversion mobile & tablette
—5,4 %
versus 2,68 %
—
case-studyskimium.com
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
skimium.com des résultats époustouflants !
+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/2015sur les supports tablettes et mobiles. — Outil de mesure : Google analytics
- skimium.com -
Évolution observée entre les périodes du 13/10 au 05/03/2012 et du 11/10 au 03/03/2015sur les supports tablettes et mobiles. — Outil de mesure : Google analytics
- 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/2015sur les supports tablettes et mobiles. — Outil de mesure : Google analytics
- 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.
—
et beaucoupd’autres à suivre…
merci !gmoignard@altima.fr
www.altima.fr
@altima - @Greg_Moignard
© altima 03/2013
top related