Nouveau thème: minimalisme et typographie

Depuis vendredi, vous aurez certainement remarqué le changement de thème du blog. Plus « minimaliste » ou « typographique », ce nouveau thème répond à trois préoccupations: revoir le design que je trouvais chargé, optimiser les performances, et rendre le blog lisible pour les mobiles.

Les deux premiers objectifs sont atteints. Concernant le troisième, ceux qui naviguent à partir d’un Smartphone, doivent constater une nette amélioration par rapport au thème précédent (qui était illisible), mais il y a encore de nombreuses coquilles, que je corrigerai dans les jours à venir.
Comme d’habitude, il s’agit d’une création « maison », parce que l’objet est autant d’avoir un nouveau thème, que de découvrir les techniques permettant son élaboration.
Voici donc un petit tour du propriétaire, et un retour d’expérience sur le développement.

Le fond / la navigation

Je me suis posé deux questions:

  • La première est liée au côté sémantique de HTML5: dois-je mettre en place une hiérarchie cohérente au niveau du blog, ou simplement maintenir cette cohérence au sein des pages?
  • La seconde est liée à la navigation: le blog traite de nombreux sujets, mais au fil du temps, certains d’entre eux se sont développés plus que d’autres, sans que l’utilisateur est un moyen d’y accéder plus rapidement que les sujets secondaires.

Concernant la hiérarchisation, dans les thèmes précédents, les titres étaient définis au niveau des pages: H1 pour le titre du blog, H2 pour le titre de la page, H3 et H4 pour les paragraphes. Pour une page Catégorie, par exemple, H2 était le titre de la catégorie, et H3 le titre des articles. Mais pour une page article, le titre de l’article utilisait la balise H2.

HTML5 insistant sur la sémantique du contenu, j’avais le choix entre garder le système précédent, ou construire une hiérarchie globale au blog: H1 pour le titre du blog, H2 pour le titre des catégories, et des tags, H3 pour le titre des articles, H4 et H5 pour les paragraphes des articles. Cela posait une difficulté: les titres des paragraphes sont codés dans le texte des articles (H3, H4, …).

J’ai finalement choisi la seconde solution, c’est-à-dire une hiérarchisation globale au blog, ce qui m’a obligé à modifier tous les articles du blog. L’opération n’a finalement pas été très lourde, puisqu’il a suffit de quelques commandes SQL (pour remplacer les balises H2 par H4, et H3 par H5).

Concernant la navigation: le blog repose principalement sur deux classifications: les catégories pour le thème (techno, photo, …), et les tags pour le sujet (technique photo, WordPress, …). Petit à petit, certains mots-clés se sont détachés, pour devenir de véritables sous-catégories. Malgré tout, dans le thème précédent, ces mots-clés n’étaient pas plus visibles que les autres. Pour la photo, par exemple, les mots-clés apparaissant le plus souvent étaient Galerie et Technique photo, qui étaient noyés dans le nuage de tags.

La solution choisie est de faire apparaître ces mots-clés dans le menu principal du blog. Dans le même temps, je les ai fait disparaître du nuage de tags. Le dispositif de navigation est complété par les séries, dont j’ai remonté le widget (précédemment dans le pied de page).

Vos avis m’intéressent sur cette nouvelle navigation.

La forme

Le nouveau design est entièrement HTML5 / CSS3,

  • Le point de départ est le fichier template de BoilerPlate,
  • La structure est plus ou moins conforme à ce que j’avais abordé dans l’article HTML 5: Structure d’une page,
  • J’ai dû revoir les shortcodes Gallery, et Caption pour obtenir un code HTML 5, avec notamment les balises figure, et figcaption,
  • J’ai également revu le format des commentaires.

Je reviendrai certainement sur ces sujets dans de futurs articles.

Concernant la compatibilité avec les navigateurs, j’ai fait le minimum vital: j’utilise le script html5.js qui crée les balises manquantes, mais je n’ai pas voulu utiliser de scripts comme Modernizr.js. Je me suis juste assuré que le site était regardable avec Internet Explorer 7 et Firefox 3. Habituellement, je suis plutôt pour un support large des navigateurs, même anciens, mais le but était de passer à HTML5, et ces navigateurs représentent moins de 2% de l’audience du site.

Pour les performances

  • J’ai essayé, autant que possible de réduire le nombre de balises, et de classes,
  • De réduire le nombre de feuilles de styles (actuellement 2, mais l’objectif est une seule),
  • D’utiliser les sprites,
  • D’enlever de l’entête la multitude de choses que WordPress y place par défaut,
  • De pousser quasiment tous les scripts Javascript en fin de page.

Il faudra encore attendre un peu pour savoir si les résultats sont significatifs, d’autant qu’il me reste encore à compresser la feuille de style.

Pour l’aspect « Responsive / adaptable »

  • La grille (qui n’en n’est pas une en fait), est fluide. Toutes les dimensions sont exprimées en %,
  • J’utilise les media-queries pour modifier l’aspect du site, en fonction des résolutions: globalement, je traite trois résolutions: 640px et au-delà, 480px max, et 320px max,

La grille fluide résout déjà un assez grand nombre de problèmes liés aux résolutions à traiter. D’une largeur initiale de 960px, le design s’adapte seul aux largeurs demandées. Les media-queries ne sont utiles que pour rendre les choses un peu plus lisibles.

Développement WordPress

  • Le développement du thème est tout à fait classique. Par rapport aux thèmes précédents, j’ai minimisé le contenu du fichier functions.php. Les différents codes pour Google Analytics, Google WMT, … ainsi que les personnalisations de l’interface d’administration, sont désormais dans un plugin, ce qui me permettra de changer de thème plus facilement dans l’avenir,
  • Les thèmes précédents personnalisaient un grand nombre de fonctions WordPress, pour les menus, et les commentaires notamment. Pour celui-ci, j’ai essayé d’être le plus standard possible, ce qui me rend un peu moins vulnérable aux changements de version,
  • J’ai développé le thème avec WordPress 3.3, ce qui me permettra une transition rapide lors de la publication de cette version.

Conclusion

Même s’il reste encore quelques corrections à apporter, ce nouveau thème est maintenant en place. J’espère qu’il vous rendra la lecture et la navigation plus agréables.
Personnellement son élaboration m’a fait progresser dans la connaissance de WordPress, et des techniques HTML/CSS, connaissances que je partagerai avec vous dans de prochains articles.

Laisser un commentaire

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