Les media queries rendent possible de fixer des règles spécifiques en fonction du media (support) du contenu d’un site. On connaît et utilise depuis un bon bout de temps le @media print pour fixer des règles applicables à l’impression.

L’utilisation de plus en plus répandue des téléphones portables ou tablettes pour surfer sur le web ainsi que l’apparition de très grands écrans a rendu l’usage des media queries dédiées aux différentes largeurs affichées assez répandu. Encore faut-il peser différents paramètres pour bien faire les choses.

En bas de ce billet figure une petite bibliographie de référence. Je crois inutile de m’appliquer à reformuler ce qui est déjà si bien dit, aussi ne poserai-je ici que les problématiques auxquelles je suis confrontée pour que des avis ou discussions puissent se tenir à leur sujet.

Utiliser les media queries

Méthode d’import

J’ai choisi pour le moment d’importer depuis la feuille de style maîtresse (style.css) une feuille qui comporte toutes les règles des media queries.

Je manque de critères d’appréciation (et j’attends vos contributions) pour évaluer s’il eût mieux valu appeler cette feuille directement dans l’entête du fichier ? J’ai hésité aussi – et j’hésite encore – à faire une feuille par directive relative à la taille d’écran et de les appeler par import sous la forme :

@import url(small.css) and screen only (max-width:480px);
@import url(medium.css) and screen only (min-width:481px) and (max-width:1024px);
etc.

Ou combinaison de ces deux moyens. Je ne sais pas si ça change quelque chose sur les performances par exemple, ou si l’appel séparé via le head permettrait de ne pas charger inutilement une feuille de style qui ne sera pas exploitée par le support ?

Layouts

Dans presque tous les tutos que j’ai lus à ce sujet, un layout (structure) est déterminé par défaut dans les règles communes puis ces règles sont surchargées en cas de (écran plus petit, écran plus grand, etc.). Cela impose, comme vous pouvez le voir dans l’exemple de css publié par Raphaël sur Alsacréations (lien plus bas) d’y aller parfois à coups de serpe avec des !important pour être sûr que la règle pèsera plus lourd que celle lue en premier.

Cela veut dire aussi que les « mauvaises » règles sont lues/chargées en plus des « bonnes », celles dont on a vraiment besoin à ce moment-là.

Je ne suis pas sûre de ne pas me tromper car je trouve bizarre de ne l’avoir pas vu faire comme ça ailleurs, mais j’ai choisi quant à moi de ne définir dans les règles communes que celles qui le sont réellement et de déporter toutes les autres dans les @media kivonbien. Ça m’évite aussi d’avoir trop à me préoccuper du poids respectif de chaque règle.

À quelles valeurs fixer les seuils ?

Une fois qu’on s’est dit qu’on allait adapter la présentation en fonction de la place disponible, encore faut-il se poser la question des seuils. Le premier est – relativement – facile : une grande partie des téléphones mobiles affiche 320px en largeur (480 en mode paysage quand celui-ci existe). Mais après ? C’est qu’il y a des écrans qui vont chercher dans les 2500 pixels de large maintenant. 320px (voire moins) à 2520px (voire plus) ça fait un paquet de possibilités !

Le site mediaqueri.es, qui offre une galerie de design adaptatifs n’explique pas non plus (ou je n’ai pas trouvé) la base qui explique leurs choix de captures (320, 768, 1024, 1600). Enfin si, ils disent smartphone, tablet, netbook, desktop, mébon ça fait quand même un peu doigt-mouillé comme méthode.

J’ai cherché de la littérature à ce sujet mais n’ai rien trouvé. Les articles trouvés sur le web ne justifient pas leurs choix de seuils (hormis celui de 320/480) ou ne les expliquent que par les ipad, iphone et autres produits Mac, ce que je trouve un peu biaisé.

Puis, une nuit de sommeil et la réflexion aidant, la Lumière m’est apparue brusquement et j’ai LA réponse : ça dépend ! Aaaah tout de suite on se sent mieux, pas vrai ? Non mais sérieux, il n’y a pas d’autre réponse je crois, car ça dépend de la variation que vous appliquez et à quelle dimension elle se justifie. Par exemple j’estime que la lecture d’un article en pleine page est plus confortable tant que l’écran est moins large qu’environ 900-1000px, surtout que ça permet de mettre une marge confortable à gauche et à droite, ce que j’apprécie beaucoup. Ce « seuil » se justifie pour moi aussi dans ces eaux-là car j’ai choisi de laisser la taille des caractères par défaut du navigateur, couramment réglée sur 16px et que jusqu’à 900-1000px avec marges ça correspond à un nombre de caractères par ligne que j’estime harmonieux.

Voilà donc le seuil que je fixe pour le passage de 1 colonne à 2 colonnes. J’y ajoute ensuite des ajustements (titre plus petit sur tout petit écran, marge de plus en plus grande selon la taille, etc.).

Mise en œuvre

Pour représenter graphiquement les seuils et les queries correspondants, voici l’infographie de ce qui se passe ici[1].

Représentation graphique des media queries pour Ductile

J’ai donc deux « groupes » principaux correspondant à la structure de la page :

  • moins de 960px : screen and (max-width:960px) (1 colonne) ;
  • plus de 961px : screen and (min-width: 961px) (2 colonnes) ;

J’y ajoute :

  • 480px pour le seuil entre petit et grand titre ;
  • 640px pour le seuil entre toutes petites marges latérales et grandes marges latérales.

À noter, c’est aussi à 640px que je fixe le seuil d’adaptation de la taille de l’image maximale ainsi qu’une règle spécifique censée améliorer la lisibilité sur les écrans i-Quelquechose

S’il en manque en cours de route, on avisera !

Largeur de fenêtre ou largeur d’écran ?

Oh, that is the question my dear. Regarde dans le fichier user_head.html : la deuxième partie fait appel à un script javascript (références en bas de ce billet) pour que les media queries soient comprises par les navigosores. Au-dessus figure cette ligne :

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

La différence entre width et device-width c’est que le premier tient compte de la largeur de la fenêtre de consultation et le deuxième de la largeur de l’écran. La règle width=device-width c’est celle qui lui dit en gros : écoute, pépère, cherche pas à savoir si j’ai un androïd ou si j’ai quinze fenêtres ouvertes côte à côte sur mon 27 pouces ; ne t’occupe que de la taille qu’a mon site pour s’y étaler.

Dans les articles peu favorables à l’utilisation massive (et il faut bien le dire très à la mode) des media queries, je suis assez sensible à l’argument « Nautamine » : par pitié ne me donnez pas le mal de mer si j’ai le malheur de retailler ma fenêtre de navigateur.

Du coup… je doute !

Bibliographie sélective

Galeries

  • mediaqueri.es : galerie de démonstrations d’utilisation des media queries.

Articles en français

  • Les Media Queries CSS3, par Dew, sur Alsacréations. Impeccable pour une première approche ; complet et didactique.
  • Faut arrêter avec les Media Queries ! par Rémi, sur hteumeuleu. Un contrepoint intéressant, qu’on y adhère ou pas. C’est toujours bien devant un effet de mode que les arguments contre soient entendus et discutés.

Articles en anglais

Outils

Notes

[1] Yapa à dire, tu as la classe pour les infographies, merci Franck !