Transcript
Page 1: Mobile : comment y aller sans le regretter ? à Lyon
Page 2: Mobile : comment y aller sans le regretter ? à Lyon

mobilePourquoi y aller ?

Pourquoi s’en méfier ?

Le point sur le Webresponsive

Page 3: Mobile : comment y aller sans le regretter ? à Lyon

mobilepourquoiy aller ?

Page 4: Mobile : comment y aller sans le regretter ? à Lyon

€500millions

m-commerce en France en 2010

Xerfi

= 500 000 000 €

Page 5: Mobile : comment y aller sans le regretter ? à Lyon

€13milliards

m-commerce en France en 2015

Xerfi

= 13 000 000 000 €

Page 6: Mobile : comment y aller sans le regretter ? à Lyon

$600millions

chiffre d’affaire m-commerce ebay en 2009

= $600 000 000eBay / Mobile Commerce Daily

Page 7: Mobile : comment y aller sans le regretter ? à Lyon

$2milliards

chiffre d’affaire m-commerce ebay en 2010

= $2 000 000 000eBay / Mobile Commerce Daily

Page 8: Mobile : comment y aller sans le regretter ? à Lyon

eBay / Mobile Commerce Daily

Il est incroyable de penserque $2 milliards de C.A.

ont été générés par une plateforme qui n’existait pas il y a 2 ans,

et sur un terminalqui n’existait pas il y a 3 ans.

«

»Clare Gilmartin, VP of eBay Europe

Page 9: Mobile : comment y aller sans le regretter ? à Lyon

$5milliards

chiffre d’affaire m-commerce ebay en 2011

= $5 000 000 000eBay / Mobile Commerce Daily

Page 10: Mobile : comment y aller sans le regretter ? à Lyon

$8milliards

chiffre d’affaire m-commerce ebay en 2012

= $8 000 000 000eBay / John Donahoe - CES Las Vegas - janvier 2012

Page 11: Mobile : comment y aller sans le regretter ? à Lyon

$265 000Avion Piper PA-46-310P Malibu de 1985

l’objet le plus cher vendu sur eBay mobile en 2010

Mashable

Page 12: Mobile : comment y aller sans le regretter ? à Lyon

3,5Ferrari / mois

vendues sur eBay mobile en 2011

eBay / Mobile Commerce Daily - janvier 2011

Page 13: Mobile : comment y aller sans le regretter ? à Lyon

1”= 11 vente par secondesur eBay mobile UK en 2011

eBay / Mobile Commerce Daily - octobre 2011

Page 14: Mobile : comment y aller sans le regretter ? à Lyon

Google think mobile - 2011

Australie

Suisse

Norvège

Espagne

Etats Unis

Danemark

Royaume Uni

République Tchèque

France

Corée du Sud

Russie

Italie

Autriche

Allemagne

Turquie

0 10 20 30 40

14

18

21

24

25

27

27

29

30

30

31

33

33

34

37

Taux d’équipement smartphone

Page 15: Mobile : comment y aller sans le regretter ? à Lyon

6millionsse connectenttous les jours

Médiamétrie - octobre 2011

Page 16: Mobile : comment y aller sans le regretter ? à Lyon

27%de smartphonesen France en 2011

Google think mobile - 2011

Page 17: Mobile : comment y aller sans le regretter ? à Lyon

40%de smartphonesen France en 2011

Médiamétrie - octobre 2011

Page 18: Mobile : comment y aller sans le regretter ? à Lyon

millions

12de smartphones vendus en France en 2011

GfK- octobre 2011

Page 19: Mobile : comment y aller sans le regretter ? à Lyon

Comscore octobre 2011

4 %5 %8 %

Android27 %

Symbian26 %

Apple30 %

Part de marché des OS smartphonesFrance + Allemagne + Italie + Espagne + Royaume Uni

Apple Symbian Android Blackberry Microsoft autres

Page 20: Mobile : comment y aller sans le regretter ? à Lyon

Comscore août 2011

7 %8 %

Android21 %

3 %

Apple61 %

Consommation de bande passanteFrance + Allemagne + Italie + Espagne + Royaume Uni

Apple Symbian Android Blackberry autres

Page 21: Mobile : comment y aller sans le regretter ? à Lyon

Stanley Research

mobile vs. desktop2007-2015 (estimations)

!"###

$"%##

$"!##

&##

'##

#!##()**!##&)**!##+)**!#$#)**!#$$)**!#$!)**!#$,)**!#$')**!#$-)

./012/10*34124*56

67

689:;1*./012/10*34124

<14=08>*./012/10*34124

Page 22: Mobile : comment y aller sans le regretter ? à Lyon

39%utilisent leur smartphone

aux toilettes

Google think mobile - 2011

Page 23: Mobile : comment y aller sans le regretter ? à Lyon

24%ont fait un achat

sur leur smartphone*

* hors applis et téléchargements - FEVAD juin 2011

Page 24: Mobile : comment y aller sans le regretter ? à Lyon

47%utilisent leur smartphone

pour préparer un achat

FEVAD juin 2011

Page 25: Mobile : comment y aller sans le regretter ? à Lyon

35%ont utilisé leur smartphone

dans un magasin

FEVAD juin 2011

Page 26: Mobile : comment y aller sans le regretter ? à Lyon

36%

pour regarder le prixdans une autre enseigne

FEVAD juin 2011

29%

pour géolocaliser d’autres enseignes

26%

pour montrer le produit au vendeur

Page 27: Mobile : comment y aller sans le regretter ? à Lyon

Les mobinautessont là,

mais pas encoretous les

e-commerçants…

Page 28: Mobile : comment y aller sans le regretter ? à Lyon

mobilepourquois’en méfier ?

Page 29: Mobile : comment y aller sans le regretter ? à Lyon

S'il vous plaît...dessine-moi une appli

Page 30: Mobile : comment y aller sans le regretter ? à Lyon

1- développement

Page 31: Mobile : comment y aller sans le regretter ? à Lyon
Page 32: Mobile : comment y aller sans le regretter ? à Lyon

2- publicationsur le store

Page 33: Mobile : comment y aller sans le regretter ? à Lyon
Page 34: Mobile : comment y aller sans le regretter ? à Lyon
Page 35: Mobile : comment y aller sans le regretter ? à Lyon

3- téléchargement par les utilisateurs

Page 36: Mobile : comment y aller sans le regretter ? à Lyon

148apps.biz / AppBrain 14 mars 2012

588 492applis sur l’AppStore

405 241applis sur AndroidMarket

Page 37: Mobile : comment y aller sans le regretter ? à Lyon

Google Think Mobile

28applis installées

en moyenne

Page 38: Mobile : comment y aller sans le regretter ? à Lyon

80%des applis de marquen’atteignent pas 1000 téléchargements

Deloitte

Page 39: Mobile : comment y aller sans le regretter ? à Lyon

4- utilisationpar les utilisateurs

Page 40: Mobile : comment y aller sans le regretter ? à Lyon

Google Think Mobile

28applis installées

en moyenne

RAPPEL

Page 41: Mobile : comment y aller sans le regretter ? à Lyon

11utilisées

Google Think Mobile

dans le dernier mois

Page 42: Mobile : comment y aller sans le regretter ? à Lyon

5- maintenance

Page 43: Mobile : comment y aller sans le regretter ? à Lyon

24%des applis sont supprimées

de l’AppStore(37% sur AndroidMarket)

Research2Guidance

Page 44: Mobile : comment y aller sans le regretter ? à Lyon

24%des applis sont supprimées

de l’AppStore(37% sur AndroidMarket)

Research2Guidance

Page 45: Mobile : comment y aller sans le regretter ? à Lyon

n°11er motif de suppression :

problème d’incompatibilitéavec le dernier OS

Research2Guidance

Page 46: Mobile : comment y aller sans le regretter ? à Lyon

Retour à la case départ !

Page 47: Mobile : comment y aller sans le regretter ? à Lyon

maintenance d’une appli=

nombre de versions du devicex

versions de l’OSx

versions de l’appli

Page 48: Mobile : comment y aller sans le regretter ? à Lyon

l’iPad =sauveur de la presse

TOUTE LA PRESSE en mai 2010

Page 49: Mobile : comment y aller sans le regretter ? à Lyon

30%commission d’Apple sur les abonnements

Apple

Page 50: Mobile : comment y aller sans le regretter ? à Lyon

#fail

Page 51: Mobile : comment y aller sans le regretter ? à Lyon
Page 52: Mobile : comment y aller sans le regretter ? à Lyon
Page 53: Mobile : comment y aller sans le regretter ? à Lyon
Page 54: Mobile : comment y aller sans le regretter ? à Lyon

les applisne sont pasmagiques !

Page 55: Mobile : comment y aller sans le regretter ? à Lyon
Page 56: Mobile : comment y aller sans le regretter ? à Lyon
Page 57: Mobile : comment y aller sans le regretter ? à Lyon
Page 58: Mobile : comment y aller sans le regretter ? à Lyon
Page 59: Mobile : comment y aller sans le regretter ? à Lyon

#fail

Page 60: Mobile : comment y aller sans le regretter ? à Lyon
Page 61: Mobile : comment y aller sans le regretter ? à Lyon
Page 62: Mobile : comment y aller sans le regretter ? à Lyon

#fail

Page 63: Mobile : comment y aller sans le regretter ? à Lyon
Page 64: Mobile : comment y aller sans le regretter ? à Lyon
Page 65: Mobile : comment y aller sans le regretter ? à Lyon

#fail

Page 66: Mobile : comment y aller sans le regretter ? à Lyon
Page 67: Mobile : comment y aller sans le regretter ? à Lyon
Page 68: Mobile : comment y aller sans le regretter ? à Lyon
Page 69: Mobile : comment y aller sans le regretter ? à Lyon
Page 70: Mobile : comment y aller sans le regretter ? à Lyon
Page 71: Mobile : comment y aller sans le regretter ? à Lyon
Page 72: Mobile : comment y aller sans le regretter ? à Lyon
Page 73: Mobile : comment y aller sans le regretter ? à Lyon

#fail

Page 74: Mobile : comment y aller sans le regretter ? à Lyon

22%des e-commerçants mobile

(sites + apps)

CCM Benchmark - juillet 2011

Page 75: Mobile : comment y aller sans le regretter ? à Lyon

=78%des e-commerçants PAS mobile

(sites + apps)

CCM Benchmark - juillet 2011

Page 76: Mobile : comment y aller sans le regretter ? à Lyon

40%des mobinautes

préfèrent acheter sur le site

IAB M-Commerce 2011

17% via une appli

Page 77: Mobile : comment y aller sans le regretter ? à Lyon

31%des mobinautes

regrettent que les sitesne soient pas optimisés

pour mobileConsensus / WorldPay - Octobre 2011

Page 78: Mobile : comment y aller sans le regretter ? à Lyon

#fail

Page 79: Mobile : comment y aller sans le regretter ? à Lyon

comScore MobiLens - Avril 2011

53%des smartphonautesutilisent des applis

Page 80: Mobile : comment y aller sans le regretter ? à Lyon

comScore MobiLens - Avril 2011

53%des smartphonautes

browsent

Page 81: Mobile : comment y aller sans le regretter ? à Lyon

les internautes…

surfent !

scoop!

Page 82: Mobile : comment y aller sans le regretter ? à Lyon

Yahoo! / Ipsos - Mobile Modes: How to Connect with Mobile Consumers - août 2011

Acheter

Rechercher

Se divertir

S’informer

0 25 50 75 100

61

40

37

27

39

60

63

73

Browser Apps

Activités sur smartphone Utilisation browser vs. app (US)

Page 83: Mobile : comment y aller sans le regretter ? à Lyon
Page 84: Mobile : comment y aller sans le regretter ? à Lyon
Page 86: Mobile : comment y aller sans le regretter ? à Lyon

Apple iPad 21024 x 768 px

Samsung Galaxy Tab 10.11280 x 800 px

Page 87: Mobile : comment y aller sans le regretter ? à Lyon

iPad 32048 x 1536 px

Page 88: Mobile : comment y aller sans le regretter ? à Lyon

BlackBerry PlayBook1024 x 600 px

Page 89: Mobile : comment y aller sans le regretter ? à Lyon

Kindle fire1024 x 600 px+ server side optimization

Page 90: Mobile : comment y aller sans le regretter ? à Lyon

Sony Xperia U854 x 480 px

Sony Xperia P960 x 540 px

Sony Xperia S854 x 480 px

Page 91: Mobile : comment y aller sans le regretter ? à Lyon

Sony Tablet PDouble screen

Page 92: Mobile : comment y aller sans le regretter ? à Lyon

Sony Tablet PDouble screen

2 x 1024 x 480 px

Page 94: Mobile : comment y aller sans le regretter ? à Lyon
Page 95: Mobile : comment y aller sans le regretter ? à Lyon

la courseaux devicesest perdue d’avance !?

Page 96: Mobile : comment y aller sans le regretter ? à Lyon

mobilele point surle webresponsive

Page 97: Mobile : comment y aller sans le regretter ? à Lyon

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

Page 98: Mobile : comment y aller sans le regretter ? à Lyon

webresponsiveun seul site pour tous les devices

Page 99: Mobile : comment y aller sans le regretter ? à Lyon

fluid layoutmediaqueriesadaptative mediasserver optimization

« Web Responsive » : c’est quoi ?

Page 100: Mobile : comment y aller sans le regretter ? à Lyon

@mediaqueries

Page 101: Mobile : comment y aller sans le regretter ? à Lyon

résolutiond’écran

Page 102: Mobile : comment y aller sans le regretter ? à Lyon

nombrede couleurs

Page 103: Mobile : comment y aller sans le regretter ? à Lyon

périphériques d’entréetouch / keyboard…

Page 104: Mobile : comment y aller sans le regretter ? à Lyon

1920 px

1280px

1024px

800px

640px

320px

des résolutions d’écransstructurantes(surtout la largeur !)

Page 105: Mobile : comment y aller sans le regretter ? à Lyon

1920 px

1280px

1024px

800px

640px

320pxsmartphone smart

phone

TV

desktopdesktop desktop

featuresphone features

phone

tablettablettablet

Page 106: Mobile : comment y aller sans le regretter ? à Lyon

Food Sensehttp://foodsense.is

Page 107: Mobile : comment y aller sans le regretter ? à Lyon

Andersson-Wise Architectshttp://www.anderssonwise.com

Page 108: Mobile : comment y aller sans le regretter ? à Lyon

The Boston Globehttp://www.bostonglobe.com

Page 109: Mobile : comment y aller sans le regretter ? à Lyon

showtime!

Page 110: Mobile : comment y aller sans le regretter ? à Lyon
Page 111: Mobile : comment y aller sans le regretter ? à Lyon

desktopdesktop

tabletsmartphone

tablet

Page 112: Mobile : comment y aller sans le regretter ? à Lyon
Page 113: Mobile : comment y aller sans le regretter ? à Lyon

avantageset inconvénients

Page 114: Mobile : comment y aller sans le regretter ? à Lyon

Servir plus de clientsplus souvent

Plus de clients peuvent faire leur shopping quand ils veulentoù ils veulent et quelque soitle device qu’ils choisissent

avantage

Page 115: Mobile : comment y aller sans le regretter ? à Lyon

avantageNouvelles fonctionnalitéspartout, tout de suite

Mise en place des évolutionsdu site sur tous les devicesau même moment

Page 116: Mobile : comment y aller sans le regretter ? à Lyon

avantageCoût de set-up

Pas d’investissement dansle développement et la recetted’un site spécifique à chaquecatégorie de devices.

Page 117: Mobile : comment y aller sans le regretter ? à Lyon

avantageCoût d’exploitation

Pas de développement/recetteen double des évolutions du site web dans les sites spécifiques+ un seul site à maintenir (TMA)

Page 118: Mobile : comment y aller sans le regretter ? à Lyon

avantageUne seule URL

Bénéfique pour le SEO, le SMO,l’e-mail marketinget les usages cross devices

(pas de problème de 404,de redirection vers la homepage...)

Page 119: Mobile : comment y aller sans le regretter ? à Lyon

avantageFuture proof

Le site sera conçu pour s’adapterà différentes largeurs d’écrans et sera ainsi déjà prêt pour répondre aux évolutions des devices et des tendances d’usage (ex : web sur TV)

Page 120: Mobile : comment y aller sans le regretter ? à Lyon

avantageLes avantages du webvs. apps natives

Pas de download dans un store,instantanéité des mises à jour, indépendance, 1 seule versionà supporter, SEO-friendly,e-mailing-friendly.

Page 121: Mobile : comment y aller sans le regretter ? à Lyon

inconvénientsExpérience adaptéevs. expérience naturelle du device

Création d’une expérience homogène sur tous les devicesmais qui n’est pas baséesur les principes ergonomiquespropres au device

Page 122: Mobile : comment y aller sans le regretter ? à Lyon

inconvénientsPas de 100% pixel perfect

Le layout sera un peu différentsur chaque device et il ne seradonc pas possible d’assurerune expérience 100% identiqueaux maquettes sur tous les devices.

Page 123: Mobile : comment y aller sans le regretter ? à Lyon

inconvénientsPas universel

Cette solution ne répondra pasà tous les features phones, principalement ceux de plus de 3 ans(Motorola Razr, anciens BlackBerry ou Nokia).

Page 124: Mobile : comment y aller sans le regretter ? à Lyon

inconvénientsNiveau de compétence

Restreint le nombre de prestataires capables d’intervenir sur le front-end à ceux disposant d’une vraie expertise HTML/CSS/JSet peut limiter le développement low-cost.

Page 125: Mobile : comment y aller sans le regretter ? à Lyon

inconvénientsRestreint les plug-ins externesà ceux adaptés au mobile

84 Kb,10 requêtes http,1,340 seconde

=

Page 126: Mobile : comment y aller sans le regretter ? à Lyon

le responsivec’est bien…

mais pas que.

Page 127: Mobile : comment y aller sans le regretter ? à Lyon

smartphone

TVdesktopdesktop

featuresphone tablet

Page 128: Mobile : comment y aller sans le regretter ? à Lyon

smartphone

TVdesktopdesktop

featuresphone tablet

Page 129: Mobile : comment y aller sans le regretter ? à Lyon

smartphone

TVdesktopdesktop

featuresphone tablet

Page 130: Mobile : comment y aller sans le regretter ? à Lyon

smartphone

TVdesktopdesktop

featuresphone tablet

Page 131: Mobile : comment y aller sans le regretter ? à Lyon

smartphone

TVdesktopdesktop

featuresphone tablet

Page 132: Mobile : comment y aller sans le regretter ? à Lyon

smartphone

TVdesktopdesktop

featuresphone tablet

Page 133: Mobile : comment y aller sans le regretter ? à Lyon

www

Page 134: Mobile : comment y aller sans le regretter ? à Lyon

www app+

Page 135: Mobile : comment y aller sans le regretter ? à Lyon

m.www app+ +

Page 136: Mobile : comment y aller sans le regretter ? à Lyon

m.responsivewww app+ + +

Page 137: Mobile : comment y aller sans le regretter ? à Lyon

app +responsive

Page 138: Mobile : comment y aller sans le regretter ? à Lyon

app m.+ +responsive

Page 139: Mobile : comment y aller sans le regretter ? à Lyon

responsive

Page 140: Mobile : comment y aller sans le regretter ? à Lyon

le responsiven’est pas

forcémmentexclusif !

Page 141: Mobile : comment y aller sans le regretter ? à Lyon

rendre son sitemobile-compatible

ou mobile-optimizedest devenu une dette.


Recommended