Introduction
Histoires du web
Comprendre le Responsive
Construire un site web adaptatif
Responsive Web Design (RWD) : définition, composantes
Contraintes ergonomiques et fonctionnelles
Viewport : notion, meta, valeurs
Unités relatives (%, em) vs. absolues (px)
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
Atelier : Création de site responsive pure css avec des media-queries
Frameworks RWD
Panorama des frameworks existants
Bootstrap
960 grid
Optimisation des ressources graphiques
Atelier : Construction d'un site adaptatif avec Bootstrap
