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 ?