Construire un site web adaptatif.
- Responsive Web Design (RWD) : définition, composantes
- Standards, le HTML5 et CSS3
- Détection de ressources avec Modernizr
- Contraintes ergonomiques et fonctionnelles
- Viewport : notion, meta, valeurs
- Unités relatives (%, em) vs. absolues (px)
- Ressources utiles : outils, galeries de sites mobiles
Atelier : Structure d'un site HTML5/CSS3, support par les anciens navigateurs.
Créer une grille d'affichage flexible.
- Tailles d'écran, résolution optimale
- Modes portrait et paysage
- Expression des tailles en pourcentage (%), em
- Tailles minimales, maximales
- Blocs, approche contenu/contenant
- Principe des box, layout avec CSS3
- Taille des fonts : fixer une base pour les tailles, conversions em
- Eviter les débordements
Atelier : Multiples exemples de grilles flexibles.
Utiliser des médias flexibles.
- Images flexibles : images de fond, adaptation HTML5
- Marges et espaces flexibles
- Vidéos adaptées
- Support des propriétés CSS par les anciens navigateurs
Atelier : Eviter le débordements d'images/vidéos
Ecrire des CSS3 Media Queries.
- Adaptation de l'affichage en fonction de la résolution
- Types de médias
- Choix des règles conditionnelles : orientation, device-width
- Medias queries internes, externes
- Gestion des menus et sliders
- Polyfills pour le support des anciens navigateurs
Atelier : Adaptation de l'affichage en fonction de la résolution
Frameworks RWD.
- Panorama des frameworks existants
- Bootstrap
- 960 grid
- Optimisation des ressources graphiques
Atelier : Construction d'un site adaptatif avec Bootstrap.