Les points de rupture en « em »

Les tailles de police fluides c’est bien. C’est évident pour de multiples raisons valables (accessibilité, responsive web design, interopérabilité …).

Depuis quelques temps, de plus en plus d’articles (dont celui-ci) prônent l’usage d’unité fluide “em” pour définir les valeurs des points de rupture (breakpoints). Sur le principe je ne suis pas contre puisque je suis a priori un grand fan de la fluidité et du lâcher prise.

Mais.

Mais en fait, dans certains cas je trouve que cette méthode peut se révéler parfois déstabilisante pour les utilisateurs (je mets plein de bémols dans ma phrase, déjà que ce billet est bien parti pour être un nid à troll).

Je distingue fondamentalement sortes de designs :

  1. Celui en “pixel-perfect” qui est tout cassé dès que la taille de police change. C’est mal (même si la grande majorité des sites sont conçus ainsi)
  2. Celui qui s’adapte à la taille de contenu (fluide, pas de hauteur imposée, etc.). Bref, tout s’adapte harmonieusement quand la taille de police est changée. J’aime.
  3. Celui qui se transforme en “responsive” (qui impose un design complètement différent, une version de design “mobile” parce que la taille de police est plus grande).
    C’est le cas de l’image d’illustration ci-dessous parce que les media queries sont en “em”.

(source)

En ce qui me concerne, ce 3è choix me chiffonne un peu : on modifie radicalement le design du site sans nous demander notre avis.

Je ne dis pas qu’il s’agit toujours d’une mauvaise idée : le but étant que ce design et son ergonomie soient parfaits pour chaque taille de police… mais au final l’utilisateur peut se retrouver déboussolé parce qu’il a un site différent de son voisin, ou pire, différent à la maison et au boulot, ou entre son PC fixe et son portable selon ses réglages.

Bon, maintenant que ce premier troll est lancé, parlons de tout autre chose… 🙂

Prenons n’importe lequel des navigateurs les plus employés au monde et effectuons un zoom sur un site web au hasard, prenons goetter.fr (bouton “zoom”, ou molette).

Il se passe la chose suivante :** le site web s’adapte dans ses versions “responsive”, exactement comme si les media queries avaient été en “em”.** Mais en fait non, ils sont en pixels.

Oui, les navigateurs sont déjà assez “intelligents” pour s’adapter automatiquement.

Ceci ne fonctionne bien évidemment pas si vous parvenez à adapter le “zoom texte” uniquement.

Deuxième troll, donc.

Conclusion, comme dirait @PhilippeVay : « On em ou on em pas ».