Responsive Design
L’indispensable révolution des outils et processus
Slide 2
Slide 2 text
Un projet web typique
Chef de projet
Graphiste / DA
Intégrateur / Dev front
Développeur / Dev back
Slide 3
Slide 3 text
Un projet web typique
Wireframe
PSD
Intégration
Développement
Abstrait
(Phase optimiste)
Concret
(Phase réaliste)
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
“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
Slide 6
Slide 6 text
“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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Le responsive... Trop compliqué ?
Avec le fonctionnement usuel,
oui
Slide 11
Slide 11 text
L’indispensable (r)évolution
des processus et des outils
http://bradfrostweb.com/blog/post/this-is-the-web/
Slide 12
Slide 12 text
Processus
Penser mobile dès le début
www.pompage.net/traduction/mobile-d-abord
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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/
Slide 16
Slide 16 text
Outils
Déterminer les points de rupture en fonction du
contenu, pas des appareils
http://www.lukew.com/
Slide 17
Slide 17 text
Outils
Frameworks :
Utiles pour prototyper dans le navigateur
Étudier leur fonctionnement, leur code
Ne prendre que ce dont on a besoin
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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