optimiser son workflow frontend
TRANSCRIPT
https://twitter.com/chuckn0risk
https://github.com/ChucKN0risK
Pourquoi cette présentation ?
Suite de mon article publié en février concernant différents headers à implémenter. => 4 Responsive Navigation Principles
À 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.
Le PROGRAMME
Mieux collaborer c’est quoi ?
Présentation d’une architecture modulaire
Mieux collaborer c’est quoi ?
I
DÉROULEMent lambda d’un projet
1
Cahier des charges
2
Wireframes
3
Maquettes
4
Intégration
DÉROULEMent lambda d’un projet
1
Cahier des charges
2
Wireframes
3
Maquettes
4
Intégration
Designers
Se partager le travail
Credits : Tom Maslen, Testing & Debugging Responsive Web Design from Smashing Book 5
NOPE
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.
Toutes les ressources du projet en un seul endroit
https://github.com/sparkbox/standard/blob/master/project_management/base-hub.md
LE STYLEGUIDE
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.
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
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…
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)
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…
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…
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
Plusieurs avantages
Meilleure communication et vocabulaire commun
Meilleur workflow
Cohérence Design/UX/UI
Salesforce Lightning Design Systemwww.lightningdesignsystem.com/
Front-End Questionnairegithub.com/bradfrost/frontend-guidelines-questionnaire/
Quelques liens
CSS Guidelines by @csswizardry
SMACSS Architecture by @snookca
Airbnb JavaScript Style Guide by Airbnb
une architecture de projet modulaire
II
http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
74%
des internautes quitteront un site mobile s’il met plus de 5s à charger
https://kinsta.com/learn/page-speed/
Performance IS
Design
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Construire le DOM en fonction de la performance
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
THE SPECIFICITY GRAPH
http://csswizardry.com/2014/10/the-specificity-graph/
THE bad SPECIFICITY GRAPH
http://csswizardry.com/2014/10/the-specificity-graph/
THE good SPECIFICITY GRAPH
http://csswizardry.com/2014/10/the-specificity-graph/
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
SMACSS - BASE
SMACSS - Components
SMACSS - fonts
SMACSS - layout
SMACSS - pages
SMACSS - tools
Automatiser la crÉation de documentation
À connaître
Flexbox Module
Responsive Typography
SVG
Responsive Design Patterns & Components
ARIA (Accessible Rich Internet Application)
build process
Git Sketch Pluginhttps://github.com/mathieudutour/git-sketch-plugin
Designers utilisant Git très appréciés
Gestion des assets automatisée/simplifiée
« 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
Créons des interfaces accessibles
http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it
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)
MERCI
@chuckn0risk