Internet et Mobilité
Responsive Web Design
Reference : IM01
2 jours - Nous consulter Télécharger la fiche Prochaines sessions
Nous consulter.
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
Certification
non
Public visé
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