Responsive DesignL’indispensable révolution des outils et processus
Un projet web typique
Chef de projet
Graphiste / DA
Intégrateur / Dev front
Développeur / Dev back
Un projet web typique
Wireframe
PSD
Intégration
Développement
Abstrait(Phase optimiste)
Concret(Phase réaliste)
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
“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
“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
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
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
Le responsive... Trop compliqué ?
Avec le fonctionnement usuel,oui
L’indispensable (r)évolution des processus et des outils
http://bradfrostweb.com/blog/post/this-is-the-web/
ProcessusPenser mobile dès le début
www.pompage.net/traduction/mobile-d-abord
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
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
ProcessusConcevoir des guides de style
Ni trop génériques ni trop spécifiques Rapides à produire Permettent d’itérer rapidement
http://styleguid.es/
OutilsDéterminer les points de rupture en fonction du contenu, pas des appareils
http://www.lukew.com/
OutilsFrameworks :
Utiles pour prototyper dans le navigateur Étudier leur fonctionnement, leur code Ne prendre que ce dont on a besoin
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
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
Questions, retours d’expérience ?
Top Related