Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur Web 13 1. Les objectifs 13 2. Mozilla Firefox 13 3. Google Chrome 14 4. Apple Safari 15 5. Microsoft Internet Explorer 16 G. Télécharger les exemples 17 Chapitre 2 : Des solutions pour la compatibilité A. La disparité des navigateurs 21 B. Pour une meilleure compatibilité 21 C. Le rendu initial des navigateurs 22 1. La problématique 22 2. Le reset universel 22 3. Le reset d'eric Meyer 22 1/12
4. Le reset d'html5 Doctor 22 D. Normalize.css 23 1. Le projet 23 2. Télécharger Normalize.css 23 3. Installer Normalize.css 25 E. L'HTML5 et html5shiv.js 25 1. L'objectif 25 2. Le fichier d'exemple 25 3. La librairie html5shiv.js 28 F. Les requêtes de média et respond.js 29 1. L'objectif 29 2. Le fichier d'exemple 29 3. La librairie respond.js 31 G. Les solutions de rechange et Modernizr.js 33 1. L'objectif 33 2. Télécharger Modernizr 33 3. Créer une page d'exemple 35 4. Installer et lier le script Modernizr 36 5. La mise en action de Modernizr 36 6. Utiliser les classes de Modernizr 37 7. Utiliser Modernizr avec du JavaScript 39 H. Les règles @supports 41 1. L'objectif 41 2. Utiliser les règles @supports 42 3. Les opérateurs 44 Chapitre 3 : La mise en page classique 2/12
A. Les designers et les intégrateurs 47 B. Le modèle des boîtes 47 C. Les marges des éléments 48 D. L'affichage des éléments 48 E. L'affichage dans le flux courant 49 F. L'affichage en position absolue 50 G. L'affichage en position fixée 51 H. L'affichage en position relative 53 I. Utiliser l'affichage en position relative et absolue 53 J. L'affichage des boîtes flottantes 55 1. Le positionnement flottant 55 2. Placer des boîtes côte à côte 57 3. Interdire le flottement 58 4. Un exemple avec quatre boîtes 59 5. Une mise en page simpliste 60 6. Conclusion sur la mise en page en élément flottant 68 Chapitre 4 : La mise en page à l'aide des tableaux A. L'objectif 71 3/12
B. La propriété display 71 C. Une mise en page simple avec un tableau 73 D. La largeur d'affichage du tableau 74 E. Les éléments anonymes 74 F. D'autres éléments pour les tableaux 75 1. Les paragraphes en cellule 75 2. Les listes en tableau 76 G. L'affichage des lignes 77 H. Définir la largeur des cellules 78 1. Les largeurs fixes 78 2. Les largeurs en pourcentage 79 I. Une mise en page avec un tableau plus structuré 80 J. Les autres propriétés d'affichage 82 1. La propriété table-layout 82 2. La propriété border-collapse 83 3. La propriété border-spacing 86 4. La propriété empty-cells 87 5. La propriété caption-side 89 K. L'alignement vertical 91 L. Conclusion 92 4/12
Chapitre 5 : Les grilles de mise en page A. L'objectif 95 B. La structure des grilles pour le Web 96 C. Les grilles fixes 97 D. La grille fixe 960gs 98 1. La grille 98 2. Les fichiers CSS 99 3. La page d'exemple 100 4. Les liaisons aux feuilles de style 100 5. Les styles personnels 101 6. Le conteneur de la mise en page 101 7. Les blocs sur 12 colonnes 102 8. Les blocs placés sur des colonnes dans la grille 102 9. Interdire les blocs flottants adjacents 104 10. Les blocs placés avec un décalage 105 11. Les blocs centrés 106 12. Le code complet de la page 108 E. La grille fixe notjustagrid 109 1. Le framework 109 2. La grille 110 3. La page d'exemple 111 4. Les fichiers CSS 111 5. Les liaisons aux feuilles de style 112 6. Les styles personnels 112 7. Le conteneur de la mise en page 113 8. Le système des classes 113 9. Un bloc sur la largeur de la grille 114 10. Trois blocs sur un tiers de la grille 115 11. Deux blocs sur 3/5e et 2/5e de la grille 116 5/12
12. Un seul bloc sur les 2/3 de la grille 116 13. Le code complet de la page 117 F. La grille fluide Gridiculous 118 1. Les grilles fluides 118 2. La grille Gridiculous 118 3. La page d'exemple 119 4. Télécharger la grille 119 5. Installer la grille 120 6. Des styles personnels 120 7. Le conteneur 120 8. Les lignes 121 9. Trois blocs de même largeur 122 10. Deux blocs de largeur différente 124 11. Un bloc décalé 126 12. Affichage de la grille fluide 127 Chapitre 6 : Les Media Queries A. L'objectif 131 B. Les origines 131 C. Utiliser les requêtes de média 131 D. La syntaxe des requêtes de média 132 E. Les fonctionnalités à tester 133 F. Où placer les requêtes de média 134 G. La taille des écrans des mobiles 135 6/12
H. La notion de viewport 137 I. Un exemple très simple 141 1. La maquette 141 2. Le code HTML et CSS 142 J. Une grille responsive 148 1. La grille 148 2. Télécharger et installer la grille 149 3. Créer une page simple sur 12 colonnes 149 4. Les liaisons aux styles et aux scripts 150 5. La structure de la mise en page 151 6. Les règles CSS 152 K. Exemples de sites avec des requêtes de média 154 Chapitre 7 : La mise en page responsive A. Le design responsive 159 B. Les grilles responsives 159 C. La grille responsive Simple Grid 160 1. Utiliser Simple Grid 160 2. Télécharger et installer Simple Grid 160 3. Les lignes 161 4. La maquette 162 5. La première ligne 163 6. La deuxième ligne 164 7. La troisième ligne 165 8. Utiliser la grille fluide et responsive 165 9. Le code complet 168 7/12
D. La grille responsive Columnal 169 1. Utiliser Columnal 169 2. Télécharger et installer Columnal 170 3. La maquette 171 4. Le conteneur et les lignes 171 5. La première ligne 172 6. La deuxième ligne 175 7. La troisième ligne et le décalage 175 8. La quatrième ligne et les blocs imbriqués 176 9. Utiliser la grille fluide et responsive 178 10. Le code complet de la mise en page 181 11. Les images responsives 182 12. Le code complet de la mise en page avec l'image responsive 185 E. L'utilisation des images 185 F. Les images fluides 186 1. L'objectif 186 2. La mise en page fixe 186 3. La mise en page fluide 189 4. La largeur fluide des autres éléments 190 5. Les largeurs des images fluides 191 6. Afficher et redimensionner la page 192 7. Le code complet de la page 194 G. Le script Response.js 196 1. Utiliser le JavaScript 196 2. Télécharger les JavaScript 196 3. Les liaisons aux JavaScript 197 4. Préparer les images 198 5. Le code de la page 198 6. Le fonctionnement du script 199 7. Optimiser les légendes 199 8. Le code complet de la page 201 8/12
H. Le script picturefill.js 202 1. Utiliser le JavaScript 202 2. Télécharger le JavaScript 202 3. Les liaisons aux JavaScript 202 4. Préparer les images 203 5. Le code de la page 203 6. L'affichage de l'image responsive 204 7. Le code pour des écrans haute définition (Retina) 205 8. Le code complet de la page 206 I. Le script responsive-images.js 207 1. Utiliser le JavaScript 207 2. Télécharger la démonstration 207 3. Le code de la page 208 4. Utiliser la page 209 J. Les propositions d'avenir 211 1. Les groupes de travail : RICG et W3C 211 2. Les groupes de travail : Apple et W3C 212 K. La typographie responsive 213 1. L'objectif 213 2. Les unités utilisées 213 3. L'unité em et la cascade 214 4. L'unité rem et la cascade 215 5. La typographie responsive et l'unité rem 216 6. La typographie responsive et les polices de caractère 217 7. Les unités liées au viewport 218 L. Les tableaux responsives 219 1. L'objectif 219 2. La solution Zurb 220 3. La solution de Goeff Yuen 224 9/12
4. La solution de Chris Coyier 228 5. D'autres solutions 231 Chapitre 8 : Les frameworks CSS A. Utiliser les frameworks CSS 239 B. Des frameworks CSS 239 C. Le framework UIkit 241 1. Utiliser UIkit 241 2. Télécharger le framework 243 3. Télécharger jquery 244 4. Installer le framework 245 5. Créer une grille fluide 245 6. Utiliser la grille fluide 249 7. Utiliser la grille responsive d'uikit 250 8. Créer une barre de navigation 255 9. Créer un tableau mis en forme 256 D. Le framework Kube 258 1. Utiliser Kube 258 2. Télécharger le framework 260 3. Installer le framework 260 4. Créer une grille fluide et responsive 261 5. Utiliser la grille fluide et responsive 265 6. Insérer un formulaire 267 7. Insérer des boutons 270 E. Le framework Pure 271 1. Utiliser Pure 271 2. Télécharger le framework 272 3. Lier le framework 272 10/12
4. Utiliser la grille fluide responsive 273 5. Insérer un tableau 277 6. Insérer une barre de menu avec un menu déroulant 278 Chapitre 9 : Le futur de la mise en page A. Les objectifs 285 B. Le multicolonnage 285 1. Le principe d'utilisation 285 2. Mise en place des colonnes 286 3. Mise en place des gouttières 287 4. Mise en place des sauts de colonnes 288 5. Répartition sur plusieurs colonnes 289 6. Un générateur de multi-colonnes 290 7. Les colonnes et le design responsive 291 C. Les boîtes flexibles 293 1. Placer les éléments de mise en page 293 2. Le module des boîtes flexibles 293 3. Les boîtes flexibles 294 4. L'orientation et le sens des boîtes 295 5. Le débordement des boîtes 297 6. L'orientation des boîtes 299 7. L'alignement horizontal des boîtes 301 8. L'alignement vertical des boîtes 304 9. Les exceptions dans l'alignement vertical 305 10. Les exceptions dans l'alignement horizontal 307 11. Les propriétés de flexibilité 309 12. La propriété flex-grow 309 13. Les propriétés flex-shrink et flex-basis 311 14. Des constructeurs en ligne 314 15. Un exemple de mise en page flexible 315 11/12
D. Les autres modules du W3C 319 1. L'habillage 319 2. Les grilles 320 3. Le modèle de page 320 4. La mise en page 321 5. Les régions 322 Index 323 12/12