Archive du 15-07-2009

Mise en page fluide

15-07-2009 par Horacio Gonzalez
LiB dessine

Le nouveau thème

Hier soir j’ai mis en ligne la nouvelle mise en page du blog. A la place de modifier le thème, j’ai préféré tout reprendre de zéro, ce qui m’a permit de simplifier pas mal la feuille de style et d’optimiser le HTML généré.

L’objectif était faire un thème presque identique au précédant, mais avec une mise en place fluide, i.e. une mise en page qui s’adapte à la largeur de l’écran. La barre latérale continue à être d’une largeur fixe de 250 pixels, mais la colonne principale devient d’une largeur variable, pour une larguer totale de l’ensemble fixée à 80% de l’écran (avec un minimum de 780 pixels).

J’ai testé la nouvelle mise en page sur Firefox, Opera, Konqueror et même IE6, et cela marche très bien. Sur Mac, il semble avoir certains problèmes avec les couleurs, mais je n’ai pas encore réussi à trouver la cause.

Si vous trouvez des erreurs ou des trucs bizarres, n’hésitez pas à me les faire parvenir par mail ou dans les commentaires.

L’histoire

Lorsque j’ai démarré le blog il y a trois ans, une des premières chose que j’avais fait a été de personnaliser le thème. Ne voulant pas trop me prendre la tête, j’étais parti sur un thème de base de Dotclear et je l’avais bricolé jusqu’à obtenir quelque chose qui me plaisait.

Depuis j’avais gardé ce thème là, en le modifiant à fur et à mesure, jusqu’à mon passage à WordPress l’année dernière. A ce moment là, j’ai répété la même stratégie, je suis parti d’un des thèmes de base et je l’ai modifié pour l’adapter à ce dont j’avais besoin.

Les deux thèmes (celui pour Dotclear et celui pour WordPress) étaient visuellement presque identiques, basés tous les deux sur une même mise en page : largeur fixe de 780 pixels avec deux colonnes, une colonne principale de 525 pixels et une barre latérale de 250 pixels.

Ce thème se voyait très bien depuis l’écran 1024×780 du portable que j’utilisais à l’époque, et ça marchait même sur mon petit Eepc 701 :

LiB sur écran 800x480

Par contre, sur l’écran de mon portable actuel, à 1280×720, la mise en page commençait à laisser pas mal d’espace libre sur les côtés.

LiB sur écran 1280x720

Et lorsque j’ai commencé à travailler sur un beau écran à 1680×945, je me suis rendu compte que l’espace en blanc sur le côté était ridicule, plus du 50% de la largeur de l’écran était inutilisé :

LiB sur écran 1680x945

La semaine dernière, profitant d’une rare soirée calme, je me suis dit que c’était le bon moment pour refaire la mise en page. Et quitte à la faire, autant reprendre le thème de zéro.