Chapitre 3

Le Responsive Web Design

Introduction

Le Responsive Web Design ou site web adaptatif est un principe de conception de pages HTML prenant en compte les différents moyens actuels de consulter les pages. Le visiteur pourra visionner le site sans gêne aussi bien avec un moniteur d'ordinateur, un smartphone qu' une tablette.
Le RWD (Responsive Web Design) utilise une technologie de CSS3 media queries. Une série de règles est spécifiée selon la taille de l'écran utilisé pour la consultation. Ces différentes largeurs sont nommées "point de rupture" et correspondent aux largeurs de consultation des différents supports.
La page est conçue selon une grille fluide et les images qui auront besoin de flexibilité seront redimensionnées en unités relatives.

Grille fluides

Les grilles fluides sont des grilles précisant les largeurs de colonnes en pourcentage. Contrairement aux grilles fixes qui sont des grilles qui fixent des colonnes par rapport à une largeur. Les grilles fixes sont souvent basées sur une largeur de 960 pixels, facilement divisible en 12, 16, 10, 4, 3...

Lorsque l'on met en place un grille fluide, il faut bien préciser que les marges ou gouttières seront en pourcentage également.

Voici des liens utiles sur les grilles fluides :

Les images fluides

Pour que les images s'adaptent aux dimensions de chaque écran, voici le code à ajouter à votre feuille de style : 

img {max-width:100%;}

Voici un exemple d'utilisation de cette propriété : voir la page

Reset

Les feuilles de style dites de reset proposent de mettre à 0 les mise en forme automatiques des différents navigateurs.

Certaines reset vont très loin dans cette remise à zéro, comme :

https://github.com/necolas/normalize.css

http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

Certaines feuilles de style de base proposent un reset moins contraignant et également des éléments de base pour construire votre site.

Voici un excellent lien sur des feuilles de style de base :

http://www.knacss.com/

Media query

Avec les CSS2 et le HTML4, nous pouvions déjà faire appel à des médias, pour les feuilles de style, dans la balise link qui précisait par exemple l'impression de la page (media="print").
Dans les CSS3, l'écriture des media queries précise la déclaration accompagnée des opérateurs : and, only, et not.
On écrit une virgule pour la valeur du "ou".

Les media queries agissent sur les différents moniteurs. Voici la syntaxe utilisée : 

/* grands écrans----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* écrans moyens ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
/* iPads (portrait et paysage) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
/* Styles */
}
/* Smartphones (portrait et paysage) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */
}

Exercices

Cet exercice montre les effets du RWD sur la couleur du rectangle : voir l'exercice.

Ce deuxième exercice propose une mise ne page RWD, voir l'exercice.