Largeur d'un site en em

Bonjour,

Cela fait plusieurs fois que je vois ecrit que donner une largeur de site en em est déconseillé voire, une bêtise.

Quels sont les raisons pour cela ?

J'ai beau tester il doit y avoir quelquechose qui m'échappe car je ne vois pas ce qui peux poser problème.

Un problème de longueur de ligne et de nombre de caractères je ne pense pas puisque avec un max-width il est très simple de limiter à une largeur bien définie.

L'apparition éventuelle d'un scroll horizontal mais avec un max-width de 990px cela ne doit pas se produire ou dans des cas très rare je pense, où, un utilisateur en 800*600 aurait besoin d'un éventuel agrandissement supplémentaire.

Salut,

C'est sur que si l'utilisateur navigue en 800x600 et qu'en voulant agrandir la typographie, il se retrouve avec un page gigantesque en rapport avec son écran et donc une barre de défilement horizontale, ça ne risque pas de l'arranger.

Je ne pourrai pas te conseiller techniquement mais ce site m'avais plutôt bluffé : http://shiflett.org/

Je n'ai pas regardé le code dans le détail (en regardant la css tu comprendra pourquoi ^^) mais tout semble être défini en valeurs relatives, de plus, le site se redimensionne en largeur pour éviter la barre de défilement horizontal.

Pour moi, si l'affichage reste bon, pas de problème avec les largeurs en em, c'est même plutôt sympa.

knarf a écrit :
Cela fait plusieurs fois que je vois ecrit que donner une largeur de site en em est déconseillé voire, une bêtise.

Pour ma part, je déconseille l'utilisation des EM pour les dimensions horizontales, car sauf si on sait exactement ce que l'on fait c'est une source d'erreur importante. Par exemple si je crée un site de largeur fixe en pixels, et que créer un menu vertical de largeur 10em. Ou encore si j'utilise une largeur de site en EM sans penser à utiliser max-width.

Si on sait précisément ce que l'on fait et que l'on a testé le rendu avec plusieurs niveaux de zoom de texte, alors pas de problème.

a écrit :
Si on sait précisément ce que l'on fait et que l'on a testé le rendu avec plusieurs niveaux de zoom de texte, alors pas de problème.

Donc pas de contre indications particulières si l'on sait ou l'on mets les pieds.

Je pensais réellement être passé à côté de quelque chose durant mes différents tests.

knarf a écrit :
Si on sait précisément ce que l'on fait et que l'on a testé le rendu avec plusieurs niveaux de zoom de texte, alors pas de problème.

Donc pas de contre indications particulières si l'on sait ou l'on mets les pieds.

Je pensais réellement être passé à côté de quelque chose durant mes différents tests.

... ou pas

Fixer une largueur en EM peut réserver quelques surprises

EM n'est pas une valeur de taille d'objets tels que des blocs ou des tables mais une valeur de taille de textes. Quand on a une page papier de 21x29,7 cm avec les textes en corps 12pt, CM est une valeur de taille de papier et PT une valeur de fontes issue de l'imprimerie. On peut bien sûr imaginer avoir une feuille de papier de 80x120pt et des textes en 0,4cm mais c'est pas fait pour ça. Pour le web, si demain un outil de restitution à venir considère que EM va se gérer autrement que PX - même discussion que EM (emphase) qui pour le moment s'affiche comme I mais rien ne dit que ça ne s'utilisera pas autrement demain... - on fait quoi ? Le W3C dit bien que EM est le "font-size of the relevant font"*. Il y a donc détournement du langage à des fins d'affichage graphique, ce qui n'est pas un péché en soi mais un risque encouru inutilement : le fait que EM réfère au texte fait donc qu'il va (ou pourra) tenir compte de préférences utilisateurs. Je doute que ces préférences - qui vont par exemple définir la taille de base à partir de laquelle chaque valeur de EM se définira - soient ce que nous attendons en matière de contrôle de format/largeur d'affichage.

Ensuite, si c'est pour fixer des min-width / maw-width je ne vois plus du tout l'utilité d'utiliser EM.

Enfin, dernier point, on développait des sites en largeur en EM il y a 3 ou 4 ans à l'époque où aucun dispositif d'UA n'existait pour obtenir le même effet. L'idée (en tout cas c'est pour ça que je le faisais) était qu'agrandir les textes sans agrandir le design nuisait un peu à l'utilisabilité en perturbant le rapport taille/largeur : on agrandissait donc tout en même temps, comme sur le site Shifflet que donne bzh en exemple. Seulement entre temps sont apparues les fonctions zoom des UA en passe de généralisation et qui ont rendu ce dispositif inutile. Ce dispositif répond, sur cette question, au fameux "jusqu'à ce que les user-agents" du W3C : tant que le dispositif n'était pas proposé nativement c'était à nous de le prendre en charge. Maintenant il n'y a plus besoin. Donc "tailler" des sites en EM rejoint le rayon des A- A+ (agrandir les tailles de textes au click) aujourd'hui que tous les UA modernes le permettent nativement.
Du coup pour toutes ces raisons j'ai définitivement abandonné l'usage des EM comme unité de taille d'objets non-textuels SAUF pour les padding/margin des textes parce que je trouve qu'un item d'onglet de menu agrandi 3x ou 4x est moins bien perceptible/utilisable avec 5px de padding fixe qu'avec un .5em proportionnel. (en attendant que les UA implémentent des "blancs tournants" proportionnels autour des objets textuels)

* les specs signalent que EM "peut être utilisé pour la mesure verticale ou horizontale" des éléments, mais apparemment dans le cadre étroit des relations entre textes et élement parent.
Modifié par Arsene (10 Sep 2008 - 09:22)

Salut,

Arsene a écrit :

Ensuite, si c'est pour fixer des min-width / maw-width je ne vois plus du tout l'utilité d'utiliser EM.

On peut s'en servir pour légitimement fixer un nombre maximum et minimum de caractères par ligne pour éviter d'avoir une lisibilité médiocre.

Arsene a écrit :

Enfin, dernier point, on développait des sites en largeur ... pour les padding/margin des textes parce que je trouve qu'un item d'onglet de menu agrandi 3x ou 4x est moins bien perceptible/utilisable avec 5px de padding fixe qu'avec un .5em proportionnel. (en attendant que les UA implémentent des "blancs tournants" proportionnels autour des objets textuels)

Je plussoie sur l'utilité réduite voire inexistante d'un site tout en EM à l'heure ou le zoom globale (le meilleur exemple est l'architecture ERA d'Opera) se généralise même si son fonctionnement diffère d'un navigateur à l'autre.
Des blanc tournant autour des intitulés de menu est en effet plus judicieux. Pour ma part j'utilise par exemple des padding horizontaux en em au niveau des libellés de menu sachant que le passage à la ligne de certains items de liste est de toute façon inévitable et que cela ne nuit pas à l'ergonomie ou l'accessibilité visuelle des contenus.
J'évite en revanche de les utiliser sur les gros bloc de contenu.
Bref comme le fait remarquer Florent il faut pouvoir anticiper sur les éventuels préjudices causés.
Modifié par Hermann (11 Sep 2008 - 22:48)

Bonjour,

Pour l'argument du détournement je suis d'accord, pour les autres je le suis un peu moins.

"jusqu'à ce que les user-agents" du W3C : tant que le dispositif n'était pas proposé nativement c'était à nous de le prendre en charge. Maintenant il n'y a plus besoin. Donc "tailler" des sites en EM rejoint le rayon des A- A+ (agrandir les tailles de textes au click) aujourd'hui que tous les UA modernes le permettent nativement.

Donc si je suis cet argument l'on peux maintenant laisser les tailles de police en pixel puisque les navigateurs modernes permettent de s'en affranchir via le zoom ?

A part Opéra qui à un sytème de zoom compétitif (respect de la largeur d'écran) , les autres laissent encore la possibilité de n'agrandir que la police, quand on voit la cata sous IE7 c'est d'ailleurs préférable.

Avec les em (max-width) l'ont garde tous de même une certaine maitrise de la largeur et de la bonne tenu du site sauf dans le cas de power-user qui définissent eux même leur taille de police. Par contre là pour moi l'argument ne tiens pas un ctrl -résoudra un éventuel problème non ?

Quand les zooms auront le niveau de celui d'opéra et que de ce fait l'agrandissement de la police seule n'existera plus à ce moment là effectivement l'utilisation d'em rejoindra le rayon des A- A+ mais dans l'état actuel des choses pas si sur.
Modifié par knarf (17 Sep 2008 - 03:58)