Nouvelle version du blog

Les opérations de transformation sont terminées. La dernière en date était la migration en 2.7 de WordPress. A part quelques incidents avec Internet Explorer 6, tout s’est bien passé. Voilà donc un site flambant neuf, avec un nouveau thème, des plugins, et un moteur de blog à jour.

Préparation

L’opération la plus critique est finalement la migration des extensions incluant des widgets, car elles nécessitent plus de manipulations qu’un changement de thème, ou même que la migration du moteur. Il faut en effet

  • Mémoriser les éventuelles options des widgets,
  • Les supprimer de la sidebar,
  • Effectuer la mise à jour du plugin,
  • Ré-installer les widgets dans la sidebar,
  • Les reconfigurer si nécessaire,
  • Espérer de n’avoir rien oublié (styles, icones …).

Le changement de thème est plus sécurisé: en cas de panique, nous avons toujours la possibilité de revenir au thème initial. Ce retour en arrière est plus difficile en cas de migration de WordPress, mais le nombre d’opérations est moins important: désactivation des extensions, upload des fichiers de la nouvelle version, connexion à WordPress, puis réactivation des extensions.

J’avais préparer l’ensemble des opérations sur mon poste de développement, en effectuant une simulation complète de la migration. Je suis parti d’une sauvegarde du blog (en WP 2.6.5), et j’ai réalisé toutes les transformations prévues, en notant le mode opératoire de chaque étape. Pour la migration réelle, j’ai utilisé toujours les fichiers de ma plateforme de simulation. Cette méthode de travail permet de réduire les risques au minimum.

Le design

Le nouveau thème devait répondre à plusieurs préoccupations. Je souhaitais

  • Rompre avec les tons monotones du précédent thème,
  • Avoir plus de place au niveau de la sidebar.

Je ne suis pas graphiste, ni designer de métier. Je cherche malgré tout à créer mes propres thèmes, qui sont donc peu graphiques. Cela correspond également à la volonté de ne pas générer de pages trop lourdes.

Concernant la structure générale de la page

  • J’ai conservé la largeur de 950px pour deux raisons: cette dimension est de plus en plus répandue, et la très grande majorité de mes visiteurs travaillent avec des résolutions suffisantes,
  • Je suis passé à deux sidebars: d’abord, pour limiter la hauteur, ensuite pour avoir plus de place, pour d’autres widgets, ou de la publicité, par exemple,
  • Le rythme vertical est beaucoup mieux respecté, même s’il n’est pas encore parfait,
  • A ce propos, j’ai longuement hésité entre une police de 13px, hauteur de ligne 18px, et une police de 12px avec la même hauteur de ligne. J’ai fini par rester en 12px: je trouve que le rapport 12/18 crée un espacement qui facilite la lecture,
  • Le thème est plus stable que le précédent, vis-à-vis des différents navigateurs.

A ce propos, je ne suis pas spécialement un anti Microsoft primaire, mais leurs navigateurs sont vraiment @#!?. Que la version 6 pose problème, je conçois vu son grand âge, mais pour la version 7 …
Mes mésaventures portaient principalement sur le redimensionnement: en taille normale, les styles s’appliquaient parfaitement sur tous les navigateurs. Dès que j’essayais de zoomer ou réduire la page affichée, certains styles comme ceux des menus, devenaient « ératiques » dans Internet Explorer 7.

Dans le détail, de haut en bas:

Je me suis posé quelques questions concernant la barre d’accessibilité (Aller au contenu, …): on ne la trouve quasiment plus nulle part aujourd’hui … J’ai fini par la conserver.

Barre accessibilité
Barre accessibilité

J’ai transformé la liste des articles: mettre le logo sur le côté aère la présentation, même si cela fait perdre un peu de place. Cette présentation se retrouve dans l’affichage des commentaires.

Liste des articles
Liste des articles

L’affichage des articles ne change pas beaucoup: Le nombre de styles pris en compte est plus important. Je traite notamment les citations, acronymes et abréviations. J’ai longuement hésité sur les « cartouches » en début et fin d’articles (les métas). Les tags, commentaires, … sont souvent passés du haut vers le bas et réciproquement. Voilà à quoi vous avez échappé:

Informations sur les articles
Informations sur les articles

J’ai fini par faire des statistiques sur ce qui était affiché sur les blogs que je visite régulièrement. Le résultat est beaucoup moins lourd.

Je suis resté sur un pied de page simple, et court. Comme j’ai plus de place dans la sidebar, je n’ai pas suivi la mode du moment, en déplaçant les éléments de la sidebar, dans le pied de page. Hormis pour l’aspect référencement, je ne vois d’ailleurs pas trop l’intérêt d’avoir des pieds de pages, aussi haut que la page elle-même.

Le contenu

J’ai fait disparaître la rubrique CV qui ne se justifiait pas (un seul article). A la place, le bloc « A propos » est largement suffisant.

A propos
A propos

Sous le capot

J’ai conservé mon framework CSS hybride mélangeant la grille Yahoo YUI, et la typographie de BluePrint CSS.

Dans le précédent thème, j’avais adapté la feuille grid.css à une taille de police de 12px (au lieu de 13px). Cette fois-ci, je ne touche pas aux feuilles de styles des frameworks, et j’adapte simplement la feuille styles.css. De cette façon, je peux suivre les évolutions des frameworks sans devoir tout refaire à chaque mise à jour (et c’est beaucoup plus propre).

Côté plugin, quelques changements:

  • J’ai abandonné WP-ContactMe, qui alourdissait considérablement les pages (Javascript), au profit de Contact Form 7, plus léger et plus simple,
  • J’ai ajouté le WP PageNavi qui rend la navigation plus agréable,

Le reste des opérations concernent mes propres plugins, dont je vous parlerai lorsqu’ils seront publiés. Il faut pour cela que je prenne le temps de les « nettoyer », commenter, documenter …

Conclusion

Cette migration a bien démontré l’importance des tests préalables. La simulation complète des opérations à effectuer m’a permis de faire un plan détaillé des étapes à réaliser, et d’identifier précisément les problèmes potentiels.
Côté design, je confirme que l’utilisation d’un framework CSS permet un gain de temps énorme, pour des gens qui ne pratique pas le design et le CSS tous les jours. Une fois le design défini, la fabrication du thème ne m’a pris que quelques heures.

J’espère que ce nouveau thème vous rendra les visites plus agréables.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.