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
Faire le pont entre designers et développeurs au Guardian
1. Faire le pont entre designers
et développeurs au Guardian
@kaelig
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
23. @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
34. 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
37. 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
41. 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
53. • 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
54.
55. 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
60. 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
61. 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
62. 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
68. 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