Responsive, l'indispensable révolution des outils et processus

Le design de sites responsive s'accommode mal du fonctionnement usuel. Revue des problèmes et de comment les contourner. Conférence-atelier donnée à ParisWeb.

Transcript

1. Responsive Design L’indispensable révolution des outils et processus
2. Un projet web typique Chef de projet Graphiste / DA Intégrateur / Dev front Développeur / Dev back
3. Un projet web typique Wireframe PSD Intégration Développement Abstrait (Phase optimiste) Concret (Phase réaliste)
4. 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
5. “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
6. “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
7. 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
8. 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
10. Le responsive... Trop compliqué ? Avec le fonctionnement usuel, oui
11. L’indispensable (r)évolution des processus et des outils http://bradfrostweb.com/blog/post/this-is-the-web/
12. Processus Penser mobile dès le début www.pompage.net/traduction/mobile-d-abord
13. Outils Concevoir 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
14. Processus Le 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
15. Processus Concevoir des guides de style Ni trop génériques ni trop spécifiques Rapides à produire Permettent d’itérer rapidement http://styleguid.es/
16. Outils Déterminer les points de rupture en fonction du contenu, pas des appareils http://www.lukew.com/
17. Outils Frameworks : Utiles pour prototyper dans le navigateur Étudier leur fonctionnement, leur code Ne prendre que ce dont on a besoin
18. Outils Media 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
19. Outils Performances 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
20. Questions, retours d’expérience ?