Faire le pont entre designers 
et développeurs au Guardian 
@kaelig
Pour qui est cette 
conférence ? 
Ceux qui écrivent du code 
Ceux qui n’en écrivent pas 
Ceux qui utilisent des pré-proces...
Mars Climate Orbiter 
23 Septembre 1999
theguardian 
@kaelig 
.com 
Établi en 1821 Lancé en 1999 (.co.uk) 
UK seulement Mondial 
180,000 copies 105,000,000 unique...
@kaelig
Source: http://www.html5rocks.com/static/images/screenshots/crossdevice/image16.gif
github.com/guardian/frontend 
@kaelig
github.com/guardian/frontend 
70 contributeurs 
@kaelig
github.com/guardian/frontend 
~30 per7s0o ncnoenst rqibuui tteouurcshent au 
HTML/CSS 
@kaelig
github.com/guardian/frontend 
~30 per7s0o ncnoenst rqibuui tteouurcshent au 
~25 00H0T lMigLn/eCsS dSe Sass 
@kaelig
github.com/guardian/frontend 
~30 per7s0o ncnoenst rqibuui tteouurcshent au 
~25 00H0T lMigLn/eCsS dSe Sass Cycle de déplo...
 
 
 
Designers 
 
 Product Manager 
Engineers 
 
Editorial 
 
UX Designer 
 
@kaelig
Idée 
Prototype 
Test 
@kaelig
Real User Monitoring 
@kaelig
A/B tests 
@kaelig
Idée 
Prototype 
Test 
@kaelig
Prototype 
Idée Test 
@kaelig
@kaelig 
Le contexte 
De nombreux intervenants 
Niveaux d’expertise variés 
Vocabulaires différents 
On déploie très tôt e...
Scala 
AWS 
Developer tools 
Play! 
Bower 
Grunt Sass RequireJS 
Node.js 
Selenium 
Webdriver 
Ruby 
TeamCity 
GitHub 
Pha...
sass-lang.com 
@kaelig
@kaelig
La couleur du titre est “gris clair” 
@kaelig
Prototype 
Idea Test 
@kaelig
Prototype 
Idea Test 
@kaelig 
Design 
system 
(couleurs)
$c-brandBlue: #005689; 
.nav { background: $c-brandBlue; } 
@kaelig 
.nav { background: #005689; }
.title { color: $c-neutral-1; } 
@kaelig 
.title { color: #333333; }
Ce que tu as appris 
• Le code est un moyen de 
communication (ici grâce aux variables) 
• Un pré-processeur aide à éviter...
Breakpoints 
@kaelig
@media (min-width: 37.5em) {} 
@media (min-width: $tablet) {} 
@kaelig
sass-mq 
git.io/sass-mq 
• Abstraction réutilisable pour @media queries 
• Chaque point de rupture (breakpoint) a un 
nom ...
@media (min-width: 37.5em) {} 
@media (min-width: $tablet) {} 
@include mq($from: tablet) {} 
@include mq(tablet, desktop)...
sass-mq: exemple 
Sass 
CSS 
.nav { 
background: $c-brandBlue; 
! 
@include mq($from: tablet) { 
background: transparent; ...
Nommer les breakpoints 
$mq-breakpoints: ( 
mobile: 320px, 
tablet: 740px, 
desktop: 980px, 
wide: 1300px 
); 
@kaelig
Ce que tu as appris 
• Les choses complexes peuvent être 
abstraites derrière des abstractions 
plus simples 
• Prendre le...
La grille 
@kaelig
4 à 16 colonnes de 60px 
Gouttières : 20px 
Marges externes : 
< 480px : 10px 
>= 480px : 20px
Une colonne, une gouttière… 
Ça fait combien en pixels ? 
@kaelig
.element { 
width: 220px; 
} 
@media (min-width: 56.25em) { 
.element { 
width: 540px; 
} 
} 
3 colonnes par défaut, 
puis...
https://github.com/guardian/guss-grid-system @kaelig
.element { 
width: gs-span(3); 
} 
@include mq(desktop) { 
.element { 
width: gs-span(7); 
} 
} 
3 colonnes par défaut, 
p...
Baser ses points de rupture sur la grille 
@kaelig
Use break points to defend the integrity of your 
design instead of basing it off a set media size. 
@kaelig 
Ethan Marcot...
$mq-breakpoints: (! 
mobile: gs-span(4) + $gs-gutter, // 320px! 
mobileLandscape: gs-span(6) + $gs-gutter, // 480px! 
phab...
• Les machines sont bonnes en math et 
nous évitent d’en faire 
• Le tout est autre que la somme de ses 
parties (grille +...
20px/28px bolder 
16px/20px normal 
32px/36px normal 
14px/18px normal 
14px/18px normal 
32px/36px normal 
14px/18px norm...
? 
? 
? 
@kaelig
Échelle typographique : exemple 
Sass 
CSS 
.element { 
@include fs-header(1); 
} 
.element { 
font-size: 16px; 
line-heig...
20px/28px bolder 
16px/20px normal 
32px/36px normal 
14px/18px normal 
14px/18px normal 
32px/36px normal 
14px/18px norm...
Header 3 
Headline 2 
Headline 1 
Headline 6 
Headline 1 
Headline 1 
Headline 2 
Headline 6 
Text Sans 1 
Text Sans 1 
He...
Ce que tu as appris 
• Quand aucune convention n’est partagée, 
on peut en créer une commune 
• Inclure les éléments de de...
Prototype 
Idée Test 
@kaelig
Prototype 
Idée Test 
@kaelig 
Éléments 
du design
Prototype 
Idée Test 
@kaelig 
Éléments 
du design 
Éléments 
du design
Prototype 
Idée Test 
@kaelig 
Éléments 
du design 
Éléments 
du design 
Éléments 
du design
Éléments du 
design 
@kaelig 
Prototype 
Idée Test
Faites le pont entre 
les designers 
et les développeurs 
@kaelig 
Credits: 
Mars Climate Orbiter 2 — By NASA/JPL/Corby Wa...
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Prochain SlideShare
Chargement dans…5
×

Faire le pont entre designers et développeurs au Guardian

2 286 vues

Publié le

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

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

Aucun téléchargement
Vues
Nombre de vues
2 286
Sur SlideShare
0
Issues des intégrations
0
Intégrations
491
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×