Post on 21-Jun-2015
FÉVRIER 2012
DEC 2012
I N T R O D U C T I O N A U
R ESPONS IVE WEB DES IGN
LE USAGES DIGITAUX ÉVOLUENT…
… LES SUPPORTS SE MULTIPLIENT
LES SITES DOIVENT S’ADAPTER
2,73% 2,79% 4,64% 4,96% 5,88% 8,29% 8,47% 12,23% 12,4% 15,7%
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
Libstat.com, aout 2011
LES SITES DOIVENT S’ADAPTER
… AUX ORIENTATIONS
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
LES SITES DOIVENT S’ADAPTER
… AUX ORIENTATIONS
… AUX SUPPORTS
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
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 RESOLUTIONS
… OBLIGATION DE NAVIGUER AVEC LE ZOOM
IL FAUT DONC REPENSER LE WEBDESIGN
…POUR ÊTRE COMPATIBLE AVEC PLUSIEURS TERMINAUX
EST-ON OBLIGÉ D’EN ARRIVER À ÇA ?
ET/OU 1 APPLICATION IPHONE
1 SITE SMARTPHONE ANDROID ET/OU ET/OU
1 APPLICATION IPAD
ET/OU APPLICATION ANDROID
1 SITE WEB PETITE RESOLUTION
1 SITE WEB GRANDE RESOLUTION
+ + + + +
1 APPLICATION ANDROID
1 SITE IPHONE 1 SITE IPAD 1 SITE 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 ?
POSTE DE BUREAU(1024)
CE SITE EST FLUIDE…
THE BOSTON GLOBE
POSTE DE BUREAU(1024)
… IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE TABLETTE (768PX)
THE BOSTON GLOBE
POSTE DE BUREAU(1024)
… SUR SMARTPHONE TABLETTE (768PX)
SMARTPHONE (320PX)
THE BOSTON GLOBE
POSTE DE BUREAU(1024)
… ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTION TABLETTE (768PX)
SMARTPHONE (320PX)
POSTE DE BUREAU(1600PX)
THE BOSTON GLOBE
SMARTPHONE (320PX)
TABLETTE (768PX)
NETBOOK(1024)
POSTE DE BUREAU(1600PX)
UN AUTRE EXEMPLE : FOODSENSE
SMARTPHONE (320PX)
TABLETTE (768PX)
NETBOOK(1024)
POSTE DE BUREAU(1600PX)
OU ENCORE : JON WHITE
MAIS COMMENT ÇA MARCHE ?
COMMENT ÇA MARCHE ?
PARLONS TECHNIQUE…
GRILLES FLUIDES IMAGES FLEXIBLES MEDIA QUERIES
3 éléments indispensables
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
DÉCOUVREZ AUSSI… LES AUTRES ÉTUDES DU PLANNING STRATÉGIQUE
SOLANGE DERREY DIGITAL PLANNER solange.derrey@dagobert.fr @SolangeDerrey
CONTACT 39 RUE DES MATHURINS 75008 PARIS + 33 (0)1 56 03 99 80
JÉRÉMIE ABRIC DIRECTEUR DE LA STRATÉGIE
jeremie.abric@dagobert.fr @jabric