Des corrections nécessaires

Commençons donc par le commencement: le petit lifting subie par le site. En dehors de l'envie de changer, une nouvelle maquette s'avérait nécessaire pour plusieurs raisons.

  • Pour bricoler les fichiers CSS: supprimer une propriété spécifique à Mozilla, le -moz-border-radius, qui permet d'avoir des coins arrondis; elle n'est pas encore implémentée dans le code CSS (elle le sera sans doute dans la version 3), mais ne gênait en rien l'affichage des pages par d'autres navigateurs. Certaines techniques respectueuses des standards permettent d'obtenir le même résultat, mais elles font souvent appel à une imbrication plus ou moins artificielle de conteneurs div (la technique que j'utilise pour présenter image + légende à l'aide de liste de définition s'y prêterait par contre très bien). On peut néanmoins citer le dernier article de Dan cederholm, Mountaintop Corners, dont la solution, bien que rigide, a le mérite de la simplicité.
  • Un second bricolage concernait l'utilisation des styles en fonction du navigateur des internautes; cette véritable prise de tête (devinez à cause de qui) fera l'objet d'une prochaine actu du site (vous pouvez vous rafraîchir la mémoire en lisant les précédents épisodes: Des styles en fonction du navigateur et Des styles en fonction du navigateur, le retour de la vengeance).
  • Pour corriger de grossières erreurs: la mise en page des galeries de photos par exemple, tout bonnement illisibles sous une résolution de 800 pixels x 600 pixels (merci Nico de me l'avoir signalé).
  • Enfin pour nettoyer le code HTML: j'avais construit l'architecture des pages plus au feeling qu'avec une réelle vue d'ensemble de la chose. Au fur et à mesure de mes lectures, l'agencement du contenu s'est peu à peu clarifié, et je me suis rendu compte qu'il y avait pas mal de conteneurs inutiles. Enfin, pas vraiment inutiles, mais on peut souvent remplacé un div par un conteneur bloc déjà existant, comme p par exemple.

A noter que le nouvel habillage ne nécessitait aucune des corrections du code HTML; la manipulation des feuilles de styles était largement suffisante. Mais tant qu'à nettoyer, autant le faire de la cave au grenier.

En fait, un problème plus sournois me titillait le néocortex, sans que je sois capable de le nommer ni même de l'identifier. Quelque chose qui alourdissait la lecture, en dehors des inévitables fautes d'orthographe et autres formulations plus que bancales qu'on se demande parfois si j'écris bien français :-).

J'ai commencé par y remédier en augmentant légèrement la hauteur des lignes avec la propriété line-height, mais cela n'a pas suffit. Il restait un je ne sais quoi qui empêchait la lecture d'être vraiment fluide.

Finalement, j'ai fini par comprendre de quoi il retournait grâce à un article de Russ Weakley publié sur le site australien Max design: Ideal line length for content. Pour résumé la substantifique moelle de l'article: la lecture d'un texte devient difficile dés que la longueur des lignes est trop importante. Et l'auteur d'expliquer comment on peut obtenir une largeur de texte propre à rendre la lecture plus agréable (pour approfondir ce sujet, lire l'excellent et instructif article d'Arno: La lecture facile à l'écran).

Le problème était identifié. Il fallait maintenant chercher à le résoudre.