Post on 28-Nov-2014
description
Faire le pont entre les développeurs et les
designers au Guardian
@kaelig
À qui s’adresse cette conférence ?
@kaelig
À qui s’adresse cette conférence ?
Ceux qui écrivent du code
@kaelig
À qui s’adresse cette conférence ?
Ceux qui écrivent du codeCeux qui n’en écrivent pas
@kaelig
À qui s’adresse cette conférence ?
Ceux qui écrivent du codeCeux qui n’en écrivent pas
Ceux qui savent ce qu’est un préprocesseur CSS
@kaelig
À qui s’adresse cette conférence ?
Ceux qui écrivent du codeCeux qui n’en écrivent pas
Ceux qui savent ce qu’est un préprocesseur CSSCeux qui n’en ont jamais entendu parler
@kaelig
Mars Climate Orbiter23 septembre 1999
@kaelig
theguardian.comhttp://next.theguardian.com
@kaelig
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS
@kaelig
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS
@kaelig
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS100 millions de visiteurs
uniques par mois
@kaelig
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS100 millions de visiteurs
uniques par moiscycle de déploiement :
~4 fois par jour
@kaelig
@kaelig
Idée
@kaelig
Idée
@kaelig
Prototype
Idée
@kaelig
Prototype
Idée
@kaelig
Prototype
Idée
Test
@kaelig
Prototype
Idée Test
@kaelig
Mesure en temps réel@kaelig
A/B tests@kaelig
Outils de développement
Scala
Play!
GruntSass
RequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJS
@kaelig
Outils de développement
Scala
Play!
Grunt SassRequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJS
@kaelig
La couleur du titre de l’article est “gris clair”.
@kaelig
@kaelig
$beccaPurple: #663399;@kaelig
Ce que tu as appris
@kaelig
Ce que tu as appris
• Le code est un outil de communication (ici : via les variables)
@kaelig
Ce que tu as appris
• Le code est un outil de communication (ici : via les variables)
• Un pré-processeur aide à éviter les copier-coller
@kaelig
Les breakpoints
@kaelig
sass-mq
• Abstraction des @media queries réutilisable
• Un breakpoint est appelé par son nom au lieu d’une mesure
github.io/sass-mq
@kaelig
CSS.header {!! background: blue;!}!@media all and (min-width: 37.5em) {!! .header {!! ! background: transparent;!! }!}
sass-mq : exemple
Sass.header {!! background: blue;!!! @include mq($from: tablet) {!! ! background: transparent;!! }!}
sass-mq : exemple
Sass
CSS
.header {!! background: blue;!!! @include mq($from: tablet) {!! ! background: transparent;!! }!}
.header {!! background: blue;!}!@media all and (min-width: 37.5em) {!! .header {!! ! background: transparent;!! }!}
Nommer ses breakpoints
$mq-breakpoints: (! mobile: 320px,! tablet: 740px,! desktop: 980px,! wide: 1300px!);!
@kaelig
Nommer ses breakpoints
mobile vs S tablet vs M
desktop vs L wide vs XL
@kaelig
Ce que tu as appris
@kaelig
Ce que tu as appris
• Les choses complexes techniquement peuvent être rendues simples dans le code
@kaelig
Ce que tu as appris
• Les choses complexes techniquement peuvent être rendues simples dans le code
• Coder des petits outils fait gagner en temps de conception, de maintenabilité, et en clarté
@kaelig
La grille
@kaelig
4 à 16 colonnes de 60px
Gouttière : 20px
Marges externes :
< 480px: 10px
> 480px: 20px
Une colonne, une gouttière… Ça fait combien en pixels ?
@kaelig
Baser ses breakpoints sur la grille
@kaelig
// Article breakpoints!$a-rightCol-width: gs-span(4);!$a-rightCol-trigger: gs-span(11) + $gs-gutter*2; // 900px!$a-leftCol-width: gs-span(2); // Grows to 3 columns on wide viewports!$a-leftCol-trigger: gs-span(13) + $gs-gutter*2; // 1060px!$a-leftColWide-width: gs-span(3);!!// Facia breakpoints!$facia-leftCol-trigger: gs-span(14) + $gs-gutter*2; // 1140px!!$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! desktopAd: 810px,!! // Article layout! rightCol: $a-rightCol-trigger,! leftCol: $a-leftCol-trigger,!! // Facia layout! faciaLeftCol: $facia-leftCol-trigger!);!
@kaelig
Ce que tu as appris
@kaelig
Ce que tu as appris
• Le code peut (doit) faire des maths à ta place
@kaelig
Ce que tu as appris
• Le code peut (doit) faire des maths à ta place
• Tu peux mixer différents composants du système de design (ici la grille et les breakpoints)
@kaelig
14px/18px normal14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal 14px/18px normal
20px/24px normal20px/24px normal
32px/36px normal
32px/36px normal
text sans 12px/16px
text sans 12px/16px
text sans 12px/16pxtext sans 12px/16px
20px/24px normal
20px/28px bolder
? ? ?
@kaelig
CSS.element {! font-size: 16px;! font-size: 1.6rem;! line-height: 20px;! line-height: 2rem;! font-family: "EgyptianHeadline", georgia, serif;! font-weight: 900;!}
échelle typographique : exemple
Sass .element {! @include fs-header(1);!}
CSS.element {! font-size: 16px;! font-size: 1.6rem;! line-height: 20px;! line-height: 2rem;! font-family: "EgyptianHeadline", georgia, serif;! font-weight: 900;!}
échelle typographique : exemple
Sass .element {! @include fs-header(1);!}
14px/18px normal14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal 14px/18px normal
20px/24px normal20px/24px normal
32px/36px normal
32px/36px normal
text sans 12px/16px
text sans 12px/16px
text sans 12px/16pxtext sans 12px/16px
20px/24px normal
20px/28px bolder
Headline 4
Headline 4
Headline 1Headline 1
Headline 2 Headline 2
Headline 1 Headline 1Data 1 Data 1
Data 1
Data 1
Headline 1
Headline 1
Page Header 3
Headline 1
Headline 2
Ce que tu as appris
@kaelig
Ce que tu as appris
• Lorsqu’aucune convention de nommage est en place, on peut en inventer une tous ensemble
@kaelig
Ce que tu as appris
• Lorsqu’aucune convention de nommage est en place, on peut en inventer une tous ensemble
• Mettre en place des valeurs par défaut dans le code peut améliorer la cohérence du design
@kaelig
3 colonnes par défaut et 7 colonnes sur écrans d’ordinateurs
.element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } }
3 colonnes par défaut et 7 colonnes sur écrans d’ordinateurs
.element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } }
.element { width: gs-span(3); ! @include mq(desktop) { width: gs-span(7); } }
Prototype
Idée Test
@kaelig
Prototype
Idée Test
Systèmede design
@kaelig
@kaelig
Bénéfices :
@kaelig
Bénéfices :
Code + communicatif
@kaelig
Bénéfices :
Code + communicatif
Abstraire le code compliqué
@kaelig
Faites le pont entre les designers et les développeurs
Crédits: 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
@kaelig