Faut arrêter avec les Media Queries !

Chaque nouvelle technologie voit arriver son lot de bonnes et mauvaises utilisations, et c’est particulièrement vrai sur le web. La dernière lubie en date qui m’agace particulièrement, c’est l’utilisation de Media Queries à tout va. Et ce qui m’a fait sortir de mes gonds, c’est cette liste de 20 sites « amazings » utilisant les Media Queries. Et surtout, c’est le récent tutoriel de l’habituellement excellent WebdesignerWall sur « Le Design Mobile et Adaptatif en CSS3 avec les Media Queries« . Allez-y, essayez leur démo. Attendez, prenez un sac à vomi avant.

Premièrement, avant de vous expliquer pourquoi je trouve cette démo et tous ces sites horribles, voici une citation intéressante.

J’adore quand je redimensionne une fenêtre de mon navigateur, et que tout bouge partout à l’écran et que du contenu disparaît sous mes yeux.
— Personne

Personne. Personne n’a jamais dit ça. Et personne ne dira jamais ça. C’est absolument horrible, et c’est à l’encontre de toutes les bases d’ergonomie et d’expérience utilisateur. Quand un utilisateur redimensionne une fenêtre, c’est pour laisser apparaître le contenu qui l’intéresse, et utiliser d’autres fenêtres par dessus. Par exemple pour laisser une vidéo en lecture, ou un player audio. Ou encore pour laisser un exemple de code à l’écran, pour ensuite le lire en parallèle dans son éditeur de code source. Dans la liste citée ci-dessus, vous pouvez également visiter les très jolis sites de Sasquatch et d’Alsacréations (à mon avis le pire de tous, cocorico !).

Si vous utilisez les Media Queries pour du mobile, alors super ! Mais dans ce cas n’allez pas emmerder les gentils internautes qui surfent sur leurs écrans 27″. Pour ça, il suffit tout simplement d’arrêter d’utiliser la requête « max-width », et d’utiliser « max-device-width » à la place.
/* Claaaasse */
@media screen and (max-device-width:480px) { .monsitetropgenial { ... } }
/* Pas classe */
@media screen and (max-width:480px) { .monsitesupernaze { ... } }


Deuxièmement, si vous détestez quand même vraiment vos utilisateurs et que vous tenez à leur pourrir la vie lorsqu’ils redimensionnent leur fenêtre, les Media Queries n’ont quasiment aucun intérêt. Dans le cas de cette démo en particulier, on pouvait faire la même chose il y a 5 ans sur tous les navigateurs. Ca s’appelle du design fluide. Et avec les propriétés CSS « min-width » et « max-width », vous pouvez sans problème faire disparaître votre sidebar si ça vous chante.

Je n’ai rien contre les Media Queries, et je pense que c’est une avancée majeure pour le design mobile. Mais par pitié, arrêtez d’imposer ça à vos utilisateurs desktop.