![Page 1: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/1.jpg)
Responsive DesignL’indispensable révolution des outils et processus
![Page 2: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/2.jpg)
Un projet web typique
Chef de projet
Graphiste / DA
Intégrateur / Dev front
Développeur / Dev back
![Page 3: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/3.jpg)
Un projet web typique
Wireframe
PSD
Intégration
Développement
Abstrait(Phase optimiste)
Concret(Phase réaliste)
![Page 4: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/4.jpg)
Inconvénients
Chacun travaille isolément, l’un après l’autre
Le chiffrage se fait souvent à l’aveugle
Plus c’est concret, plus il y a de problèmes
Plus on avance, plus les problèmes coûtent cher
![Page 5: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/5.jpg)
“Managing more than 200 PSD files is not only tedious, but it can produce minor discrepancies between comps of the same page at different breakpoints.”
AppendTo.com
Redesigning Times.com
http://appendto.com/case-study/responsive-design-time-com
![Page 6: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/6.jpg)
“Manipuler plus de 200 fichiers PSD est non seulement fastidieux mais risque également d’engendrer des incohérences mineures entre les maquettes d’une même page à différentes largeurs d’écran.”
AppendTo.com
Refonte du site Times.com
![Page 7: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/7.jpg)
AppendTo.com
“Manipuler plus de 200 fichiers PSD est non seulement fastidieux mais risque également d’engendrer des incohérences mineures entre les maquettes d’une même page à différentes largeurs d’écran.”
Refonte du site Times.com
Euphémisme
![Page 8: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/8.jpg)
Inconvénients du responsive
Pas de Media Queries avant IE9
Nombre de maquettes = écrans x breakpoint
Plus de code, pour tous les clients
Redimensionnement des images par le navigateur
![Page 9: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/9.jpg)
![Page 10: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/10.jpg)
Le responsive... Trop compliqué ?
Avec le fonctionnement usuel,oui
![Page 11: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/11.jpg)
L’indispensable (r)évolution des processus et des outils
http://bradfrostweb.com/blog/post/this-is-the-web/
![Page 12: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/12.jpg)
ProcessusPenser mobile dès le début
www.pompage.net/traduction/mobile-d-abord
![Page 13: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/13.jpg)
OutilsConcevoir dans le navigateur ET Photoshop
Photoshop n’est pas adapté au responsive Le lissage des polices est différent dans les
navigateurs Le navigateur permet de tester hover/focus Les deux outils sont complémentaires
![Page 14: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/14.jpg)
ProcessusLe responsive : un processus, pas une option
www.pompage.net/traduction/conception-responsive-obtenir-validation-sans-maquettes
Travailler en équipe, par itérations Impliquer le client Privilégier la régie au forfait
![Page 15: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/15.jpg)
ProcessusConcevoir des guides de style
Ni trop génériques ni trop spécifiques Rapides à produire Permettent d’itérer rapidement
http://styleguid.es/
![Page 16: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/16.jpg)
OutilsDéterminer les points de rupture en fonction du contenu, pas des appareils
http://www.lukew.com/
![Page 17: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/17.jpg)
OutilsFrameworks :
Utiles pour prototyper dans le navigateur Étudier leur fonctionnement, leur code Ne prendre que ce dont on a besoin
![Page 18: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/18.jpg)
OutilsMedia Queries
Les définir en em : blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
CSS sans media queries pour IE<9 : jakearchibald.github.io/sass-ie/
Définir les dimensions en % pour que le site s’adapte entre deux points de rupture
![Page 19: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/19.jpg)
OutilsPerformances
Limiter les WebFonts sur mobile Ne charger les grandes images que sur
grand écran Intégrer les pictos en base-64 (avec compass
par exemple) Supprimer l’inutile (carrousels...) sur desktop
également
![Page 20: Responsive l'indispensable révolution des outils et processus](https://reader034.vdocuments.net/reader034/viewer/2022042700/5564d553d8b42a0a178b5292/html5/thumbnails/20.jpg)
Questions, retours d’expérience ?