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.

  1. Johan, le

    Je me suis dit avec un titre pareil on allait pas être d’accord et que ca allait clasher dans les commentaires.
    Au final je suis d’accord avec toi, je retiens l’information, sur le max-device-width.
    J’ai un site pas classe à transformer en site classe…

  2. Thomas, le

    Salut !

    Je suis d’accord avec toi !
    D’un point de vue utilisateur, le max-device-width a beaucoup plus de sens.
    Je suis pratiquement sûr que les intégrateurs qui utilisent max-width le font pour que les gens puissent tester en redimensionnant leur fenêtre. Du coup c’est hype et ils ont leur lien sur Designshask :)

    A plus,
    Thomas.

  3. Raphael, le

    Bonjour,

    « Mais par pitié, arrêtez d’imposer ça à vos utilisateurs desktop. ». Ton raisonnement ne s’applique que lorsque la fenêtre du navigateur est (très) réduite, n’est-ce pas ?
    Dans 99% du temps, ta fenêtre fait au-moins 1024px de large je présume (surtout si tu as un 27″). Ton emportement concerne donc uniquement les personnes qui ont un écran « classique » (plus de 17″) et qui réduisent la fenêtre. Nous sommes toujours d’accord ?

    Alors même dans ce cas de figure, je ne suis pas d’accord avec toi.

    Si ta fenêtre est redimensionnée (par choix ou contrainte), tu as le droit de bénéficier d’un affichage adapté aux petits écrans. C’est le cas pour :
    – les terminaux dont la taille physique est réduite (smartphone, iPad, netbooks),
    – les écrans 27″ où tu réduis volontairement la fenêtre pour pouvoir afficher plusieurs applications à la fois.

    Dans les deux cas, je ne suis personnellement pas à l’aise avec des sites non adaptés, où les contenus débordent… et « un site web fluide avec des min-width et max-width » est malheureusement loin d’être suffisant : hteumeuleu, réduit, me contraint à une barre de défilement horizontale. Et c’est bien entendu loin d’être le seul : quasiment aucun site web « classique » ne s’adapte à une très petite fenêtre (je parle toujours de fenêtre inférieures à 1024px voire 640px).

    Peut-être suis-je le seul à ne pas apprécier les sites non adaptés à des petites fenêtres, mais de là à traiter de « naze » ceux qui font un effort me semble assez démesuré.

    Pour finir, je reviens à ton code d’exemple qui évoque la résolution de 480px : as-tu testé hteumeuleu à cette résolution ? Penses-tu sincèrement qu’on pourrait supprimer facilement la barre de scroll à coup de min-width / max-width ?
    En ce qui me concerne, la navigation desktop sur ce site avec une largeur de 480px me gêne beaucoup et je serai bien plus à l’aide avec une version adaptée pour petite taille.

    PS : par contre, je suis tout à fait d’accord pour ta critique au sujet de la suppression de contenu. On va y réfléchir

  4. Nicolas Hoizey, le

    Tout à fait d’accord avec Raphael.

    Quelle que soit la taille de mon écran (de 3.5″ à 52″), ou plutôt devrait-on parler de résolutions (de 320px à 1920px de large), je veux n’avoir qu’un seul scroll, quelle que soit la taille de la fenêtre du navigateur.

    Donc à moins que le scroll horizontal soit un choix stylistique du site, je préfère avoir un unique scroll vertical, et donc un design qui s’adapte à la largeur disponible.

  5. Rémi, le

    @Raphael : Je suis tout à fait d’accord avec toi sur le fait qu’un site adapté à la résolution ou taille d’écran de l’internaute est un plus. J’apprécie les efforts que certains intégrateurs font pour essayer de résoudre ce problème, mais je pense très sincèrement que l’utilisation des Media Queries telle qu’elle est faite aujourd’hui sur la plupart des sites est mauvaise. Ca n’en rends pas le site en question mauvais, mais uniquement son utilisation des Media Queries et l’expérience utilisateur.

    Quand un utilisateur desktop redimensionne une fenêtre (que ce soit dans un navigateur ou dans n’importe quelle application), il s’attends à ce que des scrollbars apparaissent si le contenu est plus important que la taille de la fenêtre. Par exemple, quand sur mon blog un utilisateur va sélectionner un paragraphe de texte, puis réduire la taille de sa fenêtre à la taille de sa sélection, tout se passe comme prévu. Des scrollbars vont apparaître, et l’internaute pourra facilement ajuster la taille de sa fenêtre au contenu qu’il souhaite laisser visible. Je pense que sur mon blog, ça ne doit pas arriver souvent. Par contre, il m’arrive très souvent de redimensionner la fenêtre de mon navigateur sur Youtube pour laisser uniquement la vidéo visible sur un fenêtre que je laisse dans un coin. Youtube n’ont pas d’optimisation particulière, et je peux donc redimensionner ma fenêtre comme dans n’importe quelle application, sans surprise.
    Par contre, si je vais sur Alsacreations, et que je souhaite par exemple conserver une fenêtre avec uniquement le paragraphe « A propos » de visible, un gros problème se pose. En ayant une largeur de fenêtre au maximum (par exemple 1440), je vais scroller verticalement jusqu’à ce paragraphe. Ensuite, en redimensionnant ma fenêtre, le navigateur ne va pas ajouter des scrollbars comme j’aurais pu m’y attendre. A la place, la mise en page du site va complètement « sauter » à plusieurs reprises au fur et à mesure de mon redimensionnement, jusqu’à rendre le paragraphe « A propos » totalement invisible quand j’aurais une fenêtre de moins de 630px de large. Je suis du coup obligé de rescroller pour me repositionner sur le contenu que j’avais déjà ciblé en premier lieu.

    C’est peut être un défaut de jeunesse de l’implémentation des Media Queries des navigateurs, mais le résultat est dans tous les cas celui que je reproche : une mauvaise expérience utilisateur.

  6. Michael, le

    Tout d’abord, j’adore ton blog, ça c’est fait ;)

    Maintenant, je reste partagé sur le sujet, je pense en effet qu’il est bien d’offrir un site qui correspond à chaque fois à la résolution de l’utilisateur, pour lui offrir le confort de lecture optimal.

    Je ne pense pas que lorsque tu lis un article, tu t’amuse à redimensionner la fenêtre en même temps.

    D’autre part, je suis certain que tu aurais tempéré ta critique si les web designer et site exemple étaient allé au bout de leur démarche et si ils avaient proposé un site optimiser pour les 27″ et leur résolution de 2560* 1440.

    Imagine un site et l’intégralité de son contenu sur ton immense dalle, quoi de plus fabuleux.

    Comme tu dis c’est une avancée majeure et elle est jeune.
    Laisses lui le temps de mûrir et laisses aux web designers, le temps nécessaire à la maîtrise de cette nouvelle techno.

    Dans quelques temps, je suis certain que nous serons scotché par l’originalité et l’innovation des sites réalisés avec cette techno et surtout conçu par des gens qui auront pris le temps de découvrir le potentiel de ce système.

  7. Florent Verschelde, le

    Moi je trouve ça cool qu’on parle d’expérience utilisateur (négative, positive, en diagonale, les bras en l’air, une deux une deux, tape dans tes mains…) au sujet de quelque chose que 0,01% des utilisateurs du Web font: redimensionner la fenêtre du navigateur au cours de la visite d’un site. Je dis ça, je dis rien…

    La personne qui redimensionne sensiblement la fenêtre du navigateur, c’est à priori un power user qui va se familiariser assez vite avec la manière dont les sites Web actuels réagissent à ça. Après, l’adaptation du design sur une colonne on aime ou on aime pas, on recherche cet effet ou il nous exaspère, ça dépend un peu des gens. On fait quoi pour trancher, un sondage? :P

    Pour ma part, je recommanderais au doigt mouillé de limiter les variations de mise en page à deux:
    – Un design fluide à une seule colonne, pour petits écrans (smartphones, tablettes en mode portrait).
    – Un design éventuellement fixe, peut-être sur plusieurs colonnes, pour les écrans plus grands (tablettes en mode paysage, laptop/desktop).
    Je ne vois pas trop d’intérêt à dépenser du temps pour micro-gérer 4 ou 5 variations de mise en page au total.
    Par contre, cantonner l’utilisation des Media Queries à max-device-width, bah je suis pas trop pour. Je suis dans le camps de ceux que des variations pas trop nombreuses et plutôt raisonnables n’exaspèrent pas. :)

  8. Rémi, le

    @Florent : J’avais un peu oublié de te répondre, mais j’avais en tête une réaction concernant le pourcentage d’internautes qui redimensionnent leur fenêtre au cours d’une visite. Je suis tout à fait d’accord pour dire que ça ne concerne vraiment pas grand monde (0,01% comme tu le dit, voire même beaucoup moins). C’est donc probablement insignifiant quand tu fais le site du club de tricot de ton village. Par contre, quand tu travailles sur des sites qui font plusieurs millions de pages vues par mois, 0,01% ça commence à faire beaucoup de monde.

    Encore une fois, mon coup de gueule concerne ici une utilisation malintentionnée des Media Queries. Si l’utilisation des Media Queries au redimensionnement du navigateur apporte quelque chose à l’internaute et à l’expérience utilisateur, alors foncez. Si par contre vous n’êtes pas sûr du résultat, alors il vaut mieux ne rien faire et se contenter du comportement par défaut du navigateur.

  9. YopSolo, le

    mon dieu de l’esprit critique & du bon sens. toi tu vas avoir des problèmes !