Comment chicquifier son blog

Brian — Tue, 04 Dec 2007 09:12:00 +0100

Avoir un blog CHIC, ce n'est pas afficher des widgets dans tous les recoins ou du flash (beuark). Pour rendre son blog CHIC, il ne faut pas s'inscrire à une communauté de blogueurs mégalo ou être de tous les pince-fesses VIP.
Chicquifiez votre blog, c'est le web qui vous remerciera!

Crédit photo: infelix

Le CHIC et le POSH en quelques mots

Derrière ces mots étranges et détournés de leur usage, on retrouve en fait des acronymes lancés par les amis des standards du web. Vous me direz, "encore une arnaque à coup de mots accrocheurs", tout ça pour cacher un concept super compliqué. Pas vraiment.

POSH est un raccourci sympathique pour Plain Old Semantic HTML; c'est une manière d'utiliser HTML pour son but originel, c'est à dire publier des informations sur le net. Pas de présentation, pas de code compliqué, le document doit refléter exactement son contenu sémantique. La déclinaison francophone est bien sûr CHIC, pour Code HTML Intrinsèquement Classe. Pour le reste, le wiki de microformats ecpliquera bien mieux la genèse de ces mots.

La cause soutenue n'est pas très sexy au premier abord, mais si deux acronymes sympas peuvent la rendre plus populaire, pourquoi pas?

Le CHIC par l'exemple

En exemple, les commentaires d'un billet sur un blog.
La solution d'un blog pas très CHIC, qui consiste à imbriquer blocs et paragraphes (p), des retours à la ligne sans raison (br) et pire, des tags de présentation (b, pour bold).
<div class="green"> <p class="superbig">Les commentaires</p> <p><span class="big">Commentaire de <b>RollsRox</b></span> hier soir.</p> <br/><br/> <p class="white border">Voici mon commentaire</p> </div>

Version bien plus CHIC, on annonce le titre de la rubrique (avec h2), et on liste les commentaires des lecteurs comme des définitions (dl pour definition list, dt pour definition term, dd pour definition description).
Les noms de classes sont un peu plus clairs et même sans lire le contenu, on a une meilleure idée de ce qu'on présente ici.
<div id="commentaires"> <h2>Les commentaires</h2> <dl> <dt>Commentaire de <strong>RollsRox</strong> hier soir.</dt> <dd>Voici mon commentaire</dd> </dl> </div>

Pourquoi CHICquifier son blog?

Les avantages sont nombreux.
Utiliser de l'HTML sémantique, c'est mettre en valeur le contenu créé en le rendant plus accessible aux internautes et aux moteurs de recherche. Les robots d'indexation comprendront mieux le contenu du site, et l'intégreront mieux dans les moteurs de recherche. Encore plus important, c'est la première étape vers l'accessibilité du site au plus grand nombre (les déficients visuels ont aussi le droit de lire vos états d'âme sur le net!).

Pour mieux comprendre l'importance du CHIC, il faut s'imaginer suivre une présentation avec un orateur qui:

crie d'abord les numéro de diapos
chuchote ensuite les titres
répète le sommaire juste après
et finit par lire le contenu sur le même ton

C'est pourtant ce que font beaucoup de sites internet aujourd'hui.

Le CHIC accessible à tous?

Tout le monde n'a pas envie de créer son propre thème, valider les standards, résoudre les problèmes d'affichage sur les navigateurs... Pas la peine, d'autres l'ont déjà fait; il suffit de bien choisir son thème et de faire quelques tests:

vérifier qu'une page affichée avec ce thème valide les bien standards HTML
utiliser plusieurs navigateurs pour tester le rendu
désactiver les styles de la page (sous firefox, menu affichage -» style de la page -» aucun style); seules les images qui illustrent le contenu doivent rester, et le tout doit rester cohérent.
ou pour les plus courageux, utiliser Lynx ou des sites qui rendent le même service, pour vérifier l'ordre et le contenu sont cohérents dans la page

RollsRox est CHIC?