Responsive Design
L’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
Abstrait
(Phase optimiste)
Wireframe
PSD
Intégration
Développement

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, ...
Redesigning Times.com
“Managing more than 200 PSD files is not only tedious, but
it can produce minor discrepancies betwee...
Refonte du site Times.com
“Manipuler plus de 200 fichiers PSD est non seulement
fastidieux mais risque également d’engendr...
Refonte du site Times.com
“Manipuler plus de 200 fichiers PSD est non seulement
Eu des
fastidieux mais risque également d’...
Inconvénients du responsive
Pas de Media Queries avant IE9
Nombre de maquettes = écrans x breakpoint
Plus de code, pour to...
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/
Processus
Penser mobile dès le début
www.pompage.net/traduction/mobile-d-abord
Outils
Concevoir dans le navigateur ET Photoshop
Photoshop n’est pas adapté au responsive
Le lissage des polices est diffé...
Processus
Le responsive : un processus, pas une option
Travailler en équipe, par itérations
Impliquer le client
Privilégie...
Processus
Concevoir des guides de style
Ni trop génériques ni trop spécifiques
Rapides à produire
Permettent d’itérer rapid...
Outils
Déterminer les points de rupture en fonction du
contenu, pas des appareils

http://www.lukew.com/
Outils
Frameworks :
Utiles pour prototyper dans le navigateur
Étudier leur fonctionnement, leur code
Ne prendre que ce don...
Outils
Media Queries
Les définir en em : blog.cloudfour.com/theems-have-it-proportional-media-queries-ftw/
CSS sans media q...
Outils
Performances
Limiter les WebFonts sur mobile
Ne charger les grandes images que sur
grand écran
Intégrer les pictos ...
Questions, retours
d’expérience ?
Responsive l'indispensable révolution des outils et processus
Prochain SlideShare
Chargement dans…5
×

Responsive l'indispensable révolution des outils et processus

769 vues

Publié le

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.

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
769
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Responsive l'indispensable révolution des outils et processus

  1. 1. Responsive Design L’indispensable révolution des outils et processus
  2. 2. Un projet web typique Chef de projet Graphiste / DA Intégrateur / Dev front Développeur / Dev back
  3. 3. Un projet web typique Abstrait (Phase optimiste) Wireframe PSD Intégration Développement Concret (Phase réaliste)
  4. 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. 5. Redesigning Times.com “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 http://appendto.com/case-study/responsive-design-time-com
  6. 6. Refonte du site Times.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
  7. 7. Refonte du site Times.com “Manipuler plus de 200 fichiers PSD est non seulement Eu des fastidieux mais risque également d’engendrer ph ém ism incohérences mineures entre les maquettes d’une même page e à différentes largeurs d’écran.” AppendTo.com
  8. 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
  9. 9. Le responsive... Trop compliqué ? Avec le fonctionnement usuel, oui
  10. 10. L’indispensable (r)évolution des processus et des outils http://bradfrostweb.com/blog/post/this-is-the-web/
  11. 11. Processus Penser mobile dès le début www.pompage.net/traduction/mobile-d-abord
  12. 12. 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
  13. 13. Processus Le responsive : un processus, pas une option Travailler en équipe, par itérations Impliquer le client Privilégier la régie au forfait www.pompage.net/traduction/conceptionresponsive-obtenir-validation-sans-maquettes
  14. 14. 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/
  15. 15. Outils Déterminer les points de rupture en fonction du contenu, pas des appareils http://www.lukew.com/
  16. 16. Outils Frameworks : Utiles pour prototyper dans le navigateur Étudier leur fonctionnement, leur code Ne prendre que ce dont on a besoin
  17. 17. Outils Media Queries Les définir en em : blog.cloudfour.com/theems-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
  18. 18. 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
  19. 19. Questions, retours d’expérience ?

×