SlideShare une entreprise Scribd logo

Faire le pont entre designers et développeurs avec Sass au Guardian

**31 Octobre 2014** : Présentation mise à jour pour la conférence Blend Web Mix disponibles sur http://www.slideshare.net/kaelig/faire-le-pont-entre-designers-et-developpeurs-au-guardian Les pré-processeurs CSS sont d’excellents outils pour les développeurs. Au Guardian nous sommes allés plus loin, procurant un réel bénéfice au niveau de la communication en utilisant les variables et mixins Sass comme socle pour un vocabulaire et des concepts communs partagés entre développeurs et designers. Présentation donnée en tant qu'invité d'honneur à la KiwiParty (http://kiwiparty.fr/) le vendredi 13 juin 2014.

1  sur  73
Télécharger pour lire hors ligne
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 code
Ceux qui n’en écrivent pas
@kaelig
À qui s’adresse cette
conférence ?
Ceux qui écrivent du code
Ceux 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 code
Ceux qui n’en écrivent pas
Ceux qui savent ce qu’est un préprocesseur CSS
Ceux qui n’en ont jamais entendu parler
@kaelig

Recommandé

Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianKaelig Deloumeau-Prigent
 
Laptop XO - Parte 1
Laptop XO - Parte 1Laptop XO - Parte 1
Laptop XO - Parte 1ArmandoRM
 
Projecte de recerca 4t ESO. Aprenem a citar les fonts d'informació
Projecte de recerca 4t ESO. Aprenem a citar les fonts d'informacióProjecte de recerca 4t ESO. Aprenem a citar les fonts d'informació
Projecte de recerca 4t ESO. Aprenem a citar les fonts d'informacióBiblioteca Escola Joan Pelegrí
 
Alarma habitacio-INVENTS-2014
Alarma habitacio-INVENTS-2014Alarma habitacio-INVENTS-2014
Alarma habitacio-INVENTS-2014ciclemitja34
 
20120602 reglamento de seguridad secciones 802
20120602 reglamento de seguridad secciones 80220120602 reglamento de seguridad secciones 802
20120602 reglamento de seguridad secciones 802master_da
 
Aprende de Google
Aprende de GoogleAprende de Google
Aprende de GoogleKarenthjp
 

Contenu connexe

En vedette

Trabajo empresarial 145
Trabajo empresarial 145Trabajo empresarial 145
Trabajo empresarial 145chavezmurillo
 
Internet, Protocolos y Direcciones IP
Internet, Protocolos y Direcciones IP Internet, Protocolos y Direcciones IP
Internet, Protocolos y Direcciones IP Katty Stefy Coro
 
Les bibliothèques sur le web : réseaux et médias sociaux
Les bibliothèques sur le web : réseaux et médias sociauxLes bibliothèques sur le web : réseaux et médias sociaux
Les bibliothèques sur le web : réseaux et médias sociauxPauline Moirez
 
Réunion de quartier du 20 oct 2011 - Secteur E
Réunion de quartier du 20 oct 2011 - Secteur ERéunion de quartier du 20 oct 2011 - Secteur E
Réunion de quartier du 20 oct 2011 - Secteur EGuérande
 
Projet Societal Humanologique Sl Sh
Projet  Societal  Humanologique  Sl ShProjet  Societal  Humanologique  Sl Sh
Projet Societal Humanologique Sl ShGuy Finné
 
Ecrire pour le web
Ecrire pour le webEcrire pour le web
Ecrire pour le websdistasi
 
Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...
Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...
Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...Fondation pour la Recherche Médicale
 
Transporte marítimo
Transporte marítimoTransporte marítimo
Transporte marítimoSFrutosLD
 

En vedette (20)

Trabajo empresarial 145
Trabajo empresarial 145Trabajo empresarial 145
Trabajo empresarial 145
 
Internet, Protocolos y Direcciones IP
Internet, Protocolos y Direcciones IP Internet, Protocolos y Direcciones IP
Internet, Protocolos y Direcciones IP
 
Viento madera
Viento maderaViento madera
Viento madera
 
Les bibliothèques sur le web : réseaux et médias sociaux
Les bibliothèques sur le web : réseaux et médias sociauxLes bibliothèques sur le web : réseaux et médias sociaux
Les bibliothèques sur le web : réseaux et médias sociaux
 
Primavera
PrimaveraPrimavera
Primavera
 
Trastornos Alimentarios
Trastornos AlimentariosTrastornos Alimentarios
Trastornos Alimentarios
 
Cultura de calidad Blogger
Cultura de calidad BloggerCultura de calidad Blogger
Cultura de calidad Blogger
 
La bibliothèque émancipatrice : La médiathèque, signe extérieur de richesse (...
La bibliothèque émancipatrice : La médiathèque, signe extérieur de richesse (...La bibliothèque émancipatrice : La médiathèque, signe extérieur de richesse (...
La bibliothèque émancipatrice : La médiathèque, signe extérieur de richesse (...
 
Reveuse nb
Reveuse nbReveuse nb
Reveuse nb
 
tema 4
tema 4tema 4
tema 4
 
Granada Smart Cities
Granada Smart CitiesGranada Smart Cities
Granada Smart Cities
 
Actividad 4
Actividad 4Actividad 4
Actividad 4
 
Réunion de quartier du 20 oct 2011 - Secteur E
Réunion de quartier du 20 oct 2011 - Secteur ERéunion de quartier du 20 oct 2011 - Secteur E
Réunion de quartier du 20 oct 2011 - Secteur E
 
Projet Societal Humanologique Sl Sh
Projet  Societal  Humanologique  Sl ShProjet  Societal  Humanologique  Sl Sh
Projet Societal Humanologique Sl Sh
 
Ajencia de viajes
Ajencia de viajesAjencia de viajes
Ajencia de viajes
 
Recursos hidrológicos del perú
Recursos hidrológicos del perúRecursos hidrológicos del perú
Recursos hidrológicos del perú
 
Ecrire pour le web
Ecrire pour le webEcrire pour le web
Ecrire pour le web
 
Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...
Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...
Spécial ISF : le programme grands équipement de la Fondation pour la Recherch...
 
Iut2
Iut2Iut2
Iut2
 
Transporte marítimo
Transporte marítimoTransporte marítimo
Transporte marítimo
 

Similaire à Faire le pont entre designers et développeurs avec Sass au Guardian

Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs csspefringant
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleKaelig Deloumeau-Prigent
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsMicrosoft
 
Un rythme pour les gouverner tous !
Un rythme pour les gouverner tous !Un rythme pour les gouverner tous !
Un rythme pour les gouverner tous !Jonathan Levaillant
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)Corinne Schillinger
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
 
Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Mehdi Kabab
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesRaphaël Goetter
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !matparisot
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Mathieu Parisot
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Aurélien Maury
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirYves Van Goethem
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.lessVISEO
 
Css maintenable - Morgane Hervé
Css maintenable - Morgane HervéCss maintenable - Morgane Hervé
Css maintenable - Morgane HervéWeb à Québec
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Raphaël Goetter
 
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019Naomi Hauret
 

Similaire à Faire le pont entre designers et développeurs avec Sass au Guardian (20)

Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
 
Un rythme pour les gouverner tous !
Un rythme pour les gouverner tous !Un rythme pour les gouverner tous !
Un rythme pour les gouverner tous !
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
Css maintenable - Morgane Hervé
Css maintenable - Morgane HervéCss maintenable - Morgane Hervé
Css maintenable - Morgane Hervé
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 

Plus de Kaelig Deloumeau-Prigent

State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)Kaelig Deloumeau-Prigent
 
State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)Kaelig Deloumeau-Prigent
 
Bridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the GuardianBridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the GuardianKaelig Deloumeau-Prigent
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comKaelig Deloumeau-Prigent
 
BBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardBBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardKaelig Deloumeau-Prigent
 
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCResponsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCKaelig Deloumeau-Prigent
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent
 
Temps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementTemps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementKaelig Deloumeau-Prigent
 
Optimisation des performances d'un site web
Optimisation des performances d'un site webOptimisation des performances d'un site web
Optimisation des performances d'un site webKaelig Deloumeau-Prigent
 

Plus de Kaelig Deloumeau-Prigent (11)

State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)
 
State of the Sass - The Mixin (May 2016)
State of the Sass - The Mixin (May 2016)State of the Sass - The Mixin (May 2016)
State of the Sass - The Mixin (May 2016)
 
State of the Sass - The Mixin
State of the Sass - The MixinState of the Sass - The Mixin
State of the Sass - The Mixin
 
State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)
 
Bridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the GuardianBridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the Guardian
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
 
BBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardBBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and Mustard
 
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCResponsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBC
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
Temps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementTemps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencement
 
Optimisation des performances d'un site web
Optimisation des performances d'un site webOptimisation des performances d'un site web
Optimisation des performances d'un site web
 

Faire le pont entre designers et développeurs avec Sass au Guardian

Notes de l'éditeur

  1. Le 23 septembre 1999, la sonde Mars Climate Orbiter est détruite lors de son entrée dans l’atmosphère martienne. Lors du calcul de la descente de la sonde dans l’atmosphere, ils ont fait un mix entre les pouces et les centimètres sans s’en rendre compte, avec les résultats que vous savez. Dans l’histoire, on ne peut pas vraiment parler d’erreur de calcul, puisque tous les ingénieurs avaient raison… à leur manière. Ce que cette histoire montre en revanche, c’est que de travailler sur un meme projet avec différents référentiels peut avoir des conséquences *plutôt* désastreuses.
  2. Je suis développeur sur le nouveau site du Guardian, un journal anglais dont vous avez peut-être entendu parler rapport aux histoires sur la vie privée et la NSA, sur lequel je travaille avec des designers, des journalistes, et de nombreux autres rôles qui vont parler des langages différents, un peu comme nos scientifiques de la NASA parlaient en pouces et en centimetres. Aujourd’hui si vous le voulez bien, j’aimerais qu’on voie comment on a réussi à adopter un langage commun entre les développeurs et les designers.
  3. Pour commencer, un aperçu du projet L’entièreté du site est disponible sur GitHub en open-source. On y compte 57 contributeurs. Environ la moitié des contributeurs est amenée à toucher à HTML et CSS, avec des niveaux d’expertise très variables. Notre base de code CSS est relativement grosse. On y compte environ 16000 lignes de code et cela grandit au fur et à mesure que nous ajoutons des fonctionnalités. Et nous déployons une nouvelle version du site à peu près 4 fois par jour
  4. Quand je dis qu’on déploie environ 4 fois par jour ou plus, en fait on déploie surtout des micro changements tout au long de la journée. Voilà comment ça se passe : on part d’une idée ou d’une hypothèse, comme par exemple en ce moment, “si on change la navigation comme ci ou comme ça, on pense que les utilisateurs vont découvrir davantage de news dans les sous-sections du site” et on va produire un ou plusieurs prototypes de cette idée. Ensuite pour tester si cette idée fonctionne ou pas, on teste le prototype auprès de nos utilisateurs, et on mesure leur réaction.
  5. Et on va recommencer ce process encore et encore en continuant à améliorer l’idée, ou bien on va la garder, ou bien finalement il arrive qu’on la jette à la poubelle parce qu’elle n’aura pas su prouver sa valeur lors de nos tests.
  6. Pour vérifier comment nos utilisateurs répondent au changement, on a pas mal d’outils accessibles à n’importe qui qui travaille au Guardian. Là par exemple on a une courbe qui mesure l’impact de nos changements sur la performance de chargement, et sur le nombre de pages vues.
  7. On va aussi faire beaucoup de tests avec plusieurs variantes. On a mis au point des outils faits maison pour mesurer des choses comme l’engagement, le nombre de pages vues, le nombre de clicks, les articles lus, etc. On a aussi des sondages en ligne, un labo pour tester l’utilisabilité de nos concepts, et des spécialistes des statistiques qui vont faire des analyses bien plus poussées dans certains cas. Donc vous imaginez bien que pour mettre en ligne nos idées le plus rapidement possible, on va devoir communiquer ultra efficacement entre designers, chefs de produit… et bien sûr développeurs vu que le livrable final, c’est du code en production.
  8. En parlant de développeurs, ils vont se servir d’un tas d’outils et de méthodes pour coder, tester, mettre en ligne, etc. Alors vous inquiétez pas, aujourd’hui je ne vous embêterai pas avec tous ces frameworks et langages !
  9. Je vais juste te parler un peu de Sass. T’inquiéte pas ca sera vraiment pas très technique. Si tu veux parler de la technique hésite surtout pas à venir me voir à l’after.
  10. Sass est un pré-processeur CSS, donc un programme qui ajoute des fonctionnalités à CSS comme les conditions if/else, les variables, les sélecteurs imbriqués les fonctions, de la manipulation de nombres, comme des additions, soustractions, multiplications, divisions… et plein d’autres trucs super cool. Aujourd’hui j’aimerai vous montrer à quoi peut nous servir d’avoir un langage plus élaboré que le langage CSS de base.
  11. Parlons de couleurs. Lorsqu’un designer communique une couleur, quel est son référentiel ? Sur quel système se base-t-il ? Dans le code, les couleurs sont généralement représentées sous forme de code hexadécimal ou RVB. On ne peut pas dire que c’est la manière la plus naturelle de communiquer une couleur. On a souvent eu le cas où un designer disait “faut que ce texte soit noir” quand en fait on n’a pas de noir pur dans notre charte. Si un développeur pouvait revenir vers le designer et lui dire “ah attends la couleur que tu m’as donnée n’existe pas dans la palette, est-ce que tu es sûr que c’est bien ça ?” Du coup on pourrait corriger et éviter la prolifération de couleurs.
  12. On a utilisé Sass pour représenter notre palette sous forme de variables directement au coeur du code source. On a nommé nos variables comme dans le langage couramment utilisé par les designers, donc ca colle à la “charte” de couleurs du Guardian et quand un designer me dit “couleur sport dark” c’est facile pour moi de l’écrire dans le code puisque j’ai justement une variable Sass qui s’appelle sport dark. Transformer des couleurs en variables, c’est l’étape la plus naturelle et la plus simple d’utilisation d’un pré-processeur et bientôt des custom properties en CSS. Je te conseille de le faire parce que ça aussi va t’éviter un max de copier-coller !
  13. Et alors du coup j’ai crée un dépot GitHub accessible à tout le monde qui contient toutes les couleurs qu’on utilise sur nos produits numériques. D’autres équipes peuvent s’y référer, et le résultat c’est que l’on va pouvoir utiliser les mêmes couleurs dans les applications et les différents sites. Pour les utilisateurs c’est top parce qu’ils ont une expérience plus cohérente en passant du papier au site mobile ou à l’application mobile. Encore une fois c’est complètement open source, vous pourrez trouver cette palette et le code à l’url affichée en bas de l’écran.
  14. Comme c’est un projet responsive, on fait appel aux @media queries pour adapter notre contenu à des périphériques de toutes tailles. Comme nous en a parlé Julien ce matin, on va justement pouvoir utiliser un préprocesseur CSS pour gérer nos media queries.
  15. J’ai créé un mixin Sass, c’est à dire une abstraction qui va prendre des instructions Sass en entrée et les transformer en media queries CSS en sortie. Ça s’appelle sass-mq et c’est disponible sur GitHub. On l’utilise au Guardian sur plusieurs projets et d’autres gens en dehors s’en servent aussi, donc n’hésitez pas à le télécharger pour faire la même chose que ce que je vais vous montrer.
  16. Alors ici on dit à notre header d’avoir un fond bleu. Puis avec une syntaxe propre au mixin sass-mq, on lui dit ensuite d’avoir un fond transparent pour les périphériques au moins aussi larges qu’une tablette.
  17. Sass va déchiffrer ces instructions et les compiler en CSS. On a donc codé quelque chose qui ressemble pas mal au langage que l’on parle entre designers et développeurs, sauf que c’est Sass qui s’occupe de faire la conversion vers un langage machine. http://sassmeister.com/gist/11261517
  18. Alors dans l’exemple précédent je parlais du breakpoint “tablet”. Dans cette slide vous pouvez voir la configuration qu’on renseigne pour dire à sass-mq quels breakpoints on va utiliser, et oh magie : tu y retrouves le breakpoint pour tablettes. Ça ressemble à une configuration JSON clé-valeur, sauf que c’est du Sass. À gauche on a les noms des points de rupture et à droite la largeur en pixels correspondante. C’est super explicite et facile à changer. Si demain tu décides que ton breakpoint mobile devrait être de 240 pixels, tu as juste à le changer dans cette configuration et toutes les media queries du site seront mises à jour lors de la compilation de Sass vers CSS.
  19. C’est pas facile de nommer ses breakpoints car d’un point de vue philosophique tu veux être le plus agnostique possible. Par exemple tu pourrais appeler les breakpoints principaux S, M, L, XL, XXL etc. Mais d’un point de vue pratique tu vas sans doute galérer dans la vraie vie car personne d’autre que toi utilisera des tailles de T-Shirt pour parler de breakpoints. En gros le challenge c’est de trouver quelque chose qui marche pour toi et aussi pour ton équipe. Pour nous c’était plus simple de nommer nos points de rupture avec des noms qui nous sont venus naturellement. Donc mobile, tablet, desktop et wide.
  20. Parlons de la grille de mise en page ! Une grille de mise en page est un canevas sur lequel vont se fixer les éléments du design. C’est une série de guides sur les axes horizontaux et verticaux, qui va permettre une distribution visuelle cohérente entre les éléments. On hérite ces principes du monde de l’édition papier, où les grilles de mise en page ont une importance capitale pour la lisibilité et la compréhension des contenus.
  21. Malheureusement, notre code à la base, il sait pas ce qu’on entend par “colonne” ni “gouttière”.
  22. Ce que j’ai fait, c’est une simple documentation de ces mesures que j’ai assigné à des variables Sass. N’importe qui peut comprendre de quoi il s’agit et au final on n’a plus besoin de se poser la question du nombre de pixels que doit faire un objet : c’est le nombre de colonnes qui compte. Enfin pour les marges on va utiliser la baseline et la gouttière comme unités.
  23. Je t’ai pas vraiment raconté toute l’histoire… en fait on a basé nos breakpoints sur la grille directement; laisse moi te montrer.
  24. Ici tu vois le contenu notre fichier de configuration de sass-mq de nos points de rupture majeurs et mineurs se base sur notre système de grille. Par exemple, notre breakpoint mobile est équivalent à 4 colonnes, et notre breakpoint pour tablettes équivaut à 9 colonnes. Ce qui est top c’est qu’on ne se base donc plus sur des largeur standard dans l’industrie, mais directement sur notre contenu et notre système de design.
  25. Parlons de typographie. Voici la maquette de la page d’accueil, on y trouve de nombreuses tailles, graisses, polices. Ça devient compliqué de s’y retrouver surtout que les designers ont des noms pour les polices dans photoshop, et les développeurs d’autres noms dans les CSS…
  26. On va charger de nombreuses webfonts mais celles-ci ont un nom dans notre CSS complètement différent des aux noms des typos installées sur les postes des graphistes. Et les fichiers webfonts eux-mêmes ont des noms un peu bizarres qui ont pas grand chose à voir avec le reste.
  27. Donc vu qu’il était assez compliqué de changer les conventions sur toute la chaine de fabrication du côté des designers comme des développeurs, on a mis au point une matrice qui référence tous ces noms en différents langages. En haut de la matrice, tu le nom qu’on va utiliser lorsqu’on parle ensemble. Et en dessous, le nom de la police dans CSS, son nom dans Sass et son nom dans les logiciels de graphisme. On a aussi une échelle typographique qui définit des tailles de polices. Que je sois développeur ou designer, je peux m’y référer pour savoir à quoi le langage commun correspond dans le code ou dans Photoshop. Au final on parle tous le même langage.
  28. Par exemple ici un designer me dit que mon element devrait être un header 1.
  29. Sass va déchiffrer ces instructions et les compiler en CSS, avec le bon nom de typo, la taille qui convient, la graisse qui va bien et en bonus, des bonnes pratiques de rétro-compatibilité sont automatiquement appliquées pour avoir un fallback en pixels si le navigateur ne comprend pas les valeurs en rem.
  30. La page que vous avez vu tout à l’heure, mais en y appliquant la matrice, devient un document que l’on peut décrire et dont on peut discuter bien plus facilement. Et surtout : d’un composant d’interface à l’autre, on est sûr que le rendu, la taille du texte et la typographie sont strictement les mêmes. Ça uniformise le code comme le design. http://sassmeister.com/gist/40e5e899a40ca0406803
  31. Je suis designer, je veux indiquer au développeur que la largeur d’un élément est de 3 colonnes par défaut et 7 colonnes sur écrans d’ordinateurs en se basant sur la grille de mise en page. Maintenant, je suis le développeur. Je vais devoir connaître la grille de mise en page, calculer le nombre de pixels que représentent 3 et 7 colonnes, puis les imbriquer dans les @media queries correspondantes, le tout en unités relatives et non en pixels. Et à chaque fois qu’on fera une modification, je devrai retourner me plonger dans le système pour y chopper la largeur d’une colonne, les noms de couleurs, la taille des breakpoints, etc. Avec un pré-processeur CSS, nous avons retranscrit notre schéma de pensée en code, et nos neurones peuvent être utilisées à des choses bien plus créatives que de faire des calculs mentaux.
  32. Revenons à notre de base
  33. Ca nous permettre d’être plus communicatif dans notre code, et d’abstraire des opérations complexes en des choses bien plus simples. Le but étant d’écrire quelque chose une fois, et de le rendre facile à réutiliser avec un maximum de bonnes pratiques et de cohérence déjà là par défaut.
  34. Grâce à cette utilisation de la technologie, plus de soucis d’erreurs de calculs à cause d’un mix entre les pouces et les centimètres. Donc en quelque sorte, faire le pont entre les designers et les développeurs, c’est les mettre au même niveau pour délivrer ensemble un message. Et bien délivrer ce message, que vous soyez à la NASA ou pas, c’est ce qui va faire la différence pour mettre votre projet en orbite.