Je lance à partir lundi prochain une série de screencasts sur les bonnes pratiques du web.

Chaque semaine, je sélectionnerai un site volontaire dont je ferai une critique globale en termes d’ergonomie, d’accessibilité, de respect des standards, et d’une manière plus générale des bonnes pratiques du développement web. Ma première “victime” sera le site de Carpe Vinum, le jeu de découverte de la dégustation qui a bien voulu se prêter au jeu.

Histoire de fêter la version 0.9 de son navigateur social dont j’avais déjà parlé ici, Flock a également remis son site à neuf, et le moins que l’on puisse dire, c’est que le résultat est tout simplement catastrophique.

Pour ceux qui ne le connaîtraient pas, Flock est un navigateur dérivé de Mozilla Firefox, et intégrant directement de nombreux services du web 2.0 : Flickr, Youtube, un outil de blog… Il est disponible sous Mac OS X, Linux et Windows, et compatible avec la très grande majorité des extensions Firefox. Il semble malheureusement que Flock, la société derrière cet excellent outil ait oublié quelques uns des éléments fondamentaux qui ont fait le succès de son prédécesseur : open source, standards du web et accessibilité.

• Une première page toute en Flash, sans qu’un contenu alternatif autre qu’un bête message marketing ne soit proposé. C’est bien dommage pour les technologies open source, mais surtout pour les personnes ne pouvant utiliser ce site (notamment les déficients visuels) : il s’agit tout simplement d’une présentation des principales fonctionnalités du navigateur.
• Une construction en tableaux, pas un poil de sémantique, on se croirait revenu en 2001.
• Des menus déroulants entièrement en javascript, bonjour l’accessibilité. Quand je désactive ce dernier, je n’ai accès qu’aux liens de premier niveau, ce qui signifie que le contenu du menu est ENTIÈREMENT en javascript. Il aurait été beaucoup plus simple, pratique et accessible de mettre les liens dans des listes en display: none, avec un peu de javascript pour les faire apparaître ou disparaître. D’ailleurs, ajouter un espace insécable entre les liens du menu n’aurait pas été du luxe, il est inutilisables sans les images de fond.
• Des balises pas ou mal fermées, invalides… au total pas moins de 42 (sic) erreurs de validation.
• Et même la hCard de la page de contact n’est pas valide…

On ne le répétera jamais assez, ceux qui croient que les standards sont aujourd’hui largement adoptés vivent dans un petit monde idéal loin des véritables réalités du web, même si de nombreux progrès ont été faits depuis 4 ans.

Il est de la responsabilité des éditeurs de navigateurs de promouvoir l’adoption massive des standards, de l’accessibilité, et, dans une certaine mesure, des technologies ouvertes, aussi bien dans leur produit que dans leur communication. Le leitmotiv de la Mobile Initiative du W3C “développer pour un web” devrait aussi pouvoir s’appliquer aux navigateurs traditionnels, et ces derniers devraient être les premiers à montrer l’exemple.

On se retrouve tous un jour ou l’autre confronté au problème de questions à réponses multiples et encore plus nombreuses, sans possibilités de filtrage préalable. Dans ce cas, la première solution qui vient à l’esprit est celle du menu déroulant à choix multiple, et elle peut sembler alléchante à plus d’un point de vue.

Grave erreur ! Il n’y a pas pire pour votre utilisateur que cette extension de notre bon vieux select, dont j’avais sérieusement remis la fiabilité en question il n’y a pas si longtemps que cela. Je me suis rendu compte à mes dépends que les menus déroulants à choix multiples étaient aux formulaires ce que le blink et les gifs animés étaient aux pages web des années 90 : une plaie.

On fait tous des conneries, et moi le premier. Confronté à des formulaires dans lesquels je rencontrais de nombreux champs à réponse multiple sans aucun contrôle de ma part sur leur nombre, j’ai mis du menu déroulant partout, persuadé de détenir la bonne méthode. Horreur, malheur, dirait la sorcière si elle était là, le truc s’avère épouvantable à utiliser.

• Un clic de souris à coté, et on perd toute sa sélection.
• La sélection de cases non adjacentes relève du défi olympique.
• Difficile à styler, on s’y perd facilement entre les réponses.

J’ai cherché un moment avant de trouver une solution satisfaisante vues les contraintes qui m’étaient imposées :

• Un nombre infini de réponses potentielles.
• Accessibilité totale, donc pas de javascript.
• Facilement personnalisable.

La solution

Pas besoin de chercher bien loin. Remonter à l’origine du problème et aux avantages apparents de la solution choisie devaient me permettre de prendre la bonne direction.
Dans un formulaire, la première chose à laquelle on pense quand il s’agit de réponses multiples, c’est “cases à cocher”. Malheureusement, celles-ci deviennent rapidement impossible à afficher au delà de quelques éléments. D’où l’utilisation du menu déroulant à choix multiple, dont l’ascenseur permet d’occuper un minimum de place, mais au détriment de l’utilisabilité.

Il me fallait donc combiner les avantages des cases à cocher et des menus déroulants à choix multiples, sans sacrifier à l’accessibilité :

• Espace à l’écran restreint.
• Réponses multiples.
• Nombre de réponses indéfini et potentiellement infini.

Pour cela, je commence par englober mes réponses dans une div dont je force la hauteur et à laquelle j’attribue la propriété CSS overflow-y : auto. Voilà pour la partie déroulante.

J’ajoute ensuite une série de label dans lesquels j’englobe ma case à cocher. Si je trouve ça sémantiquement moyen – le label désigne le champ de formulaire, ce dernier ne saurait donc y être inclus – c’est structurellement valide. J’applique ensuite à chacun de mes labels la propriété CSS display: block

Ce dernier point est très important. En effet, si l’id de la case à cocher et la propriété for= du label sont renseignées correctement, la sélection du champ quand je clique sur le label s’étend à toute la ligne. Pratique non ?

Il ne me reste qu’à mettre un peu de couleur une ligne sur deux pour bien différencier les réponses, et le tour est joué. Évidemment, le résultat présenté est tout sauf joli, mais je vous rappelle que mon sens artistique avoisine le zéro absolu.

Télécharger le code source de l’exemple.

Les standards du web expliqués à ma mère

Ma mère utilise un ordinateur sous Windows Millenium “le seul avec lequel je n’ai jamais eu de problèmes”, appelle une unité centrale un “moteur” car ça fait du bruit et c’est ce qui fait propulse la machine, et a depuis longtemps oublié sa propre adresse courriel peu peu qu’elle l’ait jamais connu. Le jour où elle m’a demandé de lui expliquer ce qu’étaient ces fameux standards du web dont je parlais si régulièrement et qui avaient l’air tellement importants, je savais que la partie était tout sauf gagnée.

– Ces standards du web, c’est quoi ?
– Eh bien, c’est un code de bonne conduite pour créer des sites web qui ont la même apparence sous tous les navigateurs du marché.
– Ah, parce qu’il y a plusieurs navigateurs ? Je ne connais qu’Internet Explorer.
– Oui, il y en a tout un tas : Firefox, Netscape, Flock, Opéra…
– Et ça sert à quoi d’en avoir autant, ce ne serait pas plus simple de n’en avoir qu’un seul ?
– Hmmm… peut-être, si. Au fait, pourquoi roulez-vous dans une Clio verte ?
– Eh bien parce que c’est une bonne voiture, et qu’elle me plaît bien.
– Ce ne serait pas plus simple que tout le monde roule en Golf diesel bleue ? Plus de problèmes de pièces détachées, un seul type d’essence à la pompe… le bonheur quoi.
– Et laisser à une entreprise allemande le monopole de l’automobile en France ?
– Ben voilà, vous avez compris.
– Quel est le navigateur le plus utilisé ?
– Internet Explorer, avec 90% de parts de marché (la conversation est assez ancienne, ndlr).
– Et Internet Explorer suit ce code de bonne conduite ?
– Non, pas vraiment. En fait il ne suit que ce qu’il veut.
– Alors pourquoi parler de “standards”, s’ils ne sont pas suivis pas 90% des utilisateurs ?
– C’est que les standards du web n’ont pas valeur normative.
– On ne peut donc pas parler de norme. Dans ce cas, à quoi servent-ils ?
– Vous connaissez les normes ISO ? La norme ISO9002 par exemple.
– Oui, prend ta vieille mère pour une imbécile, je ne te dirai rien.
– L’institut ISO part d’une implémentation pour définir une norme. Le W3C définit des codes de bonne conduite à priori pour que les navigateurs puissent s’y conformer dans le futur.
– Le W3C ?
– Oui, une organisation indépendante composée de grands noms de l’industrie informatique. Elle élabore les préconisations que l’on appelle les standards du web.
– Et qui les rédige ?
– Des groupes de travail. L’activité du W3C va bien au delà de l’unification du rendu des pages web.
– Et Microsoft en fait partie ?
– Oui.
– Donc, si j’ai bien compris, les standards du web sont directives à valeur non normatives créées par des sociétés qui ne les appliquent pas dans leur propre produit, produit qui se trouve de fait être le navigateur standard sur le web. C’est bien ça ?
– En quelque sorte, oui…
– Eh beh, nous voilà biens…

Note : cette conversation a été à peine déformée, dans un soucis de concision et de clarification.

Histoire de bien commencer le mois d’avril, une liste des prochains événements web auxquels vous pourrez me rencontrer pour échanger des points de vue ou des cartes de visite autour d’un verre, d’un déjeuner ou d’un dîner.

Dès demain, les Mobile Monday France consacreront leur thématique mensuelle au paiement par terminal mobile. J’avais déjà vu quelques exemples de ce qu’il était capable de faire lors du séminaire du W3C consacré à la mobilité, et le M-Paiement risque fort d’être le prochain eldorado financier à ne pas manquer. Cela se passe lundi 2 avril, de 18h45 à minuit chez chez BETC - Euro RSCG, 85-87 rue du Faubourg Saint Martin, 75010 Paris. L’entrée est gratuite mais l’inscription est obligatoire.

Ça, c’était mort vu mon programme de la semaine. Mais c’était certainement très bien.

Jeudi, les Designers Interactifs organisent leur troisième soirée à thème autour des futurs défis à relever par les designers. Celle-ci sera animée par Frédéric Cavazza et Anuhi Lou qui nous parleront de l’ergonomie visuelle du web de demain. Cela se passera jeudi 5 avril, de 19h30 à 22h00 chez Parsons, 14 rue Letellier, 75015 Paris. L’entrée est gratuite mais l’inscription est obligatoire.

Que vous ne supportiez plus de recevoir des mails en HTML illisibles et mal formatés, ou que vous peiniez à créer des mailings visuellement attirant et lisibles par n’importe quel client, l’atelier mail et HTML du W3C est fait pour vous. Les thèmes abordés tourneront autour de la sécurité, l’interopérabilité, et la publication de contenus HTML pour l’emailing. Cela se passera le 24 mai 2007 de 8h30 à 18h00 à l’ENST, 46, rue Barrault, 75013 Paris. Si vous souhaitez intervenir, un call for papers est ouvert jusqu’au 21 avril. L’entrée est gratuite, et l’inscription est facultative bien que fortement recommandée.

Paris Web c’est reparti ! La seconde édition de cette conférence à laquelle je n’avais malheureusement pas pu me rendre l’année dernière aura pour thématique Accessibilité, qualité et design : comment concilier ces trois approches dans une optique de production de sites web, avec les contraintes et les exigences liées à des processus « industriels » ?. Si vous souhaitez intervenir, vous pouvez soumettre vos propositions jusqu’au 27 avril prochain. L’événement se déroulera du 15 au 17 novembre 2007, lieu non précisé avec deux jours consacrés aux conférences et une journée d’ateliers. L’inscription est payante et obligatoire.

Certains jours, je regrette un peu que ne pas parler Hollandais me prive de la lecture de leur nouvelle loi sur l’accessibilité des sites web gouvernementaux. Je me contenterai donc de reprendre les principaux points de ce billet de Quircksmode qui en recense les principaux points :

• Uniquement du XHTML 1.0 ou du HTML 4.01 valide.
• HTML sémantique, CSS et séparation claire entre présentation et structure.
• Amélioration progressive (on commence par un truc qui marche partout, et ensuite on rajoute des trucs cliqua convi).
• Utilisation du DOM W3C en lieu et place du DOM Microsoft.
• Les class et id doivent avoir une signification appropriée.
• Les descriptions alternatives des images doivent toutes avoir du sens

Mais aussi :

• Les scripts appliqués à des liens doivent étendre leurs fonctionnalités (à quand des pop-ups accessibles ?)
• L’utilisation de scripts comme seule manière de récupérer une information est interdite.
• Supprimer le rectangle de focus des liens est interdit.
• Toute information offerte dans un format fermé doit aussi être proposée dans un format ouvert (j’en connais un à qui ça va faire plaisir).
• La loi définit la valeur sémantique de certains éléments HTML !!!

Ce qui serait intéressant, c’est de voir cette loi appliquée dans notre beau pays non plus pour les sites gouvernementaux, mais pour l’ensemble des sites d’entreprise, amendes à la clé puisqu’il semblerait que seule la répression fasse avancer les choses. Ces guides ne sont en effet pas particulièrement contraignantes, et auraient au moins pour mérite d’harmoniser un peu le web français. Je crois cependant que je vais m’en inspirer pour la ligne de conduite technique de l’ensemble des projet que je vais conduire chez Actualys, tant cela me semble une bonne base de travail.

À l’occasion de la refonte de son blog, David se pose 16 questions sur la manière d’agencer son site afin d’offrir à ses visiteurs une ergonomie optimale. Ses interrogations pouvant s’appliquer à n’importe quel site, j’ai décidé d’y consacrer un billet, plutôt que répondre dans les commentaires comme il invite ses visiteurs à le faire.

Découverte d’un blog

1. Quelle est la porte d’entrée d’un nouveau blog ? Arrivez-vous le plus souvent sur la page d’accueil ou via un lien direct/une recherche ou autre ?

J’arrive généralement sur un nouveau blog via un médium externe : billet sur un blog déjà lu, ou résultat de recherche. J’arrive donc très rarement sur la page d’accueil. Cependant, quel que soit mon point de chute, je m’attends à y voir un certain nombre d’éléments bien précis (que l’on retrouve – oh surprise – sur celui-ci) :

• Un titre.
• Un descriptif de ce dont traite le blog (autrement appelé tagline).
• Un ou plusieurs billets.
• L’endroit où je me trouve (un chemin de fer est parfois un plus, mais pas toujours adapté).
• Une navigation générale simple et concise, comprenant un lien vers le flux RSS visible et standard.
• Une navigation thématique claire, complète et très facilement accessible (typiquement en première position de la sidebar).

2. Quelle est la page suivante, celle que vous visitez juste après avoir lu celle que vous venez de découvrir ? Les liens généralement fournis sont-ils adaptés ?

Je ne lis généralement pas d’autre page que celle sur laquelle je suis tombé, puisque mon arrivée sur ce blog répond à un besoin précis. Je peux cependant faire une entorse à la règle si la page visitée réunit des conditions précises :

• Que tous les titres des billets soient parfaitement pertinents.
• Que les billets disposent de liens “précédent” et “suivant” affichés en haut de page et affichant le titre des articles vers lesquels ils pointent.
• Ou, mieux, que sous chaque billet se trouve un encadré comprenant un ou plusieurs liens pointant vers des billets connexes.

3. Lorsque vous découvrez un blog intéressant, quel est votre type d’exploration ? Via les tags, les favoris, les archives ?

Quand je ne passe pas par les média explicités ci-dessus, j’utilise généralement la navigation thématique large, autrement appelée catégories, à moins que je ne cherche que des billets traitant d’un sujet vraiment particulier pouvant se définir par un simple mot clé.

Souscription à son flux RSS

4. Quel est le facteur déclenchant la souscription ? Quels sont vos critères de sélection ?

Le premier facteur, c’est la visibilité du flux RSS. Le bouton RSS fait partie des premières choses que je m’attends à voir sur un blog, avec le titre et la tagline. Si je dois me demander où chercher la souscription ne serait-ce qu’une seconde, je n’irai pas plus loin.

Il faut ensuite que le contenu soit vraiment intéressant pour que je rajoute un flux aux quelques centaines qui encombrent déjà mon agrégateur, et là aussi, cela implique des critères tout à fait subjectifs :

• Si c’est un blog personnel, il faut impérativement que je connaisse la personne au moins en ligne.
• Il faut qu’il soit en bon français.
• S’il s’agit d’un blog professionnel ou technique, il faut que sa ligne éditoriale aille dans le sens de mes centres d’intérêt (elle doit donc être clairement définie, notamment à travers la navigation thématique simplifiées).
• Les contenus doivent être pertinents, de qualité, et ne pas être de simple relais des billets à la mode sur les autres blogs. J’ai les favoris populaires de Delicious pour ça.

5. Vous abonnez-vous au flux général ou à une sous-partie (lorsque c’est possible) ?

Le flux général, toujours, mais je ne lis que ce qui m’intéresse (d’où l’utilité de donner des titres pertinents à ses billets).

6. Qu’est ce qui vous pousse à supprimer un fil RSS de votre agrégateur ?

Cette question rejoint celle du facteur déclencheur de la souscription, mais dans le sens inverse :

• Perte de la qualité rédactionnelle.
• Perte durable d’intérêt des billets.
• Transformation du blog en relais de Digg.

Recherche d’un billet particulier

7. Passez-vous par une recherche externe ? interne ?

Arrivant le plus souvent sur un blog par un moteur de recherche, je passe assez peu par la recherche interne. Je m’attends cependant à en trouver une accessible immédiatement à un endroit pertinent : à droite de l’en-tête, ou bien placée dans la sidebar. Il faudra d’ailleurs que je la remette ici quand j’aurai refait la CSS des résultats.

8. Utilisez-vous les archives d’un blog ?

Je n’utilise pas les archives temporelles, qui ne valent finalement que dans le cadre du diarisme (journal intime pas intime). J’utilise en revanche beaucoup les catégories, qui sont une méthode d’archivage thématique.

9. Pour vous rappeler d’un billet, le titre est-il primordial ? Faut-il qu’il soit choquant/spécial ?

Pourquoi me rappeler le titre d’un billet si je sais de quoi il parle et que je dispose d’une recherche locale ? En revanche, utilisant un agrégateur RSS particulièrement peuplé, je m’attends à ce que les titres soient pertinents, sinon je ne lis pas le contenu.

Contenu et disposition

10. Préférez-vous le classique deux colonnes ou le nouveau big footer pour tout ce qui est « annexe » (liens, archives, derniers *, etc) ? ou autre (par exemple ici c’est un peu hybride) ?

Je préfère une solution hybride qui me permette de :

• Embrasser d’un seul coup d’oeil navigation thématique et contenu du billet sur lequel j’arrive.
• Affiche le reste des éléments de navigation à part, de manière bien détachée, claire, et surtout sans interférer avec le contenu, donc de préférence en dessous.

11. Un bon billet de blog, c’est le point de départ vers de nombreuses pages intéressantes à lire ou une impasse car vous n’avez bien souvent pas le temps de lire d’autres ressources ?

Un bon billet de blog, c’est généralement un aller simple dans mes bookmarks Delicious, avec très peu de chances pour que je lise autre chose, à moins que les options de navigation décrites plus haut ne me soient offertes.

12. Quelle importance accordez-vous à la régularité de publication d’un blog ?

La généralisation des agrégateurs RSS a profondément changé notre mode de consultation d’un contenu web : d’actifs – nous allions vers l’information – nous sommes devenus passifs – l’information vient à nous. Dès lors, la fréquence de publication n’a plus grand intérêt : nous ne nous lassons plus à force de nous heurter quotidiennement à un mur de non nouveauté tous les matins à l’heure du petit déjeuner.

Commentaires

13. Souhaitez-vous être tenu au courant des réponses à votre commentaire ? Si oui, comment ?

Il existe deux manières de se tenir au courant des réponses à un commentaire :

• Par courrier électronique.
• Par un flux RSS associé à la discussion.

Pour moi, le premier médium n’est pas envisageable. La plupart des gens ne ferment pas leurs commentaires au bout d’une durée déterminée, et recevoir des mails à propos d’une discussion vieille de deux ans, totalement dépassée et sortie de son contexte est relativement fatiguant.

Le flux RSS, au contraire, me semble présenter des avantages indéniables. Il évite de sortir de l’agrégateur (pour rejoindre le client mail), il se fait oublier tant qu’il n’y a plus de réponse, et il ne vient pas polluer ma boite à lettres.

14. Préférez-vous que la réponse soit incluse à votre propre commentaire ou dans un commentaire suivant ?

Un commentaire suivant.

15. Quelle importance accordez-vous à la qualité de vos commentaires ?

Idéalement, tout blog modérerait les commentaires à priori. Bien que plus contraignante pour l’auteur, cette solution présenterait au moins un avantage : prévenus des risques de modération, les commentateurs ne publieraient que des commentaires pertinents, et éviteraient les missives du genre “ouah, j’adore ce que tu fais, kikooolol”.

16. Avez-vous déjà hésité à répondre après avoir identifié les liens sortants en « nofollow » ?

J’ai une double position vis à vis des liens sortants en « nofollow » :

• Dans les commentaires, ils ne posent pas de problèmes, car ils ne risquent pas d’empêcher les moteurs de recherche de perdre le fil de la discussion.
• Dans les pingbacks ou trackbacks, il me semble qu’ils arrêtent la discussion, au moins virtuellement.

Ma réponse à la question sera “non”, car je ne fais pas attention à la politique du blog avant de poster un commentaire, et je ne le fais pas pour profiter du pagerank de l’auteur du billet mais parce que j’ai quelque chose à dire.

Remarque :

En rédigeant ce billet, je me suis rendu compte que de nombreuses réponses aux questions de David étaient redondantes, et je vous prie de m’en excuser.

Cela révèle un premier problème : en rédigeant son questionnaire, David a pensé de manière thématique, en mettant en avant les éléments que l’on s’attend à trouver sur un blog, et non transverse en isolant les problèmes posés. J’ai songé un moment à reformuler mes réponses afin de supprimer l’ensemble des répétitions, mais cela impliquait de ne plus suivre le jeu des questions réponses (un peu comme, en milieu de troisième, le jour où j’ai regroupé les questions posées autour d’un texte en trois thématiques et rédigé mon premier commentaire composé un an trop tôt au lieu de répondre bêtement comme on me l’avait demandé).

Mon conseil à David serait donc : lorsque tu t’occuperas de ta refonte effective, essaie de réfléchir de manière transverse de manière à ne pas imposer d’éléments redondants à ton visiteur afin de lui offrir un parcours agréable sur un blog par ailleurs de qualité.

[edit]

David a mis en ligne l’ensemble des réponses et un résumé de celles-ci sur son blog.

On lit régulièrement à gauche et à droite (sic) que les standards du web gagnent du terrain, que les usages changent y compris dans le grand public, que ce soient grâce aux pionniers de l’évangélisation ou à la généralisation des plates-formes de publication générant du code conforme aux standards du web. En un mot, il parait que Monsieur Tout Le Monde produit aujourd’hui un XHTML parfaitement valide, accompagné de feuilles de style valides elles-aussi, légères et bien optimisées. Il parait aussi que l’open source et les logiciels libres gagnent du terrain, que ce soient chez les grands comptes ou dans l’administration, et que le monde entier va bientôt communier dans la liberté des outils, des formats et des idées. Seul une petite enclave américaine, dans la province de Redmond, résisterait encore à l’envahisseur…

Comme je n’avais pas grand chose d’autre à faire de ma matinée, je me suis penché sur les sites de campagnes des différents candidats à l’élection présidentielle de 2007, qu’ils détiennent ou non leurs 500 signatures, et sur leurs usages. J’en ai tiré deux tableaux récapitulatifs, le premier sur les technologies utilisées, et le second sur les standards du web, et les résultats ne sont pas bien glorieux.

La technologie

Pour cette première partie, mes critères de sélection étaient :

• Système d’exploitation.
• Serveur Web.
• Technologie utilisée.

Candidat	Parti	Système d’exploitation	Serveur Web	Technologie
François Bayrou	UDF	Linux Mandriva	Apache 2.2.23	PHP
Frédéric Nihous	CPNT	Linux	Apache 1.3.33	Frontpage (?)
Ségolène Royal	PS	Debian	Apache 1.3.33	PHP
Nicolas Sarkozy	UMP	Linux	Apache 1.3.33	PHP
Gérard Schivardi	RDL	Linux	Apache	?
Dominique Voynet	Les Verts	Linux	Apache	PHP (Dotclear)
Olivier Besancenot	LCR	Linux	Apache 2.0.54	PHP
Marie-George Buffet	PCF	Debian	Apache 2.0.54	PHP
Christian Chavrier	PF	Fedora	Apache 2.0.51	HTML
Jacques Cheminade	S et P	Debian	Apache 1.3.33	PHP
Philippe de Villier	MPF	Debian	Apache 1.3.33	HTML
Nicolas Dupont-Aignant	DLR	Debian	Apache 1.3.33	PHP (Spip)
France Gamerre	GE	Windows 2003 Server	IIS 6.0	.NET
Jean-Michel Jardy	CNI	Linux	Apache	PHP
Arlette Laguiller	LO	Linux	Apache	HTML
Jean-Marie Le Pen	FN	Linux	Apache 1.3.37	PHP
Corinne Lepage	Cap 21	Linux	Apache 2.0.58	PHP

Les systèmes d’exploitation.

Une majorité écrasante des candidats est hébergée sous Linux (94,12%) pour 5.88% de systèmes d’exploitation propriétaires.

Les distributions les plus communément rencontrées sont :

• Debian : 5 (29.41%).
• Fedora : 1 (5.88%).
• Mandriva : 1 (5.88%).

52.94% (9) des candidats n’affichent pas la version de leur système d’exploitation (et il serait particulièrement impoli d’aller à la pêche aux informations à coup de nmap sans leur demander avant).

Les serveurs webs

Là aussi, l’open source est à l’honneur, avec 94.5% d’Apaches, pour 5.88% de IIS 6.0

La répartition entre les versions donne :

• Apache 2.2 : 1 (5.88%).
• Apache 2.0 : 4 (23.52%).
• Apache 1.3 : 7 (41.17%).
• IIS 5.0 : 1 (5.88%).
• Version non communiquée : 3 (23.52%)

Langages utilisés

Curieusement, on trouve encore un certain nombre de sites n’utilisant pas de moteur de rendu, mais simplement des pages HTML statiques. PHP reste pourtant à l’honneur, et .NET arrive bon dernier.

• PHP : 11 (64,7%).
• HTML statique : 4 (23.52%).
• .NET : 1 (5.88%).

Je ne suis pas parvenu à voir ce qu’utilisait Gérard Schivardi.

Développement spécifique, solutions hébergées et open source

Une très faible majorité des candidats s’appuie sur des solutions open source (ou admettent les utiliser). Parmi elles, on trouve :

• Dotclear (Bix, on t’a reconnu) : 1 (5.88%).
• SPIP : 1 (5.88%).

La très grande majorité des candidats s’appuie sur un développement spécifique (70.58%), et seuls 17.64% utilisent des solutions hébergées :

• Blogspirit : 1 (5.8%).
• Over-Blog : 1 (5.8%).
• Haut et Fort : 1 (5.8%).

Les candidats et le standards du web

C’est là que les choses se gâtent, puisque les chiffres sont tout simplement catastrophiques : un seul site passe la validation (Nicolas Sarkozy ), une grande majorité de développements en tableaux, et beaucoup de n’importe quoi, à croire qu’un grand nombre de candidats a recyclé les sites de la campagne de 1995.

Mes critères d’étude pour cette seconde section étaient :

• Modèle de développement.
• Doctype.
• Content Type.
• (X)HTML valide
• CSS Valide

Candidat	Parti	Développement	Doctype	Content Type	(X)HTML valide	CSS valide
François Bayrou	UDF	Divs	XHTML 1.1	text/html	non	non
Frédéric Nihous	CPNT	Tableaux	Aucun	Aucun	non	Pas de CSS
Ségolène Royal	PS	Tableaux	XHTML 1.0 Transitionnal	text/html	non	oui
Nicolas Sarkozy	UMP	Tableaux	HTML 4.01 Transitionnal	text/html	oui	non
Gérard Schivardi	RDL	Tableaux	Aucun	text/html	non	non
Dominique Voynet	Les Verts	Divs	XHTML 1.0 Strict	text/html	non	oui
Olivier Besancenot	LCR	Tableaux	Aucun	text/html	non	Pas de CSS
Marie-George Buffet	PCF	Tableaux	XHTML 1.0 Transitionnal	text/html	non	non
Christian Chavrier	PF	Tableaux	Aucun	text/html	non	non
Jacques Cheminade	S et P	Tableaux	HTML 4.01 Transitionnal	text/html	non	non
Philippe de Villier	MPF	Frames	XHTML 1.0 Frameset	text/html	non	non
Nicolas Dupont-Aignant	DLR	Divs	XHTML 1.0 Transitionnal	text/html	non	non
France Gamerre	GE	Tableaux	Aucun	text/html	non	non
Jean-Michel Jardy	CNI	Tableaux	XHTML 1.0 Transitionnal	text/html	non	non
Arlette Laguiller	LO	Divs	XHTML 1.0 Transitionnal	text/html	non	non
Jean-Marie Le Pen	FN	Tableaux	HTML 4.01 Transitionnal	text/html	non	non
Corinne Lepage	Cap 21	Divs	XHTML 1.0 Transitionnal	text/html	non	non

Les modes de développement

On trouve de tout, un peu comme au bon vieux temps de la Samar’ :

• Tableaux : 11 (64.7%).
• Divs : 5 (29.41%).
• Frames : 1 (5.88%).

Une écrasante majorité de tableaux, qui commencerait presque à me faire sérieusement douter de tout ce que j’ai entendu au sujet de l’adoption des standards du web ces deux dernières années.

Les doctypes

Et vous, vous aimez ça comment ?

• XHTML 1.0 Transitionnal : 6 (35.29%).
• Pas de doctype : 5 (29.41%).
• HTML 4.01 Transitionnal : 3 (17.64%).
• XHTML 1.0 Strict : 1 (5.88%).
• XHTML 1.0 Frameset : 1 (5.88).
• XHTML 1.1 : 1 (5.88%).

Les content Types

Ça sert à quoi au juste ?

• text/html : 16 (94.11%).
• Aucun doctype : 1 (5.88%).

La validation (X)HTML

Et là… c’est le drame !

• Oui : 1 (5.88%).
• Non : 16 (94.11%).

La validation CSS

• Oui : 2 (11.76%).
• Non : 12 (70.58%).
• Pas de CSS (style intégré dans les balises) : 2 (11.76%).

Conclusion

C’est… déprimant comme un dimanche de novembre, ne me vois pas d’autre mot.

En tout cas, cela montre qu’un travail d’évangélisation urgent doit se faire auprès des professionnels, en commençant par la base, c’est à dire les développeurs et les intégrateurs. La prochaine fois, si j’ai le temps, je vous proposerai un comparatif des points d’échec de tous ces sites aux tests d’accessibilité. Et si on me paye très cher, des propositions pour une refonte ergonomique… y’a du boulot !

[edit]

Le blog de Dominique Voynet validera certainement quand son attaché de presse cessera de copier / coller des caractères non UTF-8 depuis son Word OpenOffice.org favori. Bix, si tu m’entends…

Le nombre minimum d’erreurs recensé à la validation tourne autour de 30, ceci pour faire taire ceux qui diraient “oui, mais si ça se trouve, ils ne valident pas pour 2 ou 3 erreurs”.

À 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.

Le 17 décembre 1996, le W3C publiait la première version de ses feuilles de style en cascade. Dix ans plus tard, CSS est entré dans les moeurs au point de profondément changer nos méthodes de développement web : plus léger, plus simple, plus beau.

J’ai découvert CSS un peu par hasard en 1998, dans un article destinés aux webmasters sur iFrance qui s’intitulait “un design au pixel près avec les feuilles de style CSS”. Je m’intéressais assez peu au web à l’époque, en tout cas certainement pas au design, et me contentais de plaquer des feuilles de style minimalistes sur mes différents sites, utilisant div identifiées et balises d’en-têtes hx et p proprement, faisant mon Monsieur Jourdain de la sémantique structurelle sans le savoir.

J’ai commencé à me détourner du développement système et de l’administration UNIX pure et dure pour le web au milieu de l’année 2003 en commençant à réaliser moi-même les thèmes de mon blog personnel. Je me suis rapidement pris au jeu de la mise en forme, du balisage propre, puis du web sémantique, au point d’en avoir fait mon métier après 8 ans de dénigrement du web comme “parent pauvre” de l’informatique.

Bon anniversaire CSS, à la santé de qui je boirai certainement une coupe de champagne… avec style évidemment.

Via 10ème anniversaire pour CSS chez Tristan Nitot.