Sommaire

Les objectifs

Actuellement la création des sites web passe forcément par le Responsive Web Design et les grilles de mise en page.

Les sites web ne sont plus uniquement consultés sur écran d’ordinateur, ils sont de plus en plus visualisés sur les tablettes et les smartphones. Il faut donc, dès le départ, concevoir des sites qui adaptent leur affichage selon la taille de l’écran de consultation : écran d’ordinateur, écran de tablette et de smartphone. La mise en page des sites web doit donc s’adapter automatiquement à la taille des écrans sur lesquels ils sont affichés : c’est l’objectif du Responsive Web Design.

Pour définir les tailles des écrans, nous allons utiliser une fonctionnalité des CSS 3, les Medias Queries, les requêtes de média en français. Selon des tailles déterminées qui sont définies par des points de rupture, nous allons utiliser des styles CSS différents, afin d’obtenir une mise en page et une mise en forme différentes.

Pour nous aider dans cette conception, nous pouvons utiliser des grilles de mise en page. Ces grilles utilisent des systèmes de colonnes modulaires, sur lesquelles nous allons placer nos blocs dans des lignes et les aligner sur un nombre défini de colonnes.

images/C03-001.png

Dans cet exemple, que nous pouvons imaginer pour un affichage sur un grand écran, nous avons un système de grille à dix colonnes. Une première ...