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.

Bridging the gap between designers and developers at the Guardian

8,969 views

Published on

There is often a vocabulary gap between designers an developers, who should aim towards a ubiquitous way of conversing about colours, typography, viewport sizes, or the responsive grid system of a digital product… To bridge this gap at the Guardian, we use a CSS pre-processor as a communication enabler through the abstractions it allows us to put in place.

Talk given at re:revelop 2014 in Bournemouth on 22/08/2014: http://redevelop.io/

Published in: Software
  • Be the first to comment

Bridging the gap between designers and developers at the Guardian

  1. 1. Bridging the gap between developers and designers at the Guardian
  2. 2. Who is this conference for?
  3. 3. Who is this conference for? The ones who write code
  4. 4. Who is this conference for? The ones who write code The ones who don’t
  5. 5. Who is this conference for? The ones who write code The ones who don’t The ones who use CSS pre-processors
  6. 6. Who is this conference for? The ones who write code The ones who don’t The ones who use CSS pre-processors The ones who never heard of them
  7. 7. Mars Climate Orbiter 23 September 1999
  8. 8. theguardian.com
  9. 9. github.com/guardian/frontend
  10. 10. github.com/guardian/frontend 66 contributors
  11. 11. github.com/guardian/frontend ~30 engi6n6e ecrosn ttoriubcuht oHrTsML/CSS
  12. 12. github.com/guardian/frontend ~30 en~g2i56n 60e e0cro0sn lttionriuebcsuh ot oHf rCTsSMSL/CSS
  13. 13. github.com/guardian/frontend ~30 en~g2i56n R60e ee0clro0esna ltstionreiue bccsuyh oct olHfe rCT sSMSL/CSS ~4 times per day
  14. 14.    Designers   Product Manager Engineers  Editorial  UX Designer 
  15. 15. Idea
  16. 16. Idea
  17. 17. Idea Prototype
  18. 18. Idea Prototype
  19. 19. Idea Prototype Test
  20. 20. Prototype Idea Test
  21. 21. @kaelig Our context
  22. 22. @kaelig Our context Lots of contributors
  23. 23. @kaelig Our context Lots of contributors Different skill sets
  24. 24. @kaelig Our context Lots of contributors Different skill sets People speaking different languages
  25. 25. @kaelig Our context Lots of contributors Different skill sets People speaking different languages We release early and often
  26. 26. @kaelig Our context Lots of contributors Different skill sets People speaking different languages We release early and often We want to keep it that way
  27. 27. Scala Developer tools Play! Grunt Sass Bower RequireJS AWS Node.js Selenium Webdriver Ruby TeamCity GitHub PhantomJS Angular Beer
  28. 28. Scala AWS Developer tools Play! Bower Grunt Sass RequireJS Node.js Selenium Webdriver Ruby TeamCity GitHub PhantomJS Angular Beer
  29. 29. sass-lang.com @kaelig
  30. 30. The colour for the article’s headline is “light grey” @kaelig
  31. 31. @kaelig
  32. 32. $c-brandBlue: #005689; @kaelig
  33. 33. $c-brandBlue: #005689; .nav { background: $c-brandBlue; } @kaelig
  34. 34. $c-brandBlue: #005689; .nav { background: $c-brandBlue; } @kaelig .nav { background: #005689; }
  35. 35. Takeaways @kaelig
  36. 36. Takeaways • Code is a communication tool (here, thanks to variables) @kaelig
  37. 37. Takeaways • Code is a communication tool (here, thanks to variables) • A pre-processor avoids constant copy and pasting of specific values @kaelig
  38. 38. Breakpoints @kaelig
  39. 39. @kaelig
  40. 40. @media (min-width: 37.5em) {} @kaelig
  41. 41. @media (min-width: 37.5em) {} @media (min-width: $tablet) {} @kaelig
  42. 42. @media (min-width: 37.5em) {} @media (min-width: $tablet) {} @include mq(tablet) {} @kaelig
  43. 43. @media (min-width: 37.5em) {} @media (min-width: $tablet) {} @include mq(tablet) {} @include mq(tablet, desktop) {} @kaelig
  44. 44. @media (min-width: 37.5em) {} @media (min-width: $tablet) {} @include mq(tablet) {} @include mq(tablet, desktop) {} @include mq($to: tablet) {} @kaelig
  45. 45. sass-mq git.io/sass-mq • Reusable @media query abstraction • A breakpoint has a name, instead of being called by its width • Simplifies cross-browser support (IE8) @kaelig
  46. 46. sass-mq: example CSS .nav { background: #005689; } @media all and (min-width: 37.5em) { .nav { background: transparent; } } Sass .nav { background: $c-brandBlue; ! @include mq($from: tablet) { background: transparent; } }
  47. 47. sass-mq: example 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; } }
  48. 48. Naming breakpoints $mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop: 980px, wide: 1300px ); @kaelig
  49. 49. Naming breakpoints mobile vs S tablet vs M desktop vs L wide vs XL @kaelig
  50. 50. Takeaways @kaelig
  51. 51. Takeaways • Technically complex things can be made much simpler looking @kaelig
  52. 52. Takeaways • Technically complex things can be made much simpler looking • Taking time to code small tools can actually be super productive @kaelig
  53. 53. The grid @kaelig
  54. 54. 4 to 16 60px columns Gutter: 20px Outer margins: < 480px: 10px >= 480px: 20px
  55. 55. A column, a gutter… How much is that in pixels? @kaelig
  56. 56. .element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } } 3 columns by default, then 7 columns on desktops
  57. 57. https://github.com/guardian/guss-grid-system @kaelig
  58. 58. .element { width: gs-span(3); } @include mq(desktop) { .element { width: gs-span(7); } } 3 columns by default, then 7 columns on desktops
  59. 59. Basing breakpoints on the grid @kaelig
  60. 60. $right-column: gs-span(4); $left-column: gs-span(2); // Grows to 3 columns on wide viewports $left-column-wide: gs-span(3); ! $mq-breakpoints: ( mobile: gs-span(4) + $gs-gutter, // 320px tablet: gs-span(9) + $gs-gutter*2, // 740px desktop: gs-span(12) + $gs-gutter*2, // 980px wide: gs-span(16) + $gs-gutter*2, // 1300px ! // Tweakpoints mobileLandscape: gs-span(6) + $gs-gutter, // 480px ! // Content rightCol: gs-span(11) + $gs-gutter*2, // 900px leftCol: gs-span(13) + $gs-gutter*2, // 1060px ! // Facia faciaLeftCol: gs-span(14) + $gs-gutter*2 // 1140px ); @kaelig
  61. 61. Takeaways @kaelig
  62. 62. Takeaways • Machines can (must) do maths, so you don’t have to @kaelig
  63. 63. Takeaways • Machines can (must) do maths, so you don’t have to • The sum of the parts does not equal the whole (grid system + breakpoints) @kaelig
  64. 64. 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
  65. 65. ? ? ? @kaelig
  66. 66. CSS Type scale example Sass .element { .element font-size: { 16px; @line-include height: fs-header(20px; 1); } font-family: "Guardian Egyptian Headline", Georgia, serif; font-weight: 900; }
  67. 67. CSS Type scale example Sass .element { @include fs-header(1); } .element { font-size: 16px; line-height: 20px; font-family: "Guardian Egyptian Headline", Georgia, serif; font-weight: 900; }
  68. 68. 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
  69. 69. 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
  70. 70. Isn’t this putting a cap on creativity?
  71. 71. Takeaways @kaelig
  72. 72. Takeaways • When no naming convention is in place, you can get together and set a new one @kaelig
  73. 73. Takeaways • When no naming convention is in place, you can get together and set a new one • Putting design principles into in code can improve UI consistency @kaelig
  74. 74. Prototype Idea Test @kaelig Design system Design system Design system
  75. 75. Design system @kaelig Prototype Idea Test
  76. 76. Bridge the gap between developers and designers @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 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

×