Ergonomie, Rails et Architecture de l'information web (2.0)

À la fin de l’année dernière, j’ai commencé à m’intéresser au positionnement de ce site sur les moteurs de recherche. J’ai alors contacté Sébastien Billard qui tient l’excellent blog Référencement, Design et Compagnie afin qu’il me fasse profiter de ses lumières. Suite à ses réponses, j’ai commencé une refonte structurelle – et ergonomique – qui a amené à la version actuelle. Un mois plus tard, retour sur les améliorations effectuées et sur les résultats obtenus.

Conseils Structurels

• Remplir le champ <title> à l’aide du titre du billet suivie de la mention “Frédéric de Villamil.com”. Cela permet aux outils de référencement de bien distinguer les pages les unes des autres.
• Dans la structure du code, mettre le contenu de chaque billet avant la navigation, de telle sorte qu’il se retrouve à la première place. Là aussi, il s’agit d’éviter que les moteurs de recherche ne considèrent les contenus comme semblables d’une page à l’autre. Techniquement, cela se fait en jouant sur la position des éléments : le contenu, placé avant dans le code, est placé dans un float: right;, tandis qu’on laisse la navigation dans le flot de la page.
• Supprimer le lien sur le titre du billet en mode lecture puisqu’il pointe de toute manière vers la page en cours. Cela rajoute en plus un bon point pour l’accessibilité.
• Mettre le message “Répondre à ce billet” dans une balise <h3> et non une balise <h2>, cette dernière étant déjà utilisée par le titre du billet, hiérarchiquement supérieur au formulaire de réponse dans la structure de la page.

Conseils éditoriaux

• Ajouter une tagline reprenant les principaux mots clé du site. Sébastien m’avait suggéré “Ergonomie, web design, métiers du web : le blog de Frédéric de Villamil”, mais ma préférence est finalement allée à “Webdesign, Ergonomie et Métiers du Web (2.0)”. Côté sémantique structurelle, le titre du blog se trouve dans une balise <h1> et l’accroche juste en dessous dans une balise <h2>.
• Supprimer le paragraphe de présentation placé en haut de chaque page. Relativement long, celui-ci leurrait les outils de recherche en leur faisant croire que toutes les pages étaient semblables. Le résultat était catastrophique, puisque Google ne recensait que 4 pages différentes, et plus de 1500 doublons. Le paragraphe de présentation a finalement rejoint la navigation, en bas de page.
• Faire figurer les catégories sur l’ensemble des pages, et particulièrement sur celles des billets. Seul problème, je ne voulais plus de sidebar sur ce blog. J’ai finalement décidé de déroger en ce qui concerne les catégories, pour des raisons purement ergonomiques : ce système permet au lecteur d’embrasser le contenu du dernier billet et les thématiques du site d’un seul coup d’oeil, sans retomber dans la pollution visuelle entraînée par une sidebar “fourre tout”.
• Soumettre le site à des annuaires afin de varier la provenance de mes liens entrants, principalement des blogs à ce jour.

Les résultats

Mot clé	14/12/2006	23/12/2006	13/01/2007
Pages	8 + 1200 doublons	1700	1930
Frederic	168	16	10
Frédéric	174	10	8
Webdesign	875	851	152
Ergonomie	763	804	144
Métiers du Web	979	143	36

Source : google.com, les chiffres de google.fr peuvent être différentes.

Je referai le point sur ces mots clé dans 6 mois, afin de constater les évolutions à venir, en faisant une vérification sur ces mots clé chaque premier du mois, et en les comparant à mes statistiques en entrée. Je remercie Sébastien pour ces conseils qui ne m’ont absolument rien coûté, puisque la bière promise n’a pas encore été commandée. J’espère que vous pourrez à votre tour en profiter pour accroître la visibilité de votre site.

Après la dernière refonte de ce site, j’ai reçu un mail passablement remonté d’une personne m’annonçant que, puisque je l’avais rayée de ma blogoliste, elle allait faire de même avec moi. Cette personne s’imaginait probablement que la réciprocité du lien entrant était un principe sacro-saint du web, ou tout au moins de la blogosphère. Sa missive a au moins eu le mérite de m’offrir une cure de jouvence à peu de frais en me ramenant une dizaine d’années en arrière.

Il ne s’agissait pas de sanctionner cette personne , que ce soit à titre personnel ou pour la baisse de qualité de son contenu. Le fait est que j’avais tout simplement supprimé ma blogoliste.

Pourquoi ?

Il y a 4 ans, lorsque les blogs étaient peu répandus, surtout en France, afficher sa blogoliste était un acte d’affirmation sociale : cela signifiait “je suis un blogueur, et voilà ceux que je reconnais comme mes pairs”. L’utilisation des agrégateurs RSS était loin d’être généralisée, et posséder une blogoliste était un moyen d’envoyer les visiteurs vers des blogs que l’on considérait de qualité.

Sauf qu’aujourd’hui, les choses ont changé.

“Socialement”, les blogs sont devenus une denrée courante sur le web, et on ne peut plus vraiment parler de niche. S’afficher blogueur ne représente plus un acte d’affirmation de soi.

Mais c’est surtout techniquement que les choses ont changé.

L’utilisation du flux RSS comme principale manière de consulter ses sites favoris a rendu relativement caduque l’envoi sur les sites “amis”, puisque la page d’index n’est plus la page d’accès privilégiée à un blog. Le temps de navigation gagné permet de lire beaucoup plus de sites, beaucoup plus simplement, en filtrant les billets à partir de leur titre. La généralisation des liens permanents de type /articles/titre-de-l-article en lieu et place de /index.php?id=4242 assure une véritable identité aux contenus publiés.

Mais surtout, avec la croissance exponentielle du nombre de blogs, le ratio contenu intéressant / contenu à faible intérêt pour un site donné est devenu très faible, bien que certaines personnes soient plus régulières que d’autres, dans la médiocrité aussi d’ailleurs. Ceci ajouté à la généralisation croissante des gestionnaires de favoris en ligne fait qu’il vaut mieux aujourd’hui lier des billets ou des contenus précis que des sites.

Pourquoi cela ?

• Vous envoyez directement le lecteur vers des contenus pertinents, et réduisez ainsi le rapport signal / bruit.
• Vous aidez les personnes que vous liez à équilibrer la cible de leurs liens entrants. En termes de référencement, cela permet à leurs billets pertinents d’être mieux placés (merci Sébastien Billard).
• Vous sortez de cette habitude idiote héritée des pages perso des années 90 “tu me link, je te link”.
• Vous réduisez la taille de votre sidebar, donc la pollution visuelle qui pourrait détourner le lecteur de votre contenu.

Oui mais si je veux partager ma liste de lectures à mes lecteurs ? Eh bien pourquoi ne pas être 2.0 jusqu’au bout et ne pas leur mettre à disposition tout ou partie de votre fichier OPML ?

Les liens hypertextes sont au coeur du web. Sans eux, rien n’existerait, et nous avons pourtant tendance à les négliger. Bien employés, ils ajoutent de la valeur aux contenus publiés ; bâclés, ils peuvent aller jusqu’à leur retirer tout intérêt. Raison de plus pour s’y intéresser et en prendre grand soin.

Combien de fois êtes vous passés à côté de documents passionnants pour cause de liens invisibles, introuvables, incompréhensibles, illisibles ou inaccessibles par bête négligence ? Ce genre de choses ne doit plus arriver, et ce billet se propose justement de vous aider à les éviter en passant en revue les erreurs les plus fréquemment rencontrées et les optimisations trop souvent méconnues. Parce qu’il n’y a que sous UNIX que les liens sont symboliques.

Anatomie d’un lien hypertexte

Selon la définition du W3C :

Un lien est une balise à deux bouts – les ancres – et une direction. Le lien va de l’ancre “source”, et pointe vers l’ancre “destination”. Celle-ci peut être n’importe quel ressource sur le web (une image, une vidéo, un fichier musical, un document HTML, un élément embarqué dans un document HTML, etc…)

Nous nous intéressons aujourd’hui au lien hypertexte visible matérialisé par la balise <a> ... </a>. Il existe aussi le lien <link /> qui fera l’objet d’un autre billet.

<a href="http://t37.net">Frédéric de Villamil</a>

L’ancre “source” possède nombre d’attributs. Certains d’entre eux sont sous utilisés, voire franchement ignorés quand leur emploi à bon escient ajouterait pourtant une valeur certaine à vos liens.

hreflang :

L’attribut hreflang vous permet de spécifier la langue du document destination. Il s’utilise à l’aide du code langue à deux lettres :

<a href="http://t37.net" hreflang="fr">
    Frédéric de Villamil
</a>

Sous les navigateurs modernes, un peu de CSS permet d’afficher cette information juste à coté du lien :

a[hreflang]:after {
   content: "\0000a0[" attr(hreflang) "]";
   color:#999;
}

On peut aussi choisir d’afficher une icône en fonction du code langue :

a[hreflang=fr] {
    padding-left: 20px;
    background: url("fr.png") left no-repeat;
}

Ceci affichera un petit drapeau français à gauche de vos liens.

Bien que ceci ne soit pas supporté par Internet Explorer, il serait dommage de priver les 20% de vos visiteurs munis de navigateurs modernes non ?

type :

Souvent ignoré, l’attribut type vous permet d’indiquer le type mime du document destination.

<a href="http://t37.net/cv.pdf" type="application/pdf">
    Télécharger mon CV
</a>

Comme précédemment, un peu de CSS permettra aux utilisateurs de navigateurs modernes d’afficher une petite icône à côté du lien pour un document destination au format PDF :

a[type=application/pdf] {
    padding-left: 20px;
    background: url("pdf.png") left no-repeat;
}

Évidemment, ceci reste valable pour n’importe quel type mime.

Les attributs ne s’excluant pas l’un l’autre, on pourra proposer :

<a href="http://t37.net/cv.pdf" type="application/pdf" hreflang="fr">
    Télécharger mon CV
</a>

En utilisant les deux bouts de CSS proposés ci dessus, le visiteur verra donc au premier coup d’oeil que le lien pointe vers un PDF rédigé en français.

title :

L’attribut title donne le titre exact de la destination, en plus de l’image ou du texte placés entre la balise ouvrante et la balise fermante.

<a href="http://t37.net/cv.pdf" title="Curriculum Vitae de Frédéric de Villamil">
    Télécharger mon CV
</a>

Le navigateur affiche généralement la valeur de l’attribut title au passage de la souris sur le lien. Un peu de javascript permet même d’afficher celui-ci dans une élégante info bulle.

title permet de spécifier le titre d’une oeuvre ou d’un document d’une manière plus formelle et complète qui n’aurait pas forcément eu sa place dans le flot du texte. Les moteurs de recherche prennent aussi ces informations supplémentaires en compte, ce qui peut s’avérer utile.

rel :

Souvent mal utilisé, rel décrit la relation existant entre le document courant et celui indiqué dans l’attribut href. On trouve de nombreux exemples d’utilisation de rel dans les Microformats, comme le le microformat rel="tag", mais aussi dans les liens de type <link />

<a href="http://t37.net/articles/tag/microformats" rel="tag">
    Microformats
</a>

Comme précédemment, vous pouvez signaler la présence d’un tag – par exemple – à l’aide d’un peu de CSS. Et comme précédemment, cela ne fonctionnera que sur les navigateurs modernes.

a[rel=tag] {
    padding-left: 20px;
    background: url("tag.png") left no-repeat;
}

rev :

À l’inverse de l’attribut rel, l’attribut rev décrit la relation entre le document pointé par l’attribut href et le document courant. L’attribut rev est notamment utilisé dans les Microformats, particulièrement dans les vote-links.

<a href="http://t37.net" rev="vote-for">
    Frédéric de Villamil
</a>

Vous pouvez maintenant utiliser un peu de CSS afin d’afficher de petites icônes à côté du lien afin de permettre à vos visiteurs utilisant un navigateur moderne – et non pas forcément récent – de connaître votre opinion à propos du lien cible :

a[rev=vote-for] {
    padding-left: 20px;
    background: url("for.png") left no-repeat;
}

a[rev=vote-against] {
    padding-left: 20px;
    background: url("against.png") left no-repeat;
}

tabindex :

tabindex nous fait quitter le domaine de l’information sur la destination des liens pour entrer dans le cadre de l’ergonomie et de l’utilisabilité. tabindex sert à indiquer dans quel ordre les liens – ou les champs d’un formulaire – doivent être parcourus lorsque le visiteur navigue à l’aide de la touche tab de son clavier.

accesskey

Là aussi, on rentre dans l’ergonomie et l’accessibilité, puisque accesskey permet de définir une touche permettant d’accéder directement au lien – ou au champ d’un formulaire – à l’aide d’une seule touche.

Un peu de clarté ne nuit pas

Donner une ribambelle de liens tout juste séparés d’un espace dans une même phrase ne sert pas à grand chose. Non seulement le visiteur aura du mal à définir où commence et où finit un lien, mais il ne saura très probablement pas de quoi ces liens vont parler. Si ce genre d’énumérations est particulièrement fréquente sur les blogs, elle est évidemment à proscrire.

Pour des raisons d’accessibilité, chaque lien doit être séparé du suivant par un caractère imprimable qui ne soit pas un lien, comme le stipulent les WAI Guidelines du W3C.

Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. [Priority 3]

Une avalanche de liens n’apporte souvent pas grand chose à un billet. Si pour une raison ou une autre vous souhaitez cependant indiquer un grand nombre de liens concernant un même sujet, vous pouvez le faire de manière bien plus pratique ou élégante. Pourquoi ne pas ajouter à la fin de votre article une annexe présentant un lien et sa description par ligne ? S’ils sont si pertinents, ils méritent cet espace dédié. Et s’ils ne le méritent pas, c’est probablement qu’il vous faut remettre leur présence en cause.

Tant qu’on en est à parler de ce qui se trouve entre l’ancre “source” et l’ancre “destination”, réfléchissez bien à ce que vous y mettez. C’est en effet de votre choix que naîtra chez votre visiteur l’envie de cliquer ou de ne pas cliquer. S’il s’agit d’une image ou d’un bouton, n’hésitez pas à abuser des attributs alt et title. Au sein d’un paragraphe, soyez clairs, précis et concis. Non seulement vous influencerez vos visiteurs dans leurs choix, mais en plus vous aiderez les moteurs de recherche. Que demander de plus ?

Mettez vos liens en valeur

Pour être visités, vos liens doivent avant tout être vus par vos visiteurs, et ce au premier coup d’oeil. Pour cela, un peu de CSS peut faire beaucoup.

Un peu de typographie

Commencez par leur choisir une couleur qui tranche avec celle du texte et du fond. J’ai choisi un texte noir sur fond blanc pour la lisibilité, et je mets mes liens en rouge pour les faire ressortir. Laissez vos liens soulignés. Il s’agit du comportement par défaut de tous les navigateurs, et l’oeil du visiteur cherche instinctivement des éléments soulignés pour cliquer dessus. En revanche, ne soulignez que les liens – une bordure sous un titre n’est pas un soulignement. Si vous devez donner le titre d’une oeuvre et souhaitez la souligner, profitez-en tant qu’à faire pour donner un lien vers sa page officielle ou Wikipedia, ça ne coûte rien et ça donnera peut-être envie au visiteur d’aller plus loin.

Utilisons les comportements

La balise a dispose de deux pseudo classes bien pratiques, supportées par tous les navigateurs et combinables entre elles : hover et visited.

hover permet de définir un comportement lorsque la souris survole le lien. visited permet de définir le comportement lorsque le lien a déjà été visité.

Je ne sais pas s’il existe une règle définie pour cela, mais j’ai tendance à toujours utiliser les mêmes comportements.

• a : couleur vive tranchant à la fois avec le texte et le fond, souligné.
• a:hover : même couleur que précédemment, sans soulignement. La transition souligné / non souligné au survol de la souris permet d’attirer l’oeil sur le fait qu’il s’agisse d’une zone active de la page.
• a:visited : couleur dans les mêmes tons qu’un lien non visité, mais plus foncé, souligné. J’avais coutume d’utiliser l’attribut text-decoration: line-through; pour indiquer que ce lien n’était plus à visiter – je le supprimais tout de même au au survol de la souris – mais je me suis rendu compte que cela grêvait trop la lisibilité du document.
• a:visited:hover : même couleur plus foncée que précédemment, mais avec le soulignement en moins.

Je tiens à préciser que j’utilise ces règles dans le corps de texte d’une page, et non dans le menu dans lequel je supprime généralement le soulignement. En effet, cette partie d’une page me semble suffisamment parlante d’elle même et est généralement assez lourde – surtout sur un blog – pour ne pas tout souligner systématiquement. Peut-être est-ce une erreur ? Je n’ai cependant pas trouvé assez d’arguments qui me poussent vraiment à changer pour l’instant.

Attendez vous à voir pas mal de modifications de ce billet dans les prochains jours. Je suis complètement crevé, il doit donc être bourré de fautes de français, et probablement incomplet par rapport à ce que j’avais initialement prévu de faire.

Je ne parle que très rarement des produits découverts via la publicité non désirée (sic), mais ce que je viens de recevoir dans ma boite mail valait bien un billet :

Bonjour
Blogooz.com est un annuaire referencant les blogs. Il a ete tout recemment crée et est en plein expansion. Venez vous aussi ajouter votre blog su http://www.blogooz.com
C’est entierement gratuit, cela necessite juste une inscription.
Cordialement.

En marge de ma présentation des Microformats samedi au BarCamp Paris, j’exposais les raisons qui me faisaient voir la recherche par tag comme un complément indissociable de la recherche sur le contenu.

Il semble que pour certains, le pagerank Google représente encore le Saint Graal du Web. J’en veux pour preuve ce mail reçu cette nuit :