Créer des sites "responsive" (responsive web design)

Introduction

Chronologie du HTML
XHTML/CSS/JavaScript, les langages du web
Organismes de standardisation : WHATWG et W3C, standards et validation
Standards actuels (HTML5, CSS3)
Diversité des terminaux d’affichage
Différence entre résolution et taille d’affichage
Séparation entre contenu et presentation

Interface utilisateur (UI) et expérience utilisateur (UX)
Approche Mobile First
Détection du navigateur
Détection du terminal
Détection de fonctionnalité
Orientation du terminal
Conception d’une interface adaptative
Considérer les terminaux tactiles
Gabarits responsives

Différence entre viewport et screen
Principe des media queries
Règles conditionnelles (device-width, orientation…)
Points de rupture
Cibler la résolution Retina

Mise en page fluide vs. mise en page fixe
Conception en grille CSS
Unités de mesure fluides (% et em)
Multi colonnage
Marges et points de rupture
Module flexible box CSS3
Calculateurs en ligne

Images HTML flexibles
Element HTML5 "picture" et media queries
Attributs srcset et sizes
Images de fond CSS3 : images multiples, tailles d’images adaptatives (background-size)
Menu adaptatifs
Vidéos adaptatives
Tableaux et formulaires flexibles

Tester les medias queries
Tester le viewport
Tester le navigateur
Modification dynamique des contenus
Optimisation du chargement par cookies
Redirection par JavaScript

Frameworks HTML (HTML5 boilerplate, Bootstrap, Skeleton)
Frameworks JavaScript (jQuery mobile, response.js, yepnope.js, modernizr.js, touchswipe.js)
Frameworks CSS (Bootstrap, Foundation, 960 Grid, Gumby, Skeleton)

Solutions en ligne
Solutions hors ligne : Adobe Edge Inspect, Dimensions
Optimisation des contenus