Slide 1

Slide 1 text

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

Slide 20

Slide 20 text

Questions, retours d’expérience ?