Surprise de la rentrée: un nouveau thème

Comme vous avez pu le constater, depuis lundi après-midi, le blog arbore un nouveau look. Voici un petit résumé des objectifs et des nouveautés de ce thème, qui marque la troisième version du blog.

Trois objectifs principaux:

  • Changer de look: le design des blogs évolue vite, et l’ancien thème commençait à devenir un peu vieillot, il atteignait l’âge vénérable de 1 ans et demi!
  • Optimiser les performances: comme vous le savez, une partie du classement d’un site dans Google, dépend maintenant de ces performances. Le précédent thème cumulait quelques petits défauts de ce point de vue,
  • S’aligner sur les standards WP 3.0: le précédent thème a été développé avec les versions 2.6/2.7 de WordPress. Depuis, les nouvelles versions du moteur de blog ont apporté des nouveautés que je n’avais pas intégré.

Le Look

Le nouveau thème corrige, normalement, certains défauts du thème précédent: La largeur de la page était prise à 40% par les deux sidebars, le contenu du pied de page ne servait pas à grand chose, le bandeau d’accessibilité non plus malheureusement. Le tout était finalement, assez dense, et cloisonné par des cadres, et des lignes.

L’inspiration initiale est venue du site Corrupted file repair. Ne me demandez pas pourquoi ce site m’a décidé à développer le thème.

N’étant pas graphiste, je reste, autant que possible, sur quelque chose de visuellement simple, et dépouillé. Les autres sources d’inspiration viennent de:

Les principes généraux utilisés:

  • Une largeur de 960px,
  • Une seule sidebar, de largeur raisonnable, pour laisser plus de place aux articles,
  • Un pied de page plus utile, à 3 ou 4 colonnes,

Le thème sera peut-être amené à évoluer dans les semaines à venir. Je me pose, en effet, des questions sur l’entête et le pied de page: trop sombres? trop hauts ?

Optimisation des performances

Le thème (et les plugins) précédents cumulaient plusieurs défauts:

  • Les styles étaient répartis dans plusieurs feuilles de styles (une page classique devait charger jusqu’à 5 fichiers CSS,
  • Je n’ai pas choisi de plugins utilisant la même librairie Javascript (J’avais JQuery, Mootools, …), et tous les scripts étaient chargés systématiquement,
  • Ni les feuilles de styles, ni les scripts n’étaient compressés.

Le nouveau thème corrige, autant que possible ces problèmes:

  • Au plus 2 ou 3 fichiers CSS sont chargés, et ils ont été compressés,
  • Les plugins n’utilisent plus que JQuery. Les scripts ne sont chargés que dans les pages ou ils sont utilisés, et ils se situent pratiquement tous en fin de page.

Pour la visualisation des photos, j’utilisais précédemment Slimbox, basée sur Mootools. Comme d’autres plugins sont basés sur JQuery (Contact Form et Sexy Bookmark), je devais changer de librairie. J’ai choisi Shadowbox, pour trois raisons principales: elle est relativement légères (même si elle demande JQuery), elle est facile à utiliser, elle redimensionne les images en fonction de la taille disponible.

L’autre point d’amélioration des performances, est l’utilisation de sprites: les multiples images (icônes) de 16×16 pixels utilisées un peu partout dans les pages, sont chargées en une seule fois, dans une seule et unique image. L’intérêt principal est que nous n’effectuons qu’une seule requête HTTP quelque soit le nombre d’images à afficher. Pour plus de détails, vous pouvez consulter Les sprites sur Pompage.net, ou en plus accessible, Les sprites CSS, et Utiliser les sprites!

J’attends quelques jours, pour voir ce que vont donné ces modifications, d’un point de vue performance.

Sous le capot

D’un point de vue HTML / CSS, compte-tenu du temps disponible, je suis resté sur du classique (pas de CSS 3). Contrairement au thème précédent, je ne me suis pas appuyé sur un framework, et j’ai essayé d’obtenir la structure la plus simple possible.

Depuis la version 2.6, WordPress a beaucoup progressé, et chaque version a apporté un certain nombre d’outils destinés à aider les développeurs de thèmes. Ce nouveau thème utilise donc

  • Les fonctions de type body_class, post_class,
  • Les commentaires imbriqués,
  • Les thumbnails,
  • Les menus apparus dans la version 3.0,
  • Les zones dynamiques multiples.

La construction des pages index.php, single.php et comments.php s’est inspirée des thèmes Default et Twenty Ten de WordPress.

La sidebar, et les deux colonnes de gauche du pied de page, sont entièrement dynamiques, et gérées par Widget.

La notion de menu, apparue avec la version 3.0 est particulièrement pratique. Elle permet, en effet, de créer des structures plus ou moins indépendantes du contenu. Concrètement, le menu de l’entête peut maintenant être autre chose qu’une liste de catégories, ou de pages. Le terme menu est d’ailleurs restrictif, puisque l’outil peut être utilisé dans de multiples cas: le premier bandeau de liens pourrait être un menu.

Conclusion

Le changement de thème répond à deux préoccupations principales: l’esthétique, et les performances.

Le principe de simplicité suivi dans sa conception, rendra les modifications/évolutions plus aisées, notamment au niveau des couleurs.

J’espère que cette nouvelle évolution vous plaira, et améliorera votre confort visuel.

2 thoughts on “Surprise de la rentrée: un nouveau thème”

  1. Personnellement j’aime bien ; sobre et efficace. (Regarde juste un petit pb dans ton css pour le formulaire de commentaire, les labels sont en justify (ligne 94) du coup « adresse de contact » et « site web » s’étalent (je suis sur FF 3.6) et c’est pas beau!)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *