Au cours du dernier mois j'ai utilisé plusieurs types d'écrans pour visiter des pages webs:

1. mon smartphone ~5“
2. une tablette en spare ~8”
3. le mac book air d'un collègue 13“
4. mon mac book pro 15”
5. l'alienware d'un étudiant 17“
6. mes écrans fixe 24”
7. une table Surface SR40 40“

Pour ma seule utilisation, les concepteurs des sites que je dois utiliser quotidiennement pour le travail ou pour mes loisirs devraient déjà prendre en considération 7 formats d'affichage différents.

Mauvaise nouvelle : la plupart ne le font pas. Le résultat ?

• Je me retrouver avec 80% de la surface inutilisée, présentant juste le background du site.
• Je dois utiliser le scroll 4 ou 5 fois de suite pour trouver la moindre information sur une page, aller à droite, en bas, un peu à gauche, remonter… Je loupe de l'information.
• Le site assez sympa que j'avais vu chez moi devient une galerie des horreurs en terme de layout quand je le montre à un collègue.

Fort heureusement, en bon étudiants modernes ravis de combler cette lacune, vous voilà avide de trouver une solution à ce problème intolérable !

Spoiler : la solution n'est pas de dire ”mon site n'est consultable que sur un écran de 27 pouces, va t'en acheter un.“

Deux mots : media queries.

Les media queries ont été introduite par CSS3 et permettent de définir un ensemble de règles de style en fonction de la résolution de l'appareil.

En effet, pour rappel, le CSS est interprété par le navigateur, qui est un logiciel s'exécutant sur une machine cliente. Au moment de l'interprétation effective des règles CSS que vous concevez, la résolution de l'écran qui en affiche le résultat est fixée.