Les techniques de mise en page des sites web ont beaucoup évolué ces dernières années avec l'utilisation du Responsive Web Design et des requêtes de média ; récemment, de nouveaux modules du W3C ont fait leur apparition pour concevoir des mises en page flexibles, en multi colonnes et en grille.

Ce livre débute par une présentation des différents problèmes de compatibilité qui subsistent aujourd’hui. Nous ferons ensuite un rappel sur les méthodes de mise en page "classiques" et leur limitation avant d'introduire la technique de mise en page basée sur l'utilisation des tableaux et des CSS3.

Le Responsive Web Design est essentiellement basé sur les requêtes de média CSS3, les Media Queries : nous apprendrons à maîtriser cette technique à l'aide de nombreux exemples. Nous verrons ensuite les différents aspects de la mise en page responsive : les grilles, les images et la typographie. En nous basant sur de nombreux exemples, nous détaillerons les nouveaux modules du W3C : la mise en page flexible (module Flexible Box Layout ou Flexbox), la mise en page en multi colonnes (module Multi-column Layout) et la mise en page en grille (Grid Layout).

Pour nous aider à travailler plus efficacement, nous apprendrons à utiliser les bases de certains frameworks CSS qui permettent d'utiliser toute une série de composants HTML5/CSS3 pour concevoir efficacement des sites responsive.

Enfin nous terminerons en vous présentant les futures techniques avancées de mise en page qui sont en cours d'étude actuellement par le W3C.

Téléchargements

• Des fichiers complémentaires (5,88 Mo)

Introduction

1. Le design Web aujourd'hui
2. Le Responsive Web Design
3. Les approches dans la conception
4. Les objectifs du livre
5. Les outils de l’intégrateur web
   1. 1. Les objectifs
   2. 2. Mozilla Firefox
   3. 3. Google Chrome
   4. 4. Apple Safari
   5. 5. Microsoft Internet Explorer et Edge
6. Télécharger les exemples

Des solutions pour la compatibilité

1. La disparité des navigateurs
2. Pour une meilleure compatibilité
3. Le rendu initial des navigateurs
4. Normalize.css
   1. 1. Le projet
   2. 2. Télécharger Normalize.css
   3. 3. Installer Normalize.css
5. Le HTML5 et html5shiv.js
   1. 1. L’objectif
   2. 2. Le fichier d’exemple
   3. 3. La librairie html5shiv.js
6. Les requêtes de média et respond.js
   1. 1. L’objectif
   2. 2. Le fichier d’exemple
   3. 3. La librairie respond.js
7. Les solutions de rechange et Modernizr.js
   1. 1. L’objectif
   2. 2. Télécharger Modernizr
   3. 3. Créer une page d’exemple
   4. 4. Installer et lier le script Modernizr
   5. 5. Mettre en action Modernizr
   6. 6. Utiliser les classes de Modernizr
8. Les règles @supports
   1. 1. L’objectif
   2. 2. Utiliser les règles @supports
   3. 3. Les opérateurs

La mise en page classique

1. Les designers et les intégrateurs
2. Le modèle des boîtes
3. Les marges des éléments
4. L'affichage des éléments
5. L'affichage dans le flux courant
6. L'affichage en position absolue
7. L'affichage en position fixée
8. L'affichage en position relative
9. Utiliser l'affichage en position relative et absolue
10. L'affichage des boîtes flottantes
    1. 1. Le positionnement flottant
    2. 2. Placer des boîtes côte à côte
    3. 3. Interdire le flottement
    4. 4. Un exemple avec quatre boîtes
    5. 5. Une mise en page simpliste
    6. 6. Conclusion sur la mise en page en élémentflottant

La mise en page à l'aide des tableaux

1. L'objectif
2. La propriété display
3. Une mise en page simple avec un tableau
4. La largeur d'affichage du tableau
5. Les éléments anonymes
6. D'autres éléments pour les tableaux
   1. 1. Les paragraphes en cellule
   2. 2. Les listes en tableau
7. L'affichage des lignes
8. Définir la largeur des cellules
   1. 1. Les largeurs fixes
   2. 2. Les largeurs en pourcentage
9. Une mise en page avec un tableau plus structuré
10. Les autres propriétés d'affichage
    1. 1. La propriété table-layout
    2. 2. La propriété border-collapse
    3. 3. La propriété border-spacing
    4. 4. La propriété empty-cells
    5. 5. La propriété caption-side
11. L'alignement vertical
12. Conclusion

Les requêtes de média

1. L'objectif
2. Les origines
3. Utiliser les requêtes de média
4. La syntaxe des requêtes de média
5. Les fonctionnalités à tester
6. Où placer les requêtes de média
7. La taille des écrans des mobiles
8. La notion de viewport
9. Un exemple très simple
   1. 1. La maquette
   2. 2. Le code HTML et CSS
10. Les propriétés CSS pour des images responsive
    1. 1. Les images de premier plan
    2. 2. Les images d’arrière-plan
11. Adapter les dimensions au viewport
12. Une mise en page fluide
    1. 1. L’objectif
    2. 2. La mise en page fixe
    3. 3. La mise en page fluide
    4. 4. La largeur fluide des autres éléments
    5. 5. Les largeurs des images fluides
    6. 6. Afficher et redimensionner la page
    7. 7. Le code complet de la page
13. Le script Response.js
    1. 1. Utiliser le JavaScript
    2. 2. Télécharger les JavaScript
    3. 3. Les liaisons aux JavaScript
    4. 4. Préparer les images
    5. 5. Le code de la page
    6. 6. Le fonctionnement du script
    7. 7. Optimiser les légendes
    8. 8. Le code complet de la page
14. Les propositions d'avenir
    1. 1. Les nouveaux attributs pour <img>
    2. 2. L’attribut srcset pour des tailles d’image fixes
    3. 3. L’attribut srcset pour des largeurs disponibles
    4. 4. L’attribut size
    5. 5. Les nouveaux éléments <picture>et <source></picture>
15. La typographie responsive
    1. 1. L’objectif
    2. 2. Les unités utilisées
    3. 3. L’unité em et la cascade
    4. 4. L’unité rem et la cascade
    5. 5. La typographie responsive et l’unité rem
    6. 6. La typographie responsive et les polices de caractère
    7. 7. Les unités liées au viewport
16. Exemples de sites avec des requêtes de média

La mise en page multicolonne en CSS3

1. Le module Multi-column Layout du W3C
2. La compatibilité des navigateurs
3. La conception en colonnes multiples
   1. 1. Le nombre de colonnes
   2. 2. La largeur des colonnes
   3. 3. La syntaxe courte
4. L'espace entre les colonnes
   1. 1. La gouttière
   2. 2. Le filet de séparation
5. La justification du texte
6. Les sauts de colonne
7. Les éléments transversaux
8. La gestion du texte dans les colonnes
   1. 1. Le remplissage des colonnes
   2. 2. Le contenu trop large
   3. 3. Le débordement du contenu
9. Le multicolonnage et le Responsive Web Design
   1. 1. Les requêtes de média
   2. 2. Une mise en page en colonnes multiples responsive
   3. 3. Un menu responsive en colonnes multiples

La mise en page flexible en CSS3

1. Le module Flexible Box Layout du W3C
2. La compatibilité des navigateurs
3. La conception de mise en page flexible
4. Le conteneur flexible
   1. 1. La définition du contexte flexible
   2. 2. La distribution des items flexibles
   3. 3. Le passage à la ligne
   4. 4. La syntaxe courte pour la distribution et le passage à laligne
   5. 5. La justification horizontale dans les lignes
   6. 6. La justification verticale dans les colonnes
   7. 7. L’alignement vertical dans les lignes
   8. 8. L’alignement horizontal dans les colonnes
   9. 9. Le passage à la ligne et l’alignement
5. Les items flexibles
   1. 1. Le contexte des items flexibles
   2. 2. Modifier l’ordre d’affichage des items
   3. 3. L’alignement d’un item
   4. 4. L’agrandissement des items
   5. 5. La réduction des items
   6. 6. La largeur ou hauteur indicative
   7. 7. La syntaxe courte du redimensionnement
   8. 8. Définir la taille fixe des items avec flex
   9. 9. Définir la taille flexible des items avecflex
6. Des exemples de mises en page
   1. 1. Une mise en page très simple
   2. 2. Une mise en page plus élaborée
   3. 3. Placer un item toujours en bas de son conteneur
7. La mise en page flexible et le Responsive Web Design

La mise en page en grille CSS3

1. Le module Grid Layout du W3C
2. La compatibilité des navigateurs
   1. 1. Les navigateurs
   2. 2. Forcer la reconnaissance
   3. 3. Google Chrome
   4. 4. Mozilla Firefox
   5. 5. Apple Safari
3. La terminologie de la grille
4. La création d'une grille régulière
   1. 1. Les largeurs fixes des colonnes
   2. 2. Les largeurs disponibles des colonnes
   3. 3. Les largeurs relatives des colonnes
   4. 4. Les largeurs automatiques des colonnes
   5. 5. Les répétitions
   6. 6. Les hauteurs de rangées
5. Nommer les zones de la grille
   1. 1. Nommer toutes les cellules
   2. 2. Le cas des cellules vides
   3. 3. Nommer des zones de cellules horizontalement
   4. 4. Nommer des zones de cellules verticalement
   5. 5. Nommer les lignes en une grille simple
   6. 6. Nommer les lignes en une grille élaborée
6. La gestion des espaces de la grille
7. Les justifications et alignements
   1. 1. La justification dans les colonnes
   2. 2. L’alignement dans les rangées
   3. 3. La justification et l’alignement dans les cellules
8. La justification et l'alignement dans le conteneur
   1. 1. La justification horizontale
   2. 2. L’alignement vertical
9. Le placement automatique

Les grilles de mise en page

1. Les objectifs
2. La grille Gridlex
   1. 1. Implémenter la grille
   2. 2. Les points de rupture
   3. 3. Placer trois blocs dans la grille
   4. 4. Créer une grille responsive avec les blocs
   5. 5. Placer les blocs dans la grille
   6. 6. Créer une grille responsive
   7. 7. Le positionnement automatique
   8. 8. Les gouttières
   9. 9. Une grille sur trois lignes
   10. 10. Les autres fonctionnalités de Gridlex
3. La grille Grillade
   1. 1. Implémenter la grille
   2. 2. Les points de rupture
   3. 3. Une grille simple
   4. 4. Insérer une gouttière
   5. 5. Dimensionner les blocs sur la grille
   6. 6. Utiliser une grille multiligne
   7. 7. Pousser un bloc
4. La grille Simple Grid
   1. 1. Implémenter la grille
   2. 2. Le point de rupture
   3. 3. Une mise en page avec une seule ligne
   4. 4. Une mise en page avec une plusieurs lignes
   5. 5. La mise en page en colonnes
   6. 6. Décaler des blocs
   7. 7. Des exceptions pour les smartphones

Les frameworks CSS

1. Utiliser les frameworks CSS
2. Des frameworks CSS
3. Le framework Uikit
   1. 1. Utiliser Uikit
   2. 2. Télécharger le framework
   3. 3. Télécharger jQuery
   4. 4. Installer le framework
   5. 5. Créer une grille fluide
   6. 6. Utiliser la grille fluide
   7. 7. Utiliser la grille responsive d’Uikit
   8. 8. Créer une barre de navigation
   9. 9. Créer un tableau mis en forme
4. Le framework Kube
   1. 1. Utiliser Kube
   2. 2. Télécharger le framework
   3. 3. Installer le framework
   4. 4. Créer une grille flexible
   5. 5. Exploiter une grille flexible
   6. 6. Insérer un formulaire
5. Le framework Material Design Lite
   1. 1. Utiliser Material Design Lite
   2. 2. Les templates
   3. 3. Les liaisons pour les composants
   4. 4. Utiliser les composants
   5. 5. Les styles CSS pour la typographie
   6. 6. Personnaliser les couleurs

Le futur de la mise en page

1. Les modules du W3C
2. L'habillage
3. Les modèles de page
4. La mise en page des documents structurés
5. Les régions