Le “responsive web design” est un terme popularisé par Ethan Marcotte en 2010, d’abord lors de sa conférence “A Dao of Flexibility” (An Event Apart, Seattle, avril 2010), puis dans un article (mai 2010), puis dans un livre (2011).

Media Queries et RWD (Responsive Web Design)

L’élément-clé qui est au coeur de cette approche “responsive” du web design sont les Media Queries, un propriété introduite avec le CSS3.

L’ancêtre des Media Queries: les styles CSS pour l’impression

Depuis le standard HTML4/CSS2, introduit en 1997, un attribut media est disponible, permettant de réserver des styles CSS à un certain type de médias. Voici leur liste:

all aural braille embossed handheld print projection screen tty tv

En théorie, le CSS peut donc définir des styles particuliers pour des “médias” spécifiques – ces médias pouvant être des écrans (screen), moniteurs de télévision (tv), projecteurs (projection), mais aussi des systèmes de synthèse vocale (aural), voire des appareils rendant les contenus de manière tactile (braille, embossed).

Cependant, dans la pratique réelle, les seuls medias qui soient supportés par les navigateurs sont screen et print.

On utilise l’attribut media print pour charger des styles CSS spécifiques pour l’impression d’une page web:

<link rel="stylesheet" media="print" href="impression.css">

Ou à l’intérieur d’une feuille de styles CSS, avec la syntaxe suivante:

@media print {
  * { 
      background: #fff;
      color: #000;
    }
}

Pour un bon exemple de styles destinés à optimiser une page web pour l’impression, on peut se référer au HTML5 Boilerplate. Lire également cet article de Manuel Matuzovic.

Références concernant @print

Les Media Queries du CSS3

Avec l’évolution du HTML5 et CSS3, les possibilités de l’attribut “media” sont étendues: on peut charger des styles selon le format de la fenêtre du navigateur, la largeur, la hauteur, la densité des pixels…

Cela a rendu possible le “Responsive Web Design” (RWD).

Un exemple de Media Query:

@media screen and (min-width: 20em) {
  .member-list {
    column-count: 2;	
  }
}

On peut aussi omettre le mot-clé screen si on souhaite que les styles s’appliquent sur tous les supports:

@media (min-width: 20em) {
  /* Déclarations */
}

On peut cumuler différents critères avec le mot-clé and:

@media (orientation: portrait) and (min-width: 20em) {
  /* Déclarations */
}

@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

Ce qu’on peut détecter avec des Media Queries:

  • Les dimensions - width et height - avec les préfixes min- et max-.
  • L’orientation de l’écran, avec les valeurs portrait ou landscape (paysage).
  • Le ratio hauteur/largeur de l’écran, avec aspect-ratio.
  • La résolution, mesurée en DPI, avec les préfixes min- et max- et une valeur comme 144dpi. On peut aussi mesurer la densité par pixel (dppx), avec des valeurs comme 1.5dppxou 2dppx.
  • La préférence d’un mode sombre avec prefers-color-scheme: dark.
@media (aspect-ratio: 16/9) {
  /* … */
}

@media (min-resolution: 144dpi) {
  /* … */
}

@media (prefers-color-scheme: dark) {
  /* … */
}

Concernant la résolution, selon Raphaël Goetter:

Il existe des tas de résolutions différentes à l’heure actuelle ; ça dépend entièrement de l’appareil. Certains, comme les ordinateurs non-retina sont à 1. Des téléphones sont à 1.3, d’autres à 1.5, des appareils de tout type sont à 2, certains sont à 3. C’est pour cette raison qu’il est préférable de tester une résolution supérieure à 1.3 ou 1.5, et de traiter tous ces écrans de la même façon.

Le design Mobile First

La méthode du design “Mobile First” consiste à prévoir un design pour les petits écrans en priorité, puis d’élargir le cadre pour les grands écrans. Cette méthode utilise une succession de Media Queries:

/**
  * Styles hors d’une Media Query
  * pour les petits écrans (smartphones)
  */

@media (min-width: 600px) {
   /**
    * Styles pour écrans à partir de 600 px de large,
    * vraisemblablement les premières tablettes
    */
}

@media (min-width: 900px) {
   /**
    * Styles pour écrans à partir de 900 px de large,
    * les ordinateurs portables et grandes tablettes
    */
}

@media (min-width: 1200px) {
   /**
    * Styles pour écrans à partir de 1200px de large,
    * les écrans de bureau et grands portables
    */
}

Les valeurs-limite que l’on définit pour basculer d’un design (p.ex: petite tablette) vers un autre (p.ex: ordinateur) se nomment Breakpoints.

Tester la hauteur de l’écran

Bien que l’on teste souvent la largeur de l’écran, il peut parfois être utile de conditionner la mise en page en fonction de la hauteur de l’écran. Un cas d’usage intéressant serait de n’implémenter un en-tête fixe que lorsque l’écran fait une certaine hauteur.

.header {
   height: 200px;
}
 /**
  * Uniquement les écrans ayant une hauteur
  * d’au moins 800 pixels
  */
@media (min-height: 800px) {
  .header {
    position: fixed;
    top: 0; 
  }
}

Petit détail important

Pour fonctionner en mode responsive, il faut que dans le <head> de la page HTML figure la ligne suivante (balise meta viewport):

<meta name="viewport" content="width=device-width, initial-scale=1" />

Références:

Questions de détail

Faut-il les écrire les Media Queries en pixels ou en EM?

Un article qui préconise l’usage des EM:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/