Faire le pont entre designers et développeurs au Guardian

@kaelig

Pour qui est cette conférence ?

Ceux qui écrivent du codeCeux qui n’en écrivent pas

Ceux qui utilisent des pré-processeursCeux qui n’en ont jamais entendu parler

@kaelig

Mars Climate Orbiter23 Septembre 1999

theguardian

@kaelig

.com

180,000 copies 105,000,000 unique browsers

Établi en 1821 Lancé en 1999 (.co.uk)

UK seulement Mondial

Données: Août 2014

@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

70 contributeurs~30 personnes qui touchent au HTML/CSS

@kaelig

github.com/guardian/frontend

70 contributeurs~30 personnes qui touchent au HTML/CSS~25 000 lignes de Sass

@kaelig

github.com/guardian/frontend

70 contributeurs~30 personnes qui touchent au HTML/CSS~25 000 lignes de SassCycle de déploiement

~4 fois par jour

@kaelig

Product Manager

Designers

Engineers

Editorial

UX Designer

@kaelig

Prototype

Idée

Test

@kaelig

Real User Monitoring@kaelig

A/B tests@kaelig

Prototype

Idée

Test

@kaelig

Prototype

Idée Test

@kaelig

@kaelig

De nombreux intervenantsNiveaux d’expertise variés

Vocabulaires différents

On déploie très tôt et souventOn souhaite que ça continue ainsi

Le contexte

Developer tools

Scala

Play!

GruntSass

RequireJS

Bower

AWS

Node.jsSelenium

WebdriverRuby

TeamCity

GitHub

PhantomJSAngular

Beer

sass-lang.com

@kaelig

@kaelig

La couleur du titre est “gris clair”

@kaelig

Prototype

Idea Test

@kaelig

Prototype

Idea Test

@kaelig

Designsystem

(couleurs)

@kaelig

.nav { background: #005689; }

$c-brandBlue: #005689;.nav { background: $c-brandBlue; }

@kaelig

.title { color: #333333; }

.title { color: $c-neutral-1; }

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

Breakpoints

@kaelig

@media (min-width: 37.5em) {}

@media (min-width: $tablet) {}

@kaelig

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)

git.io/sass-mq

@kaelig

@media (min-width: 37.5em) {}

@media (min-width: $tablet) {}

@include mq($from: tablet) {}@include mq(tablet, desktop) {}@include mq($until: tablet) {}

@kaelig

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; } }

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 temps de s’outiller va s’avérer très productif

@kaelig

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 7 colonnes sur desktop

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, puis 7 colonnes sur desktop

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 Marcotte @beep

$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

• 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

16px/20px normal14px/18px normal

14px/18px normal

14px/18px normal

14px/18px normal

16px/20px normal

32px/36px normal

32px/36px normal

text sans 12px/16px

text sans 12px/16px

20px/24px normal

20px/28px bolder

? ? ?

@kaelig

CSS

Sass

.element { font-size: 16px; line-height: 20px; font-family: "Guardian Egyptian Headline", Georgia, serif; font-weight: 900; }

.element { @include fs-header(1); }

Échelle typographique : exemple

16px/20px normal14px/18px normal

14px/18px normal

14px/18px normal

14px/18px normal

16px/20px normal

32px/36px normal

32px/36px normal

text sans 12px/16px

text sans 12px/16px

20px/24px normal

20px/28px bolder

Headline 2Headline 1

Headline 1

Headline 1

Headline 2

Headline 6

Headline 6

Text Sans 1

Text Sans 1

Headline 3

Header 3

Headline 1

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

Prototype

Idée Test

@kaelig

Prototype

Idée Test

@kaelig

Élémentsdu design

Prototype

Idée Test

@kaelig

Élémentsdu design

Élémentsdu design

Prototype

Idée Test

@kaelig

Élémentsdu design

Élémentsdu design

Élémentsdu design

Éléments dudesign

@kaelig

Prototype

Idée Test

Faites le pont entreles designers

et les développeurs

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

@kaelig