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é-processeurs
Ceux qui n’en ont jamais entendu parler
@kaelig

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 browsers
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
~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éploiement
~4 fois par jour
@kaelig




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 et souvent
On souhaite que ça continue ainsi

Scala
AWS
Developer tools
Play!
Bower
Grunt Sass RequireJS
Node.js
Selenium
Webdriver
Ruby
TeamCity
GitHub
PhantomJS
Angular
Beer

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 les
copier-coller constants
@kaelig

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 pratique à retenir
• Simplifie le support des anciens navigateurs
(Internet Explorer 8)
@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

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

?
?
?
@kaelig

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

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

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

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é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 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