PROGRAMME
Jour 1
LES BASES POUR APPRÉHENDER ET FAIRE DU RESPONSIVE• L’écosystème du Responsive Web Design
• Un état des lieux clair et précis sur le sujet
• Les « UX bonnes raisons » : 7 bonnes raisons de faire du Responsive Web Design
• Ressources utiles : les outils disponibles en ligne et quelques galeries de sites mobiles
- NPM, un gestionnaire de paquets bien pratique pour récupérer les outils nécessaires à l’atelier
- Grunt (ou Gulp), un outil de création et de gestion de tâches automatisées
- Grunt-connect, pour lancer un serveur et pouvoir consulter son interface directement sur son mobile
• Mise en pratique : «Récupération des outils pour les différents ateliers (grunt ou gulp + tasks)»
APPRENDRE À CRÉER UN LAYOUT RESPONSIVE• Utiliser les unités relatives et absolues pour créer une structure fluide
• Viser les différents environnements via les media queries (taille, espace visible, densité de pixel, etc.)
• Les différents types de boite en CSS et leur interactions
- La propriété display, ses valeurs (block, inline, inline-block, table-cell)
- Flex : le futur du modèle de boite
• Les positionnements dans un layout HTML
- Identifier le flux HTML, la propriété dir et ses valeurs (rtl, ltr)
- Utiliser les propriétés position et float, leur rôle et valeurs
• Mise en pratique : « Faire sa propre grille responsive CSS»
UN CODE CSS MODULAIRE• Découvrir les préprocesseurs CSS (SASS, LESS), et ranger ses fichiers de façon modulaire
• Identifier et utiliser les patterns d’écriture du CSS
- BEM, Object Oriented CSS
- Atomic design
• Mise en pratique : « Ecrire son module HTML »
Jour 2
OPTIMISATION DES PERFORMANCES• Optimiser les requêtes et les temps de chargement
- Les optimisations serveurs (cache, font, gzip)
- Utiliser le cache et la compression gzip à bon escient pour éviter le téléchargement des dépendances à chaque chargement de page
- Optimiser le téléchargement des polices
• L’optimisation des dépendances (image, font icon, minify)
- Gérer l’ordre de chargement des dépendances pour réduire le temps d’affichage de la page (lazy loading)
- Optimiser les images et choisir une stratégie de design vectoriel pour améliorer
- Optimiser le code CSS et JS en minifiant les fichiers avec la tâche grunt-minify
• Les optimisations rendering (script bloquant, selecteurs CSS, defer et async, bitmap vs vectoriel)
• Démarche d’optimisation des animations en CSS
• Mise en pratique : « Un exemple d’amélioration des animations CSS et JS »
OUTILS ET CONSEILS• Retour d’expérience « in situ » : identifier ce qui marche et ce qui ne marche pas
• Les frameworks CSS (animations, fast templating, normalize.css, etc)
- Les librairies d’animations CSS performantes,
- Les frameworks d’interface (Zurb foundation et autres)
- Les reset CSS, les micro-librairies
• Les outils de nettoyage du CSS
• Les outils de développement chrome et la timeline
• Montage d’une usine de tests mobiles
