Download - Introduction au Responsive Design
![Page 1: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/1.jpg)
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
![Page 2: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/2.jpg)
LE USAGES DIGITAUX ÉVOLUENT…
![Page 3: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/3.jpg)
… LES SUPPORTS SE MULTIPLIENT
![Page 4: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/4.jpg)
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
![Page 5: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/5.jpg)
LES SITES DOIVENT S’ADAPTER
… AUX ORIENTATIONS
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
![Page 6: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/6.jpg)
LES SITES DOIVENT S’ADAPTER
… AUX ORIENTATIONS
… AUX SUPPORTS
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
![Page 7: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/7.jpg)
LES SITES DOIVENT S’ADAPTER
… AUX RÉSOLUTIONS ET TAILLES D’ÉCRANS
… AUX ORIENTATIONS
… AUX SUPPORTS
… À LA PERFORMANCE
![Page 8: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/8.jpg)
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
![Page 9: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/9.jpg)
IL FAUT DONC REPENSER LE WEBDESIGN
![Page 10: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/10.jpg)
…POUR ÊTRE COMPATIBLE AVEC PLUSIEURS TERMINAUX
![Page 11: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/11.jpg)
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
![Page 12: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/12.jpg)
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
![Page 13: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/13.jpg)
LE RESPONSIVE DESIGN
![Page 14: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/14.jpg)
LE RESPONSIVE DESIGN
C’EST QUOI
![Page 15: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/15.jpg)
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.
![Page 16: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/16.jpg)
DES EXEMPLES ?
![Page 17: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/17.jpg)
POSTE DE BUREAU(1024)
CE SITE EST FLUIDE…
THE BOSTON GLOBE
![Page 18: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/18.jpg)
POSTE DE BUREAU(1024)
… IL PEUT S’ADAPTER FACILEMENT SUR TABLETTE TABLETTE (768PX)
THE BOSTON GLOBE
![Page 19: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/19.jpg)
POSTE DE BUREAU(1024)
… SUR SMARTPHONE TABLETTE (768PX)
SMARTPHONE (320PX)
THE BOSTON GLOBE
![Page 20: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/20.jpg)
POSTE DE BUREAU(1024)
… ET SUR UN ÉCRAN À PLUS HAUTE RÉSOLUTION TABLETTE (768PX)
SMARTPHONE (320PX)
POSTE DE BUREAU(1600PX)
THE BOSTON GLOBE
![Page 21: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/21.jpg)
SMARTPHONE (320PX)
TABLETTE (768PX)
NETBOOK(1024)
POSTE DE BUREAU(1600PX)
UN AUTRE EXEMPLE : FOODSENSE
![Page 22: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/22.jpg)
SMARTPHONE (320PX)
TABLETTE (768PX)
NETBOOK(1024)
POSTE DE BUREAU(1600PX)
OU ENCORE : JON WHITE
![Page 23: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/23.jpg)
MAIS COMMENT ÇA MARCHE ?
![Page 24: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/24.jpg)
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.
![Page 25: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/25.jpg)
LE RESPONSIVE DESIGN …
… Solution MIRACLE
![Page 26: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/26.jpg)
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
![Page 27: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/27.jpg)
ET VOUS ?
![Page 28: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/28.jpg)
QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?
1 DISPOSITIF UNIQUE POUR MAXIMISER L’ACCÈS ET MINIMISER LES COÛTS ?
![Page 29: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/29.jpg)
QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?
DES DISPOSITIFS DÉDIÉS POUR MAXIMISER L’EXPÉRIENCE ?
![Page 30: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/30.jpg)
QUEL ÉCO-SYSTÈME VOUS CORRESPOND ?
UN ÉQUILIBRE ENTRE LES DEUX ?
![Page 31: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/31.jpg)
PARLONS-EN !
POUR OBTENIR LES SLIDES DE CETTE PRESENTATION [email protected] Dagobert 39 rue des Mathurins, 75008 Paris 01 56 03 99 80 [email protected] www.dagobert.com www.facebook.com/agencedagobert www.twitter.com/agencedagobert
![Page 32: Introduction au Responsive Design](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55859fe8d8b42a7b1a8b45c3/html5/thumbnails/32.jpg)
contact
DÉCOUVREZ AUSSI… LES AUTRES ÉTUDES DU PLANNING STRATÉGIQUE
SOLANGE DERREY DIGITAL PLANNER [email protected] @SolangeDerrey
CONTACT 39 RUE DES MATHURINS 75008 PARIS + 33 (0)1 56 03 99 80
JÉRÉMIE ABRIC DIRECTEUR DE LA STRATÉGIE
[email protected] @jabric