Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Faire le pont entre designers et développeurs au Guardian

2,643 views

Published on

L’histoire de la fluidification du dialogue entre designers et développeurs au Guardian : comment nous avons facilité l’amélioration continue à grande vitesse d’un site responsive à grande échelle.

Pour atteindre une ubiquité de langage entre les interactions humaine et notre code, nous avons utilisé le pré-processeur CSS Sass et des techniques qui s'apparentent au Domain Driven Design (Design Orienté Domaine).

Présentation donnée à la conférence Blend Web Mix (http://www.blendwebmix.com/) le jeudi 30 octobre 2014 à Lyon.

C'est une mise à jour d'une présentation précédemment donnée en Français à la Kiwi Party (http://kiwiparty.fr/) le vendredi 13 juin 2014 : http://www.slideshare.net/kaelig/kiwi-party

Published in: Design
  • Be the first to comment

Faire le pont entre designers et développeurs au Guardian

  1. 1. Faire le pont entre designers et développeurs au Guardian @kaelig
  2. 2. Pour qui est cette conférence ? Ceux qui écrivent du code Ceux qui n’en écrivent pas Ceux qui utilisent des pré-processeurs Ceux qui n’en ont jamais entendu parler @kaelig
  3. 3. Mars Climate Orbiter 23 Septembre 1999
  4. 4. theguardian @kaelig .com Établi en 1821 Lancé en 1999 (.co.uk) UK seulement Mondial 180,000 copies 105,000,000 unique browsers Données: Août 2014
  5. 5. @kaelig
  6. 6. Source: http://www.html5rocks.com/static/images/screenshots/crossdevice/image16.gif
  7. 7. github.com/guardian/frontend @kaelig
  8. 8. github.com/guardian/frontend 70 contributeurs @kaelig
  9. 9. github.com/guardian/frontend ~30 per7s0o ncnoenst rqibuui tteouurcshent au HTML/CSS @kaelig
  10. 10. github.com/guardian/frontend ~30 per7s0o ncnoenst rqibuui tteouurcshent au ~25 00H0T lMigLn/eCsS dSe Sass @kaelig
  11. 11. github.com/guardian/frontend ~30 per7s0o ncnoenst rqibuui tteouurcshent au ~25 00H0T lMigLn/eCsS dSe Sass Cycle de déploiement ~4 fois par jour @kaelig
  12. 12.    Designers   Product Manager Engineers  Editorial  UX Designer  @kaelig
  13. 13. Idée Prototype Test @kaelig
  14. 14. Real User Monitoring @kaelig
  15. 15. A/B tests @kaelig
  16. 16. Idée Prototype Test @kaelig
  17. 17. Prototype Idée Test @kaelig
  18. 18. @kaelig Le contexte De nombreux intervenants Niveaux d’expertise variés Vocabulaires différents On déploie très tôt et souvent On souhaite que ça continue ainsi
  19. 19. Scala AWS Developer tools Play! Bower Grunt Sass RequireJS Node.js Selenium Webdriver Ruby TeamCity GitHub PhantomJS Angular Beer
  20. 20. sass-lang.com @kaelig
  21. 21. @kaelig
  22. 22. La couleur du titre est “gris clair” @kaelig
  23. 23. Prototype Idea Test @kaelig
  24. 24. Prototype Idea Test @kaelig Design system (couleurs)
  25. 25. $c-brandBlue: #005689; .nav { background: $c-brandBlue; } @kaelig .nav { background: #005689; }
  26. 26. .title { color: $c-neutral-1; } @kaelig .title { color: #333333; }
  27. 27. Ce que tu as appris • Le code est un moyen de communication (ici grâce aux variables) • Un pré-processeur aide à éviter les copier-coller constants @kaelig
  28. 28. Breakpoints @kaelig
  29. 29. @media (min-width: 37.5em) {} @media (min-width: $tablet) {} @kaelig
  30. 30. sass-mq git.io/sass-mq • Abstraction réutilisable pour @media queries • Chaque point de rupture (breakpoint) a un nom pratique à retenir • Simplifie le support des anciens navigateurs (Internet Explorer 8) @kaelig
  31. 31. @media (min-width: 37.5em) {} @media (min-width: $tablet) {} @include mq($from: tablet) {} @include mq(tablet, desktop) {} @include mq($until: tablet) {} @kaelig
  32. 32. sass-mq: exemple Sass CSS .nav { background: $c-brandBlue; ! @include mq($from: tablet) { background: transparent; } } .nav { background: #005689; } @media all and (min-width: 37.5em) { .nav { background: transparent; } }
  33. 33. Nommer les breakpoints $mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop: 980px, wide: 1300px ); @kaelig
  34. 34. Ce que tu as appris • Les choses complexes peuvent être abstraites derrière des abstractions plus simples • Prendre le temps de s’outiller va s’avérer très productif @kaelig
  35. 35. La grille @kaelig
  36. 36. 4 à 16 colonnes de 60px Gouttières : 20px Marges externes : < 480px : 10px >= 480px : 20px
  37. 37. Une colonne, une gouttière… Ça fait combien en pixels ? @kaelig
  38. 38. .element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } } 3 colonnes par défaut, puis 7 colonnes sur desktop
  39. 39. https://github.com/guardian/guss-grid-system @kaelig
  40. 40. .element { width: gs-span(3); } @include mq(desktop) { .element { width: gs-span(7); } } 3 colonnes par défaut, puis 7 colonnes sur desktop
  41. 41. Baser ses points de rupture sur la grille @kaelig
  42. 42. Use break points to defend the integrity of your design instead of basing it off a set media size. @kaelig Ethan Marcotte @beep
  43. 43. $mq-breakpoints: (! mobile: gs-span(4) + $gs-gutter, // 320px! mobileLandscape: gs-span(6) + $gs-gutter, // 480px! phablet: gs-span(8) + $gs-gutter*2, // 660px! tablet: gs-span(9) + $gs-gutter*2, // 740px! desktop: gs-span(12) + $gs-gutter*2, // 980px! leftCol: gs-span(14) + $gs-gutter*2, // 1140px! wide: gs-span(16) + $gs-gutter*2, // 1300px! );! @kaelig
  44. 44. • Les machines sont bonnes en math et nous évitent d’en faire • Le tout est autre que la somme de ses parties (grille + breakpoints = ❤) @kaelig Ce que tu as appris
  45. 45. 20px/28px bolder 16px/20px normal 32px/36px normal 14px/18px normal 14px/18px normal 32px/36px normal 14px/18px normal 14px/18px normal 16px/20px normal text sans 12px/16px text sans 12px/16px 20px/24px normal
  46. 46. ? ? ? @kaelig
  47. 47. Échelle typographique : exemple Sass CSS .element { @include fs-header(1); } .element { font-size: 16px; line-height: 20px; font-family: "Guardian Egyptian Headline", Georgia, serif; font-weight: 900; }
  48. 48. 20px/28px bolder 16px/20px normal 32px/36px normal 14px/18px normal 14px/18px normal 32px/36px normal 14px/18px normal 14px/18px normal 16px/20px normal text sans 12px/16px text sans 12px/16px 20px/24px normal
  49. 49. Header 3 Headline 2 Headline 1 Headline 6 Headline 1 Headline 1 Headline 2 Headline 6 Text Sans 1 Text Sans 1 Headline 3 Headline 1
  50. 50. Ce que tu as appris • Quand aucune convention n’est partagée, on peut en créer une commune • Inclure les éléments de design directement dans le code améliorent la cohérence du design @kaelig
  51. 51. Prototype Idée Test @kaelig
  52. 52. Prototype Idée Test @kaelig Éléments du design
  53. 53. Prototype Idée Test @kaelig Éléments du design Éléments du design
  54. 54. Prototype Idée Test @kaelig Éléments du design Éléments du design Éléments du design
  55. 55. Éléments du design @kaelig Prototype Idée Test
  56. 56. Faites le pont entre les designers et les développeurs @kaelig Credits: Mars Climate Orbiter 2 — By NASA/JPL/Corby Waste [Public domain], via Wikimedia Commons — http://commons.wikimedia.org/wiki/File %3AMars_Climate_Orbiter_2.jpg Rocket — NASA/Getty Images Hipster — Cámara espía — https://flic.kr/p/cXMuEd Mug — slavik_V — https://flic.kr/p/9WgM9D swiss style grid sample — Filipe Varela — https://flic.kr/p/4xLDb1 Gene Wilburn — A Splash of Colour — https://flic.kr/p/5VK8kv Glasses designed by Okan Benn from the Noun Project Document designed by Jamison Wieser from the Noun Project Edward Snowden — THE GUARDIAN/AFP/Getty Images

×