Le développement responsive

Actuellement, les concepteurs de sites se doivent de produire des sites web qui soient parfaitement visibles et lisibles, quel que soit le support de consultation : écran d’ordinateur, de tablette ou de smartphone.

Créer des sites qui s’adaptent automatiquement selon le support s’appelle le Responsive Web Design ou RWD. Le RWD s’appuie notamment sur le module Media Queries qui est en Recommendation au 5 avril 2022 : https://www.w3.org/TR/css3-mediaqueries/. Les Media Queries, ou requêtes de média en français, permettent de créer une mise en forme et une mise en page spécifiques selon l’écran de diffusion.

Les requêtes de média

1. Les critères

Les requêtes de média permettent de cibler précisément les différents types d’écrans de diffusion, selon des critères bien précis.

Voici les critères que nous allons pouvoir utiliser dans les requêtes de média :

La largeur d’affichage : width. Nous pouvons tester la largeur de la zone d’affichage du navigateur. Exemple : width: 780px.
La hauteur d’affichage : height. Nous pouvons tester la hauteur de la zone d’affichage du navigateur.
La largeur physique : device-width. Nous pouvons tester la largeur physique de l’écran de diffusion.
La hauteur physique : device-height. Nous pouvons tester la hauteur physique de l’écran de diffusion.
L’orientation de l’écran : orientation. Exemple : orientation: portrait ou orientation: landscape. Très pratique pour tester si l’utilisateur utilise son appareil verticalement (portrait) ou horizontalement (landscape).

Nous avons accès à d’autres critères moins courants :

Le ratio : aspect-ratio. Pour tester la valeur du ratio largeur/hauteur. Exemple : aspect-ratio: 16/9.
Le ratio physique : device-aspect-ratio. Pour tester la valeur du ratio physique largeur/hauteur de l’écran.
La couleur : color. Nous pouvons tester si le support de diffusion utilise de la couleur...

La taille des écrans

Les écrans des tablettes et des smartphones ont des résolutions très différentes selon les constructeurs.

Pour déterminer les résolutions des écrans, dans l’élément <head>, nous pouvons utiliser l’élément <meta> avec l’attribut viewport. Pour l’attribut content, nous pourrons utiliser la valeur device-width qui cible la largeur physique de l’écran.

Nous aurons alors cette syntaxe :

<meta name="viewport" content="width=device-width" />

L’affichage sera ainsi adapté à chaque surface d’affichage de rendu de chaque navigateur pour appareil mobile.

Un exemple de mise en page responsive

1. Le site initial

Voici le site que nous allons réaliser. Dans un premier temps, il ne sera pas en RWD.

Voici le code de la page HTML :

<!DOCTYPE HTML> 
<html lang="fr"> 
<head> 
<title>Ma page d'accueil</title> 
<meta charset="UTF-8" /> 
<link rel="stylesheet" href="styles.css" /> 
</head> 
<body> 
<div id="conteneur"> 
   <header id="haut"> 
       <h1>Mon site web</h1> 
       <h2>Le slogan de mon site Web</h2> 
   </header> 
   <nav id="navigation"> 
       <p><a href="#">Lien 1</a> | <a href="#">Lien 2</a> |  
<a href="#">Lien 3</a> | <a href="#">Lien 4</a> |  
<a href="#">Lien 5</a> | <a href="#">Lien 6</a></p> 
   </nav> 
   <section id="contenu"> 
       <article> 
           <h1>Mon premier article</h1> 
           <p>Donec ullamcorper...</p>  
           <p>Nullam quis risus...</p> 
       </article> 
       <article> 
           <h1>Mon deuxième article</h1> 
           <p>Cras justo odio...</p>  
           <p>Donec id elit non...</p> 
       </article> 
       <article> 
         ...