typographie
bd couleur css firefox Flash google gratuit ie6 interface iphone javascript jeu jeux vidéo musique navigateur new york photo photoshop vidéo wordpress

Si vous suivez ce blog depuis quelques temps, vous aurez remarqué que j’aime changer de thème WordPress assez fréquemment. Non seulement, je m’ennuie en général assez vite d’un nouveau design mais le thème en lui-même n’est pas bien construit. D’un côté, j’aime varier l’aspect purement graphique de mon site et je construis par conséquent le thème derrière. Mais ce dernier est rarement optimisé. Par exemple, le dernier contenait uniquement un fichier index.php (mis à part les fichiers d’inclusion du type header,footer, comments…). Vous aviez donc la même page selon que vous naviguiez sur la page d’accueil, la page d’un post ou la page des archives. Une grossière erreur d’ergonomie.

Les précédents thèmes

• bbxcloud
  Mon tout premier thème. Du bleu, du vert, du blanc, et des nuages. Il me fallait apprendre à créer un thème WordPress et à créer une structure de blog. Elle s’avérait au final très bancale.
  
• bbxland
  Trois colonnes, et un paysage en guise de header. Ajout d’une 3ème couleur (l’orange) et de plusieurs plugins. Et déjà aucune différenciation entre page d’accueil, page de post, page d’archives…
  
• bbxrevision
  Il tient son nom du site où j’avais vu ce type « d’étiquettes » sur le côté. J’ai gardé le système à 3 colonnes en allégeant relativement celle de gauche. Toujours pas de différenciation (home,post,archives…)
  

Le nouveau thème : bbxhudson

Mon objectif était avant tout de réaliser un thème long terme, que je ne modifierais pas dans quelques mois. Il fallait donc qu’il soit déjà très fonctionnel.

Différenciation

Chaque type de page a sa structure personnelle :

• la page d’accueil est en 2 colonnes (avec à droite les infos générales du blog)
• arrivé sur la page d’un seul post, cette colonne de droite obtient les infos du post ainsi que les commentaires, pour gagner en hauteur
• les pages d’archives (en parcourant une catégorie) ont un titre, une description de la catégorie ainsi qu’une liste des posts sous forme de mosaïque
• la page bdbx, pour son contenu particulier, utilisera une mosaïque d’images
• la page de tags est identique à celle des archives, avec pour différence la présence d’un nuage de tags en haut, pour faciliter la navigation
• une page 404 fait son apparition, en espérant que vous n’ayez pas à tomber dessus

Design élastique en css

Le plus grand challenge a été de réaliser ce thème avec un design élastique. Il n’est pas fixe (largeur définie en pixels), ni fluide (largeurqui s’adapte à la taille de la fenêtre). Il est élastique : la largeur des blocs dépend de la taille du texte, car définie en em. Il est rare de voir ce genre de design parce qu’il est plus compliqué à mettre en place que les autres. Parmi les sites qui l’utilisent, il faut citer l’excellent SimpleBits, le très typographique site de Jon Tan ou bien l’incontournable blog de Fred Cavazza.

A quoi ça sert ?

En modifiant la taille du texte (Ctrl+molette vers le haut ou le bas), les blocs s’adaptent à la taille du texte. Ca permet à ceux qui veulent agrandir le texte de le faire tout en gardant une structure correcte. On a l’impression que c’est un véritable zoom, mais il n’en est rien. Cette méthode marche même sous Internet Explorer.

J’aurais pu refaire un design fixe, comme d’habitude. Mais j’ai profité ce nouveau thème pour apprendre à utiliser les em. Je l’ai fait en lisant (et relisant) cet excellent post : The Incredible Em & Elastic Layouts with CSS.

Vertical Rhythm

En supplément de l’utilisation des em pour la typographie et pour la largeur des blocs, je me suis intéressé à adopter une structure verticale, que l’on appelle en anglais vertical motion (ou vertical rhythm).

Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

Que ce soit les titres, les paragraphes, les listes, les citations… tous ces éléments ont une hauteur multiple de 24. Cela se voit surtout sur la page d’un seul post, où il y a 2 colonnes.

Il y a donc pas mal de changements dans ce dernier thème. J’en ai profité pour mettre à jour mon tutoriel de menu 100% css et je compte prochainement rajouter un theme switcher, ainsi qu’un footer (à l’occasion ).