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