Upload
kaelig-deloumeau-prigent
View
1.073
Download
3
Embed Size (px)
DESCRIPTION
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
Citation preview
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
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
@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