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 (max-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, on ne va quasiment utiliser que max-width et min-width

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 (max-width: 100em) {
	.menu { width: 100%; }
	.menu li { display: inline-block; }
	/* etc. */
}

/* écran encore plus petit: on cache le menu */
@media (max-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 (max-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

Largeur adaptable sans requête media

• On peut utiliser les propriétés CSS max-width et min-width
• Exemple, pour que le body ne fasse jamais plus de 60 em de large :

  body { max-width: 60em; }
  

  ou pour que le menu fasse 30% de la largeur de l'écran, mais ne soit ni trop petit ni trop grand :

  #menu {
    width: 30%;
    max-width: 50em;
    min-width: 10em;
  }
  

  ou pour que les images ne dépassent jamais de leur conteneur (et donc ne soient jamais plus larges que l'écran) :

  img { max-width: 100%; }
  

• Dans les cas complexes où on donne des valeurs « dynamiques » aux trois propriétés, max-width gagne contre width mais perd contre min-width
• La façon dont la largeur finale est calculée peut être complexe à comprendre, voir la spécification
• Pas grave, en général seuls les cas simples (comme les exemples ici) nous intéressent

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.