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