Outils CSS de base pour le design adaptatif

Contexte

Arrivée de l'iPhone, puis des autres smartphones, puis des tablettes : les sites web doivent s'adapter à de multiples tailles d'écran

En parallèle, taille et définition des écrans d'ordinateur augmente

Il n'est plus pertinent de proposer une « version mobile » et une « version desktop » de son site web…

un seul site, qui doit s'adapter à toutes les possibilités

Responsive design

• « Design adaptatif » : styles qui s'adaptent en fonction de la place disponible, de la résolution, de l'orientation de l'écran…
• Adaptabilité en termes de :
  • mise en page : colonnes, placement des menus
  • contenu : montrer plus ou moins en fonction de l'espace
  • images : réduire leur taille
  • polices : à adapter selon l'écran

Media queries

• Objectif : appliquer des règles CSS uniquement lorsque certains critères sont remplis
• Exemple : « lorsque la largeur de la fenêtre est en-dessous de 800 pixels, je veux que mes paragraphes soient en jaune sur fond noir »

  @media (width <= 800px) {
    p {
      background: black;
      color: yellow;
    }
  }
  

• N.B.: la règle spéciale @media contient des règles CSS !
• Référence complète : Media Queries W3C Recommendation

Critères possibles

Les propriétés sont de la forme critère: valeur

La plupart des critères peuvent prendre les opérateurs min- et max-

Par exemple, min-width: 400px signifie « largeur supérieure à 400px » (autrement dit, la largeur minimale pour laquelle la propriété s'applique est 400px)

Utilisation des requêtes média en pratique

En pratique, le plus souvent on se contente d'utiliser max-width et min-width

on cherche principalement à s'adapter à la taille de la fenêtre, que l'internaute soit sur un PC ou sur un téléphone

on ne s'intéresse qu'à la largeur car cette dimension est « fixée »
(on ne veut surtout pas d'ascenseur horizontal, alors que les ascenseurs verticaux ne posent aucun problème)

Par ailleurs, une syntaxe plus simple et lisible a été introduite en 2022 : on peut maintenant utiliser des opérateurs de comparaison < <= >= > avec width (et les autres propriétés où c'est pertinent).
On peut ainsi écrire :

@media (width <= 800px) {
    p { background-color: gold; }
}

@media (width > 300px) {
    p { color: forestgreen; }
}

/* On peut même donner un intervalle : */
@media (600px <= width < 1200px) {
    p { text-transform: uppercase; }
}

Par souci de clarté on utilisera cette nouvelle syntaxe dans le cours, mais vous risquez de voir encore souvent l'ancienne.

Organiser les requêtes média

Si on met des media queries un peu partout dans son CSS et dans plusieurs sens (max/min), impossible de s'y retrouver !

On va plutôt avoir un CSS de base, modifié ensuite avec des requêtes média — si possible dans une seule direction

Soit on part de la version mobile et on fait des modifications pour des largeurs de plus en plus grandes, soit l'inverse

/* version par défaut: sur grand écran */
.menu { width: 30em; /* etc. */ }

/* écran plus petit: on passe le menu en horizontal */
@media (width <= 100em) {
	.menu { width: 100%; }
	.menu li { display: inline-block; }
	/* etc. */
}

/* écran encore plus petit: on cache le menu */
@media (width <= 50em) {
	.menu { display: none; }
}

Requêtes média dans le HTML

Remarque : on peut aussi utiliser les media queries dans l'attribut media de l'élément link, pour choisir quelle feuille de style charger

<link rel="stylesheet" media="print" href="print.css" />
<link rel="stylesheet" media="screen" href="all_screens.css" />
<link rel="stylesheet" media="screen and (width <= 600px)"
                       href="small_screens.css"
/>

Ajustement automatique

• Navigateurs mobiles : zoom automatique pour ajuster la page dans la largeur. À désactiver seulement si votre site est responsive !
• Cela se fait dans le HTML avec une balise meta :

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

• Autre valeur possible, pour empêcher l'internaute de modifier le niveau de zoom (uniquement sur terminal mobile) :

  <meta name="viewport" content="maximum-scale=1.0,
                                 minimum-scale=1.0" />
  

  Très déconseillé (sauf si vous savez ce que vous faites) : la possibilité de zoomer est indispensable pour l'accessibilité !
• Plus de détails sur le viewport dans cet article en français

Unités de longueur : rappel

Unités de longueur pour le responsive design

• Compromis entre relatif et absolu : rem, correspond à la valeur font-size de l'élément racine
• Unités de longueur qui dépendent de la taille de la fenêtre :
  • vw: 1% de la largeur courante de la fenêtre (viewport width)
  • vh: 1% de la hauteur courante de la fenêtre (viewport height)
• Par exemple, si la fenêtre fait 1200 pixels de large, un vw vaut 12 pixels
• C'est une unité comme une autre ! Techniquement, rien n'empêche d'utiliser des vw et des vh partout à la place des px ou des em
• Explications sur l'intérêt de ces unités (en particulier pour la taille de police et pour la hauteur des blocs)

Paliers

• Aux débuts du responsive design, seulement quelques largeurs d'écran
• les stratégies sont longtemps restées basées sur des paliers (versions pour smartphone, tablette, écran) — exemple)
• De plus en plus de largeurs différentes ⇒ les paliers ne marchent plus aussi bien : design mal optimisé pour les tailles entre deux paliers
• Un vrai design adaptatif n'utilise pas de paliers fixés, mais des paliers qui dépendent du contenu
• … ou pour aller encore plus loin, idéalement chaque « morceau » de la page fonctionne indépendamment du reste, et a donc ses paliers spécifiques

Conclusion

• Responsive design : design qui s'adapte
• Design bien fait = adaptabilité de base ! exemple: design avec des tableaux. NB: si HTML propre, garantit la possibilité d'accès minimal depuis n'importe quoi. à part les images ou les tableaux, le HTML pur est très responsive !
• Attention aux frameworks qui permettent de faire du responsive, comme Bootstrap ou Foundation :
  • basés sur des breakpoints, très automatisés ⇒ qualité moyenne
  • Très pratiques pour gagner du temps, mais pas de miracle : un vrai design adaptatif demande beaucoup plus de travail.