La première étape était de trouver un ou plusieurs modèle de navigation propice à un blog.

Un coup de chance, j'avais le livre de Patricia sous la main, et après avoir parcouru les 60 modèles de navigation, j'en ai retenu 3 :

  • le menu sur la droite
  • le big footer (le gros pied de page)
  • le menu horizontal

Il ne restait plus qu'a placer les différents éléments dedans.
Dans le menu de droite seraient présents (dans le désordre) :

  • la recherche
  • le lien vers le flux RSS
  • la liste des tags
  • les derniers billets
  • la liste des catégories

Dans le big footer :

  • le fameux "a propos"
  • les derniers commentaires
  • et pour se faire plaisir, une fois encore les derniers billets

Dans le menu horizontal :

  • Contact
  • CV
  • A propos

Et pour finir le tout, un petit colophon histoire de rappeler les mentions légales et quelques liens rapides d'échappements.

Deuxième étape : faire une maquette à partir des éléments définis plus haut.

J'admets, cette partie là, je l'ai délégué. Étant en collocation avec une graphiste web, je n'ai pas eu à chercher longtemps à qui j'allais confier cette tache... On en a profiter pour revoir l'ergonomie du blog, en créant des liens d'échappements là où il en fallait (comme un lien pour aller directement aux commentaires), retirer quelques éléments qui n'apportaient rien (le lien permalink).
Mettre des parties plus en évidences : comme l'abonnement au flux RSS, le "lire la suite..." sur la page d'accueil, les liens dans le corps du texte, etc...

preview du nouveau blog de jsmansart

Je voulais aussi garder l'esprit et la charte graphique de l'actuel. Le bandeau à été remanié, le titre du blog amélioré...

Troisième étape : optimiser le code HTML pour le référencement.

Dotclear est part défaut très bien conçut pour le référencement. Cependant, on peut noter quelques améliorations à apporter.

La balise <title> est le titre de la page.
Une balise <h1> définit le titre du document.
Une balise <h2> définit les sous titres

Lorsque l'on est sur la page d'accueil, le title doit donc être le nom du blog, la balise <h1> contiendra elle aussi le titre du blog et on placera les titres des billets dans des balises <h2>.

Par contre, lorsque l'on est sur un billet. Le title de la page devient donc le titre du billet. Celui-ci est aussi englobé dans une balise h1, mais quid du titre du blog ?

Certains disent qu'on peut le laisser en <h1>, d'autres au contraire affirment qu'il ne doit y avoir qu'une seule balise <h1> par page.
Si on part sur la seconde hypothèse, dans quelle balise met-on le titre ?
Une balise <h2> ?
Une balise <p> ?
Une balise <span> ?

Les mêmes questions se posent pour la navigation : les bloc ont des titres, on met quoi ? des <hx> ou une toute autre balise ?

Pour le coup, je suis un peu dépassé, et même tous les grands du HTML se battent sur ce genre de sujet...

Tout cela demande énormément de travail et de recherche, la maquette est terminée, il reste encore l'intégration à faire, les tests sous différents navigateurs et système d'exploitation, et pour finir : le polissage.

A votre avis : quelles balises utiliser pour le titre du blog et la navigation ?