Tweet
Tweet

Slide 1

Slide 1 text

Louis Chenais - 2016 Optimiser son workflow frontend @chuckn0risk

Slide 2

Slide 2 text

https://twitter.com/chuckn0risk https://github.com/ChucKN0risK lchenais@gmail.com

Slide 3

Slide 3 text

Pourquoi cette présentation ? Suite de mon article publié en février concernant différents headers à implémenter.
 => 4 Responsive Navigation Principles

Slide 4

Slide 4 text

À QUI m’adrÉsse-je ? Principalement aux développeurs et aux designers curieux de mieux collaborer avec les membres de leur projet et d’automatiser leur workflow.

Slide 5

Slide 5 text

Le PROGRAMME Mieux collaborer c’est quoi ? Présentation d’une architecture modulaire

Slide 6

Slide 6 text

Mieux collaborer c’est quoi ? I

Slide 7

Slide 7 text

DÉROULEMent lambda d’un projet 1 Cahier des charges 2 Wireframes 3 Maquettes 4 Intégration

Slide 8

Slide 8 text

DÉROULEMent lambda d’un projet 1 Cahier des charges 2 Wireframes 3 Maquettes 4 Intégration Designers

Slide 9

Slide 9 text

Se partager le travail Credits : Tom Maslen, Testing & Debugging Responsive Web Design from Smashing Book 5

Slide 10

Slide 10 text

NOPE

Slide 11

Slide 11 text

C’est se parler, se comprendre et mettre en place les méthodes et les outils basés sur cette compréhension. En tant que développeur Front-End je me dois de comprendre comment travaillent les designers et les autres développeurs du projet.

Slide 12

Slide 12 text

Toutes les ressources du projet en un seul endroit https://github.com/sparkbox/standard/blob/master/project_management/base-hub.md

Slide 13

Slide 13 text

LE STYLEGUIDE

Slide 14

Slide 14 text

KÉzako le styleguide ? Un styleguide est un guide de design pour un projet donné. Il va aider les différents contributeurs à rester dans le même chemin et à construire un produit le plus homogène possible.

Slide 15

Slide 15 text

Identité de marque Vocabulaire commun Ton & Voix Librairie de modules Code Anatomie d’un styleguide http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 16

Slide 16 text

Identité de marque Son but : établir un guide d’utilisation des principaux composants de la marque Destinataires : toute personne susceptible de communiquer au nom de la marque Peut inclure : logo, typographies, charte graphique, documents, templates, etc…

Slide 17

Slide 17 text

Vocabulaire commun Son but : établir un langage commun pour un expérience utilisateur homogène sur l’ensemble des produits et services de la marque Destinataires : toute personne susceptible de créer une expérience utilisateur au nom de la marque Peut inclure : principes de design, esthétique globale, principes d’UX, type d’animation… (ex : Material Design)

Slide 18

Slide 18 text

Ton & Voix Son but : établir et encourage un ton homogène et approprié à travers l’ensemble des produits et services de la marque Destinataires : toute personne susceptible de créer du contenu écrit pour la marque Peut inclure : marketing, documentation, blog post, CGU/CGV, alertes, conventions de rédaction…

Slide 19

Slide 19 text

code Son but : établir des conventions pour les développeurs afin de créer un code performant, cohérent et maintenable Destinataires : toute personne susceptible de développer pour la marque Peut inclure : conventions de développement, structure HTML, CSS architecture, HTML/CSS/JS Styleguides…

Slide 20

Slide 20 text

librairie de modules Son but : établir/maintenir un système de composants pour des UI cohérentes et accélérer la production Destinataires : toute personne susceptible de toucher aux projets de la marque Peut inclure : modules globaux, typography, blocs de navigation, objet media, animations, littéralement tout ce que l’on inclue dans une interface

Slide 21

Slide 21 text

Plusieurs avantages Meilleure communication et vocabulaire commun Meilleur workflow Cohérence Design/UX/UI

Slide 22

Slide 22 text

Salesforce Lightning Design System www.lightningdesignsystem.com/

Slide 23

Slide 23 text

Front-End Questionnaire github.com/bradfrost/frontend-guidelines-questionnaire/

Slide 24

Slide 24 text

Website Style Guide Ressources http://styleguides.io/

Slide 25

Slide 25 text

Quelques liens CSS Guidelines by @csswizardry SMACSS Architecture by @snookca Airbnb JavaScript Style Guide by Airbnb

Slide 26

Slide 26 text

une architecture de projet modulaire II

Slide 27

Slide 27 text

http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design

Slide 28

Slide 28 text

http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design

Slide 29

Slide 29 text

74% des internautes quitteront un site mobile s’il met plus de 5s à charger https://kinsta.com/learn/page-speed/

Slide 30

Slide 30 text

Performance IS Design

Slide 31

Slide 31 text

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Slide 32

Slide 32 text

Construire le DOM en fonction de la performance

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Pourquoi ? Spécificité du CSS difficile à maîtriser CSS difficile à scale si mal organisé CSS rapidement hétérogène du fait qu’il soit un langage accessible

Slide 36

Slide 36 text

THE SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/

Slide 37

Slide 37 text

THE bad SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/

Slide 38

Slide 38 text

THE good SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/

Slide 39

Slide 39 text

CSS Stats cssstats.com

Slide 40

Slide 40 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 41

Slide 41 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 42

Slide 42 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 43

Slide 43 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 44

Slide 44 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 45

Slide 45 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 46

Slide 46 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 47

Slide 47 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 48

Slide 48 text

http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

Slide 49

Slide 49 text

L’architecture SMACSS

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

SMACSS - BASE

Slide 52

Slide 52 text

SMACSS - Components

Slide 53

Slide 53 text

SMACSS - fonts

Slide 54

Slide 54 text

SMACSS - layout

Slide 55

Slide 55 text

SMACSS - pages

Slide 56

Slide 56 text

SMACSS - tools

Slide 57

Slide 57 text

Sassdoc http://sassdoc.com/

Slide 58

Slide 58 text

Automatiser la crÉation de documentation

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Media queries Mixin https://github.com/sass-mq/sass-mq

Slide 61

Slide 61 text

À connaître Flexbox Module Responsive Typography SVG Responsive Design Patterns & Components ARIA (Accessible Rich Internet Application)

Slide 62

Slide 62 text

build process

Slide 63

Slide 63 text

Git Sketch Plugin https://github.com/mathieudutour/git-sketch-plugin

Slide 64

Slide 64 text

Designers utilisant Git très appréciés Gestion des assets automatisée/simplifiée

Slide 65

Slide 65 text

« If I had to choose between making something my problem or the user’s problem i’ll choose to make it mine every time » - Jeremy Keith, Web Developper

Slide 66

Slide 66 text

Créons des interfaces accessibles http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it

Slide 67

Slide 67 text

Ressources supplémentaires https://speakerdeck.com/marcelosomers/fight-the-zombie-pattern-library-rwd-summit-2016 Responsive Typography SVG Responsive Design Patterns & Components ARIA (Accessible Rich Internet Application)

Slide 68

Slide 68 text

MERCI @chuckn0risk