Objectifs
- Connaitre les spécificités du Responsive web design
- Maîtriser les techniques d’adaptation des contenus à différentes résolutions
- Être en mesure d’optimiser les performances d’affichage
- Connaître les bonnes pratiques en terme de conception Responsive Web Design
Pré requis
- Avoir suivi la formation « Créer des sites et applications web avec HTML5 et CSS3 »
Modalités pédagogiques
Cours dispensé en mode présentiel avec une alternance d’apports théoriques et méthodologiques, et de mises en situations pratiques
Inscription
Programmes de Responsive Web Design
Tour d’horizon
- Le monde de la mobilité
- Les usages en mobilité
- Qu’est ce que le responsive design
- Les standards du web
Une procédure à suivre
- Une conception Mobile First
- Problématiques d’affichage
- Prendre en compte l’orientation et le tactile
- Les outils de conception
- Les plans et outils de tests
Media Queries
- Comment adapter le CSS fonction du terminal
- Les opérateurs logiques CSS
- Les critères à utiliser pour mobiles (width, device-width, orientation, etc.)
- La compatibilité navigateurs des media queries
- Risques et limites des media queries
Grilles flexibles et/ou fluides
- Quelles différences avec un positionnement classique
- Les blocs
- Les problèmes de débordements de contenus ou de médias
- Les points de rupture
- Gérer les écrans Retina
- Présentation des Framework de grilles responsives (Boostrap, Foundation, etc.)
Optimisation et performance
- Outils de mesure
- Rapidité, importance majeure pour Google
- Optimisation des CSS, des fichiers JavaScript
- La minification (minify.js)
- Les images
- Les sprites CSS
- Côté serveur, bonnes pratiques