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

LE USAGES DIGITAUX ÉVOLUENT…

… LES SUPPORTS SE MULTIPLIENT

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

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

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

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

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

IL FAUT DONC REPENSER LE WEBDESIGN

…POUR ÊTRE COMPATIBLE AVEC
PLUSIEURS TERMINAUX

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
+ + + + +

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

LE RESPONSIVE DESIGN

LE RESPONSIVE DESIGN
C’EST QUOI

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.

DES EXEMPLES ?

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

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

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

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

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

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

MAIS COMMENT ÇA MARCHE ?

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.

LE RESPONSIVE DESIGN …
… Solution MIRACLE

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

ET VOUS ?

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

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

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

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

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