Note : ce billet ne concerne en rien les velléités d’installation d’une base lunaire permanente par les États-Unis, pas plus que la stratégie militaire en milieu désertique par ailleurs.

Entre la croissance de la largeur des écrans et celle des téléphones mobiles et autres PDA proposant un navigateur web, gageons que la maîtrise de l’espace sera la grande problématique de l’année 2007, et probablement de la suivante.

Si la coutume qui veut qu’on développe en 720 pixels de large pour une résolution de 800600 tend maintenant à s’estomper au profit de 950 pixels pour du 1024760, les jeux ne sont pas faits pour autant. Bien que fort séduisants, les layouts dits “liquides” – car ils s’adaptent et adaptent leur contenu à la largeur de l’écran – posent finalement plus de problèmes qu’ils n’en résolvent.

D’une part, les responsables des chartes graphiques travaillant sous Photoshop, ils sont souvent incapables de penser un espace autre que fixe, et la valeur artistique des layouts liquides tend souvent à désirer. En dehors de celui de Wikio que je trouve tout à fait réussi, je ne crois pas avoir jamais vu de layouts liquides véritablement réussis.

Ensuite parce que, les écrans d’une largeur supérieure à 19 pouces devenant particulièrement abordables dans notre monde de riches – on trouve un 22 pouces pour 400 euros, plus rien à voir avec les 1500 euros minimum de mon 19 pouces acheté il y a 4 ans et demi. Nombreux sont les écrans qui affichent maintenant des résolutions supérieures à 1280 pixels, et une ligne d’une largeur supérieure à 800 pixels est particulièrement pénible à lire, surtout sur la longueur.

Il existe toutefois une solution, qui est celle des layouts semi liquide qui s’adaptent à la taille de l’écran jusqu’à un certain point, en faisant un bon usage de min-width et de max-width, ou de solutions de contournement en Javascript quand ces deux propriétés ne sont pas supportées par le navigateur. Là encore, il s’agit d’une solution à moitié satisfaisante sur les supports de grande largeur : on se retrouve soit avec un très grand espace vide, soit avec des lignes trop longues.

Reste une solution : un layout fixe, mais plein écran.

Mon précédent thème avait pour vocation à mettre le contenu en valeur en débarrassant l’écran de toute source de pollution visuelle gênante – le menu latéral, souvent un nid à publicités – tout en cherchant à occuper l’espace sans pour autant forcer le lecteur à supporter des lignes trop longues.

En utilisant un en-tête coloré faisant toute la largeur de l’écran et offrant une navigation centrée de largeur fixe, on parvient à donner l’illusion du plein écran. Le contenu de la sidebar passe en bas de l’écran selon le même schéma. On parvient ainsi à donner l’illusion du plein écran tout en offrant aux éléments de la sidebar une largeur plus confortable qu’ils ne l’auraient eue sur le coté. L’affichage se fait de manière horizontale et non plus verticale, ce qui permet d’embrasser l’ensemble des éléments d’un seul coup d’oeil et donne une impression de “fourre tout” organisé qu’est bien souvent devenu le menu latéral aujourd’hui.

Ce dernier point prête d’ailleurs à une observation intéressante : en passant d’une disposition verticale à une disposition horizontale, le contenu de ce qui était autrefois un fourre tout dans le menu latéral prend une importance beaucoup plus importante, et on est tenté de le réduire aux informations pertinentes tout en l’ordonnant mieux.

Si j’avais parfaitement réussi à me débarrasser de la sidebar, tout en offrant un lien d’évitement bien placé, je n’avais pas résolu le problème de l’affichage du contenu livré à lui-même sur une seule colonne.

Un premier essai en 720 pixels de large laissait trop de place aux blancs latéraux sur les écrans en 1024*768 et supérieur. Un second essai en 920 pixels de large – pour adapter le contenu à la navigation et au contenu du bas – donnait des résultats catastrophiques en termes de lecture, même avec une police de caractère plus grosse que précédemment.

L’idée m’est venue en visitant Web Designs From Scratch l’autre soir, à la recherche d’une solution acceptable : remettre un menu latéral ne donnant accès qu’au contenu, et à lui-seul, c’est à dire aux différentes catégories du site, pour occuper une partie de l’espace (28% en fait), et utiliser une police de caractères confortable pour le reste du contenu.

Dans le même temps m’est revenu une réflexion que je m’étais faite il y a quelques temps quant à la disposition purement verticale des blogs : puisque je reconquérais l’espace horizontal, il me fallait aussi me réapproprier l’espace vertical. Par exemple en n’affichant plus la longue litanie des 10 derniers billets à l’écran, mais seulement le dernier, et le résumé des précédent dans l’espace du bas devenu source de contenu à part entière.

Et voilà, cela me donne un nouveau thème plus propre, plus lisible, certainement perfectible, et il sera perfectionné, mais la disposition et la mise en valeur des éléments sont là. Histoire de commencer 2007 du bon pied (d’ailleurs si il y a un gentil graphiste pour me donner un coup de main sur 2-3 trucs, je suis complètement preneur, mon sens artistique étant proche de zéro).

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: