Fluide, fixe et élastique

Résoudre le problème de longueur de ligne revenait à repenser la manière d'afficher le texte. La mise en forme d'une page web peut grosso modo se construire de deux manières (non, je ne parlerai pas des tableaux :

  • Avec un squelette fluide, où les largeurs des différents conteneurs sont exprimés en pourcentage. Cette technique a l'énorme avantage d'adapter la mise en page à la taille de la fenêtre du navigateur. La maquette précédente était construite sur un squelette fluide : le contenu du site s'adaptait au redimensionnement et les textes restaient toujours visibles. Seul problème: si vous définissez une largeur pour le conteneur de texte qui soit convenable (rapport à la longueur des lignes), pour une résolution d'écran de 800 x 600 par exemple, la présentation du texte sous une résolution de 1024 x 768 sera malheureusement beaucoup moins bonne.
  • Avec une maquette dont la largeur des conteneurs est fixée en pixels ; elle permet alors de maîtriser plus facilement cette présentation du texte. Bien évidemment, cela limite les manoeuvres de l'internaute, qui se retrouvera parfois avec une barre de défilement horizontal s'il réduit la largeur de la fenêtre de son navigateur.

En fait, cette dichotomie n'est pas aussi stricte: on peut très bien construire une maquette fluide en limitant la taille du conteneur du texte de manière adéquate. Il faut utiliser une propriété CSS 2 particulière, le max-width, qui permet de définir la largeur maximale d'une boîte ; le site Pompage.net est un exemple de ce type de mise en page. La solution n'est cependant pas parfaite puisque Internet Explorer ne comprend pas la propriété max-width.

Alors que faire, que choisir ? La fluidité ou la maîtrise ? Un mix des deux ?! Dans des cas comme celui-ci, on se retourne vers les « aînés », les professionnels de la profession pour voir quelles solutions ont été adoptées. Malheureusement, mes sites références ne furent d'aucun secours : si certains comme Open Web tablent sur une fluidité maximale, d'autres comme A List Apart contrôlent strictement le contenu de leurs pages web.

Une construction fluide ne cadrait pas vraiment avec la nouvelle maquette que j'avais en tête, avec simplement une colonne centrale de texte ; la solution entièrement fixe ne me plaisait pas trop non plus, et provoquait des problèmes d'affichage pour le menu horizontal (voir nouvelle suivante).

Finalement, j'ai opté pour une solution intermédiaire décrite dans l'article de Russ Weakley : entre le fluide et le fixe, il y a l'élastique :-). La maquette en elle-même peut-être considérée comme fixe, et si la fenêtre du navigateur est trop réduite en largeur, une barre de défilement horizontal apparaîtra. Par contre, si vous augmentez la taille des caractères (commande Affichage -> Taille du texte), la maquette grandira en même temps, ceci parce que les largeurs des boîtes sont exprimées en em et non pas en pixels. Cette propriété est utile pour les malvoyants qui ont besoin de grossir le contenu des pages, ou sous une résolution de 1280 x 1024 pour une lecture plus aisée par exemple. Elle était aussi nécessaire pour éviter que le menu horizontal ne soit pas bien lisible avec une taille de texte supérieure à celle par défaut.

Voilà donc une mise en page recentrée sur le texte. Il reste encore quelques ajustements à apporter mais le gros du travail est fait. Un dernier mot concernant l'affichage sous Internet Explorer: j'ai fait tout ce que j'ai pu en fonction de mes modestes connaissances ; j'ai corriger les bogues les plus évident, notamment la mauvaise gestion des largeurs de boîtes, mais je dois avouer que j'ai fini par céder à la facilité et écrit des propriétés de styles de telle manière que IEne puisse pas les lire. Je posterai bientôt une actu sur le sujet, et je tenterai de pousser le plus loin possible les corrections, mais les pages sont en XHTML valide, et elles s'affichent correctement avec les navigateurs respectueux des standards comme Mozilla (ou tout autre navigateur basé sur le moteur de rendu Gecko) et Opera. C'est tout ce qui compte dorénavant :-). Voir aussi les derniers tests du site.