Réponse concrète à la prolifération des formats d’écran, le responsive design est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Dagobert vous en livre quelques clefs de compréhension.

1. INTRODUCTION AU
RESP ONS IV E
WEB DE SI GN
DEC 2012
FÉVRIER 2012

2. LE USAGES DIGITAUX ÉVOLUENT…

3. … LES SUPPORTS SE MULTIPLIENT

4. LES SITES DOIVENT S’ADAPTER
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
2,73% 2,79% 4,64% 4,96% 5,88% 8,29% 8,47% 12,23% 12,4%
15,7%
Libstat.com, aout 2011

5. LES SITES DOIVENT S’ADAPTER
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
… AUX ORIENTATIONS

6. LES SITES DOIVENT S’ADAPTER
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
… AUX ORIENTATIONS
… AUX SUPPORTS

7. LES SITES DOIVENT S’ADAPTER
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
… AUX ORIENTATIONS
… AUX SUPPORTS
… À LA PERFORMANCE

8. SI L’ON NE FAIT RIEN…
ON ARRIVE A CA
… DES BORDS SUR LES GRANDES RESOLUTIONS … DES SITES ILLISIBLES SUR LES PETITES …OBLIGATION DE
RESOLUTIONS NAVIGUER AVEC LE ZOOM

9. IL FAUT DONC REPENSER LE WEBDESIGN

10. …POUR ÊTRE COMPATIBLE AVEC
PLUSIEURS TERMINAUX

11. EST-ON OBLIGÉ D’EN ARRIVER À ÇA ?
1 SITE SMARTPHONE 1 SITE IPHONE 1 SITE IPAD 1 SITE ANDROID
ANDROID ET/OU ET/OU ET/OU ET/OU
1 SITE WEB GRANDE 1 SITE WEB PETITE 1 APPLICATION 1 APPLICATION 1 APPLICATION APPLICATION
RESOLUTION RESOLUTION ANDROID IPHONE IPAD ANDROID
+ + + + +

12. PLUTÔT QUE DE CONCEVOIR DES
SYSTÈMES DÉCONNECTÉS LES UNS DES
AUTRES EN AUGMENTANT LE NOMBRE
DE DISPOSITIFS INTERNET, CES SYSTÈMES
PEUVENT ÊTRE CONSIDÉRÉS COMME LES
FACETTES D’UNE EXPÉRIENCE
COMMUNE GRÂCE AU
RESPONSIVE DESIGN

13. LE RESPONSIVE DESIGN

14. LE RESPONSIVE DESIGN
C’EST QUOI

15. C’EST QUOI?
IL S’AGIT D’UNE TECHNIQUE QUI PERMET DE CRÉER
UN SITE QUI SOIT COMPATIBLE AVEC TOUS LES
TERMINAUX, UN SITE FLUIDE POUR UNE EXPÉRIENCE
UNIQUE SUR DIFFÉRENTS SUPPORTS.
LE PRINCIPE DU RESPONSIVE DESIGN EST DE TENIR
COMPTE EN PRIORITÉ DE L’EXPÉRIENCE
UTILISATEUR.

16. DES EXEMPLES ?

17. THE BOSTON GLOBE
CE SITE EST FLUIDE…
POSTE DE BUREAU
(1024)

18. THE BOSTON GLOBE
… IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE
TABLETTE POSTE DE BUREAU
(768PX) (1024)

19. THE BOSTON GLOBE
… SUR SMARTPHONE
SMARTPHONE TABLETTE POSTE DE BUREAU
(320PX) (768PX) (1024)

20. THE BOSTON GLOBE
… ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTION
SMARTPHONE TABLETTE POSTE DE BUREAU POSTE DE BUREAU
(320PX) (768PX) (1024) (1600PX)

21. UN AUTRE EXEMPLE : FOODSENSE
SMARTPHONE TABLETTE NETBOOK POSTE DE BUREAU
(320PX) (768PX) (1024) (1600PX)

22. OU ENCORE : JON WHITE
SMARTPHONE TABLETTE NETBOOK POSTE DE BUREAU
(320PX) (768PX) (1024) (1600PX)

23. MAIS COMMENT ÇA MARCHE ?

24. COMMENT ÇA MARCHE ?
PARLONS TECHNIQUE…
3 éléments indispensables
GRILLES FLUIDES IMAGES FLEXIBLES MEDIA QUERIES
Autrement dit, pour rendre un site adaptable il faut
• transformer les largeurs fixes en largeurs variables,
• gérer la taille des éléments, comme les images par exemple
• et interroger le média sur son identité (iPad, PC…) pour s’adapter à la
résolution et aux usages du support.

25. LE RESPONSIVE DESIGN …
… Solution MIRACLE

26. LES CLEFS POUR CHOISIR
LE MEILLEUR RAPPORT ACCESSIBILITÉ / EXPÉRIENCE /COÛT
• Une expérience utilisateur unique sur différents terminaux
• Une ultra accessibilité : compatibilité quelque soit le support
• Coûts inférieurs à la création de plusieurs dispositifs
• Résiste aux « aléas » des évolutions de dispositifs sur-mesure
MAIS ÉVIDEMMENT MOINS OPTIMISÉ QU’UN DISPOSITIF SUR-MESURE PENSÉ ET DÉVELOPPÉ
INDÉPENDANDAMMENT POUR CHAQUE SUPPORT
• Ergonomie non native qui sera toujours moins aboutie qu’un dispositif spécifique pour chaque support

27. ET VOUS ?

28. QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?
1 DISPOSITIF UNIQUE POUR
MAXIMISER L’ACCÈS ET
MINIMISER LES COÛTS ?

29. QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?
DES DISPOSITIFS DÉDIÉS POUR
MAXIMISER L’EXPÉRIENCE ?

30. QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?
UN ÉQUILIBRE
ENTRE LES DEUX ?

31. PARLONS-EN !
POUR OBTENIR LES SLIDES DE CETTE PRESENTATION
contact@dagobert.fr
Dagobert
39 rue des Mathurins, 75008 Paris
01 56 03 99 80
contact@dagobert.fr
www.dagobert.com
www.facebook.com/agencedagobert
www.twitter.com/agencedagobert

32. contact
JÉRÉMIE ABRIC SOLANGE DERREY
DIRECTEUR DE LA STRATÉGIE DIGITAL PLANNER
jeremie.abric@dagobert.fr solange.derrey@dagobert.fr
@jabric @SolangeDerrey
DÉCOUVREZ AUSSI…
LES AUTRES ÉTUDES DU PLANNING STRATÉGIQUE CONTACT
39 RUE DES MATHURINS
75008 PARIS
+ 33 (0)1 56 03 99 80