Mobile, Tablette, Ordinateur, Netbook...Bien décliner sa présence sur le digital. Figaro Digital Day 3ème édition - jeudi 5 avril 2012 Présentation de Jérémie Abric - directeur de la stratégie de Dagobert.

1. BIEN
DÉCLINER
SA PRÉSENCE
DIGITALE
MOBILE, TABLETTE, ORDINATEUR, NETBOOK…

2. Pourquoi
vouloir
‘décliner’ ?

3. POURQUOI VOULOIR ‘DÉCLINER’ ?
LES SUPPORTS
DE VISUALISATION
SE DIVERSIFIENT

4. DES DEVICES
VARIÉS

5. DES RÉSOLUTIONS
MULTIPLES
2,73% 2,79% 4,64% 4,96% 5,88% 8,29% 8,47% 12,23% 12,4%
15,7%
Libstat.com,
aout
2011

6. DES ORIENTATIONS
CHANGEANTES

7. DES PERFORMANCES
VARIABLES

8. POURQUOI VOULOIR ‘DÉCLINER’ ?
LA CONSOMMATION
MÉDIA
ÉVOLUE

9. 40M
D’INTERNAUTES DE PLUS DE 12 ANS
MÉDIAMÉTRIE – 4ème trimestre 2011

10. 19M
DE MOBINAUTES : +23% EN UN AN !
MÉDIAMÉTRIE – 4ème trimestre 2011

11. 1,7M
DE TABLONAUTES: +345% EN UN AN !
3M DE VENTES PRÉVUES POUR 2012
MÉDIAMÉTRIE – 4ème trimestre 2011

12. 56%
DES POSSESSEURS DE TABLETTE UTILISENT MOINS LEUR ORDINATEUR,
ET 31% UTILISENT MOINS LEUR MOBILE
http://www.netpublic.fr/2011/10/internet-en-france-en-2011-infographie/

13. 2,4%
DU TRAFIC WEB EST MOBILE EN FRANCE (7,9% EN UK)
COMSCORE – OCTOBRE 2011

14. POURQUOI VOULOIR ‘DÉCLINER’ ?
LES USAGES
MÉDIA
S’ENRICHISSENT

15. A ANT
V
ORDINATEUR
FAMILIAL
ET C’EST TOUT…

16. MAINTENANT : DES ÉVOLUTIONS
CONTEXTE
TRANSPORTS, ATTENTES,
CANAPÉ… (DÉ)
CLOISONNEMENT
DUAL SCREEN, FRACTIONNEMENT DES PARCOURS …
ATTENTES
SERVICES PRÉCIS & PONCTUEL…
ÉVASION & EXPÉRIENCE…
EXHAUSTIVITÉ…
TEMPORALITÉ
LISSAGE DES CONNEXIONS

17. COMSCORE – OCTOBRE 2011

18. OK, donc
le digital est
PLURIEL !

19. Qu’entend-on par
‘DÉCLINER SA
PRÉSENCE’ ?

20. ‘Travailler une
EXPÉRIENCE
UTILISATEUR
cross-plateforme’ ?

21. .1
RENDRE
ACCESSIBLE

22. Trois moyens
de traiter
l’accessibilité

23. 1. NE RIEN
FAIRE…
ET ESPÉRER !

24. QQ PROBLÈMES…
… DES BORDS SUR LES …DES SITES …OBLIGATION
GRANDES RESOLUTIONS ILLISIBLES EN PETITES DE NAVIGUER
RESOLUTIONS AVEC LE ZOOM
…TROP DE CONTENU …PAS DE
À GÉRER ROLL-OVER

25. 2.
CRÉER UNE
VERSION
PAR
SUPPORT

26. ULTRA-ADAPTATION
EXEMPLE : VOYAGES-SNCF

27. DES CONTRAINTES…
COÛT
DÉLAIS DE PRODUCTION
GESTION DES ÉVOLUTIONS
GESTION DES NOUVEAUX DEVICES
DÉPENDANCE AUX STORES
…

28. DES ALTERNATIVES…
DÉVELOPPEMENT EN NATIF
DÉVELOPPEMENT EN HYBRIDE
DÉVELOPPEMENT EN HTML ENCAPSULÉ
…

29. 3.
ADAPTER
AUTOMATIQUEMENT
UNE UNIQUE
VERSION

30. {
LE
RESPONSIVE
DESIGN

31. RESPONSIVE
DESIGN
‘
CONCEPTION D’UN SITE PERMETTANT UNE ADAPTATION
AUX DIFFÉRENTES TAILLES D'ÉCRAN ET AUX DIFFÉRENTS
TERMINAUX.
LA NOTION DE WEB RESPONSIVE RÉVOLUTIONNE LA
MANIÈRE DE CONCEVOIR LES PARCOURS INTERNET
PUISQU'IL NE S'AGIT PLUS ICI DE CONCEVOIR AUTANT DE
PARCOURS QU'IL Y A DE FAMILLE DE TERMINAUX MAIS DE
’
CONCEVOIR UNE SEULE INTERFACE AUTO-ADAPTABLE.

32. Et…
CONCRÊTEMENT ?

33. UN SITE FLUIDE…
CE SITE EST FLUIDE…
POSTE
DE
BUREAU
(1024)

34. UN SITE FLUIDE…
… IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE
TABLETTE
POSTE
DE
BUREAU
(768PX)
(1024)

35. UN SITE FLUIDE…
… SUR SMARTPHONE
SMARTPHONE
TABLETTE
POSTE
DE
BUREAU
(320PX)
(768PX)
(1024)

36. UN SITE FLUIDE…
… ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTION
SMARTPHONE
TABLETTE
POSTE
DE
BUREAU POSTE
DE
BUREAU
(320PX)
(768PX)
(1024)
(1600PX)

37. UN SITE FLUIDE…
UN EXEMPLE EN PRESSE :
BOSTON GLOBE
http://www.bostonglobe.com

38. POSSIBILITÉS
CHANGER LA STRUCTURE
CHANGER LA PRIORITÉ
CHANGER LA TAILLE
CHANGER LA PRÉSENCE
…

39. FONCTIONNEMENT
{
3 GRANDS PILIERS
GRILLES
FLUIDES +
IMAGES
FLEXIBLES +
MEDIA
QUERIES

40. CONTRAINTES
- DÉVELOPPEMENTS PLUS LONGS
QU’UN SITE CLASSIQUE
- DES NAVIGATEURS MULTIPLES À
RENDRE COMPATIBLES
- CRÉATIVITÉ ENCADRÉE
- …

41. BREF…
TROIS OPTIONS
1. NE RIEN FAIRE
2. CRÉER UN DISPOSITIF PAR SUPPORT
3. CRÉER UN DISPOSITIF ADAPTABLE À CHAQUE SUPPORT
PAS DE RÈGLE !

42. (
)
ÊTRE ACCESSIBLE
C’EST AUSSI
TRAVAILLER SON
RÉFÉRENCEMENT
POUR CHAQUE
PLATEFORME !

43. UNE EXPÉRIENCE QUI FONCTIONNE SUR UN MÉDIA NE
FONCTIONNE PAS FORCÉMENT AUSSI BIEN SUR UN
AUTRE… MÊME SI ON LA REND TECHNIQUEMENT
ACCESSIBLE !

44. .2
PENSER
PARCOURS

45. SE POSER LES
BONNES
QUESTIONS
‘
EST-IL PERTINENTE DE PROPOSER LES MÊMES CONTENUS
SUR TOUS LES SUPPORTS ?
QUE PEUT-ON APPORTER D’UTILE À NOS USAGERS, DANS
LEUR CONTEXTE D’USAGE ?

46. LE CAS
CITROËN

47. SUR LE SITE WEB…
SHOWROOM, CONFIGURATEUR, EXHAUSTIVITÉ…

48. SUR LE MOBILE…
SUIVI DE SON VÉHICULE

49. SUR LE SALON…
DESCRIPTIF VÉHICULE ET PRÉ-RÉSERVATION

50. EN CONCESSION…
CO-CONFIGURATEUR…

51. RÉPONDRE AUX BESOINS
DES UTILISATEURS SELON
LE CONTEXTE

56. 3 CONNAÎTRE
SA CIBLE

57. SAVOIR
POUR DÉCIDER
‘
QUEL ÉQUIPEMENT ?
QUELLE CONNAISSANCE ET QUELS USAGES DU DIGITAL ?
QUELLES HABITUDES ?
QUELS BESOINS CONSOMMATEUR ?
…
è MÉTHODE P.O.S.T
’

58. CLU
CONCLUSION

59. ‘DÉCLINAISON’
=
FORME
+
FOND

60. 10
IDÉES À RETENIR

61. 7
FACTEURS CLEFS
DE RÉUSSITE

62. 5
DON’T

63. LA
(VRAIE) QUESTION

64. LA QUESTION DU
CLOISONNEMENT
MEDIA CHEZ L’ANNONCEUR

65. VERS DES POSTES DE
‘RESPONSABLE
EXPÉRIENCE
CLIENT’ ?

66. POUR RECEVOIR LES SLIDES
DE CETTE PRÉSENTATION
CLIQUEZ ICI :
http://tinyurl.com/6u2pm5w

67. MERCI !
Jérémie ABRIC
Directeur de la stratégie
jeremie.abric@dagobert.fr
@jabric
DÉCOUVREZ AUSSI… LES ÉTUDES DE DAGOBERT DAGOBERT
www.slideshare.net/agencedagobert 39 RUE DES MATHURINS
75008 PARIS
+ 33 (0)1 56 03 99 80
www.dagobert.fr
contact@dagobert.fr
www.twitter.com/agencedagobert