Arts numériques

Media queries, pourquoi faire ?

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

– une défintion 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, dépassant les 1600 pixels de large.
– une résolution d’écran peut aussi être détectée : les écrans rétina peuvent ainsi être détectés
– un média de sortie peut-être détecté : écran, écran de téléphone, imprimante ou même lecteur vocal
– le nombre de bits affecté àchaque pixels permet de distinguer les écrans en noir et blanc, en 256 couleurs ou en millions de couleur, par exemple.
– 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.

h1 {
    font-size:60px;
}

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

Le code ci-dessus attribut une taille de base de 60 pixels pour la balise h1, puis déclare un breakpoint si la page est vue sur un écran et que sa taille est de 640 pixels ou moins. Dans ce breakpoint, (et donc dans ce cas de figure), on attribue une taille de 28 pixels sur la balise h1.

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, impession, etc.)

On peut imaginer que dans l’avenir d’autres standards 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’allonger. 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 moyenne : 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 tailles. 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, comme l’ordre de succession des éléments dans la page, et du coup demander un surcodage important, voire le passage par du javascript pour adapter le comportement visuel.

La tendance "mobile first"
Cette approche consiste au contraire àpenser d’abord àla résolution la plus petite, puis a ajouter ensuite 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 encore.
L’astuce consiste donc àdonner la taille pleine àl’image, puis àajouter des comportement pour les autres écrans.
Des frameworks CSS importants comme Bootstrap utilisent cette approche.

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.