10) Les media queries : concept

Précédent | 12/16 | Suivant

Media queries, pourquoi faire ?

Les medias queries permettent de remplacer certains comportement CSS par d’autres en fonction des conditions d’affichage d’une page html.

- une résolution plus petite ou plus grande peut être détectée. Par exemple le site est visualisé sur un téléphone avec une résolution de 320 pixels de large, ou un ordinateur avec un très grand écran.
- un média de sortie peut-être détecté : écran, écran de téléphone, imprimante ou même lecteur vocal
- une orientation de la page particulière (écran vertical).
- une technologie particulière : monochrome, rétina, etc.

Chaque support capable de visualiser des contenus web - ordinateurs de bureau, portables, tablettes, smartphones - a ses propres spécificités en terme de taille et de résolution. Développer des pages spécifiques à chacun de ceux-ci est impossible, d’autant que chaque année met sur le marché de nouveaux produits. Les medias queries permettent d’adapter une même page html à ces supports possibles, en ne changeant que ce qui est nécessaire pour un affichage adéquat.

Détection et breakpoints

L’idée des media queries est d’ajouter aux css standards des redéfinitions (ou d’autres règles) au cas où certains cas de figure sont rencontrés.
On peut détecter :
- le type de média (screen, tv, print par exemple)
- la taille de l’écran exprimée en pixel
- la taille de la fenêtre (attention, pas tout a fait la même chose que la taille d l’écran : on peut avoir une fenêtre plus petite que son écran)
- la résolution de l’écran (rétina par exemple)
- le nombre de couleurs (monochrome, milliers de couleurs)
- L’orientation et le ratio (vertical ou horizontal, ou encore 4/3 ou 16/9)

Breakpoints
Dans le cas de changement des dimensions de l’écran, qui est le plus courant, on va placer des breakpoints - un point de rupture - qui permettent de faire valoir d’autres déclarations CSS, et ainsi réorganiser l’affichage en fonction de la taille de l’écran. Soit que la résolution est détectée au chargement de la page, soit que le visiteur change la taille de la fenêtre pendant l’affichage.
"Quand la page est de maximum 640 pixels de large", "quand la page est plus grande que 1200 pixels de large" sont des exemples de breakpoints. Ceci permet par exemple de réduire la taille d’un titre, ou de mettre les liens de navigation en liste verticale plutôt qu’horizontale.

@media screen and (max-width: 640px) {
 h1 {
   font-size:28px;
 }
}

Ce code permet d’attribuer une taille maximale de 28 pixels sur un titre principale si la page est vue sur un écran et que sa taille est de 640 pixels ou moins.

Queries for the future

L’idée des queries est que la liste n’est pas exhaustive.
D’une part on peut tout à fait ne pas placer de media query, soit parce qu’on décide que le site ne s’adapte par pour les smartphones, soit parce que la mise en page est liquide et s’adapte à tous les cas de figure.

On peut aussi adapter le site à quelques supports particuliers en fonction de sa destination. Le nombre d’adaptation est alors libre (smatphone, tablette horizontale, verticale, écran de plus de 1440 pixels, écran de plus de 2200 pixels, etc.

On peut imaginer que dans l’avenir d’autres standard vont émerger, créés par des ingénieurs assistés d’équipes marketing en mal d’obsolescence programmée. La liste des media queries va alors s’alonger. les écrans 3D avec lecture vocale pourront un jour avoir leur comportement css adapté. La description des medias queries est ouverte à ces nouvelles déclarations.

Actuellement, on adapte principalement les sites à ces supports
- grands écrans : plus de 1400 pixels de large
- ordinateurs de bureaux et portables : 1024 à 1400 pixels de large environ
- tablettes de résolution moyene : 800 pixels de large
- smartphones : 320 pixels et/ ou 480 pixels de large

Deux tendances : adaptation ou "mobile first"

Deux approches différentes retiendront notre attention dans le codage des medias queries.

Adaptation d’un site "standard" aux supports nouveaux
La première approche consiste a produire un site orienté vers les écrans d’ordinateurs basé sur le standard "960 pixels de large", de telle manière a avoir un site compatible avec les écrans de 1024 pixels et au delà. Cette approche a été en vigueur avant que les smartphones et tablettes ne se multiplient, et beaucoup de graphistes maitrisent sa conception. Les medias queries seront donc ajoutées à partir de cette version "960 pixels" considérée comme base, pour adapter le site à d’autres. On y adjoindra donc des medias queries pour
- s’adapter à la résolution tablette (800 pixels)
- s’adapter aux smartphones (320 pixels)
- si il reste du temps, une adaptation pour les grands écrans (1280 et plus)

Cette approche peut être satisfaisante si on a tout de même réfléchi au comportement des éléments au moment de coder la css de base. Certains choix dans le codage HTML ou les CSS peuvent poser des problèmes à l’adaptation, demander un surcodage important.

La tendance "mobile first"
Cette approche consiste au contraire à penser d’abord à la résolution la plus petite, puis a ajouter des comportements graphiques qui tirent profit de définitions d’écran plus élevées. Par exemple : une liste d’images s’affiche avec une image par ligne sur un petit écran, puis deux par ligne si l’écran est plus large puis 3 et même 4 si la définition augmente.
L’astuce consiste donc à donner la taille pleine à l’image, puis à ajouter des comportement pour les autres écrans.

Deux stratégies

Les supports étant en pleine explosions, on a de plus deux grandes stratégies pour déclarer les breakpoints.

S’adapter aux standards d’écrans
La première stratégie consiste a détecter les médias et de coder un comportement pour le maximum de ceux-ci. Cette technique peut s’avérer laborieuse et vaine, car la liste s’allonge de mois en mois.

S’adapter aux besoins du contenu
La deuxième stratégie consiste à designer la mise en page d’un site sans penser aux définitions d’écran, et à l’adapter par des medias queries chaque fois que la taille de l’écran perd en ergonomie ou élégance.
"Start with the small screen first, then expand until it looks like shit. Time for a breakpoint !" La citation est de Stephen Hay. (Voir cet article)
Il faut tout de même avoir en vue une mise en page de départ. Ici, on démarre, comme pour l’approche "mobile first", du plus petit écran.