Voici donc une liste (non-exhaustive) des points de contrôle effectués :

Points de contrôle
Ergonomie
	Ne pas utiliser de soulignement de texte pour autre chose que des liens.
	La page 404 est indispensable et doit être personnalisée aux couleurs du site. Proposer éventuellement un formulaire de recherche.
	Une feuille de style d’impression doit être prévue.
Accessibilité
	En cas d’utilisation de plug-ins (vidéo, Flash), prévoir une alternative textuelle pour un utilisateur qui n’aurait pas installé et/ou ne voudrait pas installer le plug-in.
	Tester la page sans images (via l’extension Webdevelopper de Firefox) pour s’assurer que l’ensemble du contenu est lisible sans les images de fond. Exemple : Un texte blanc sur une image def fond peut devenir illisible si aucune couleur de fond n’a été spécifiée dans les propriétés du bloc conteneur.
	Toute image doit avoir un alt, renseigné ou non. Illustration : alt vide, ou image de fond
	Dans le cas où des fichiers sont proposés au téléchargement, deux points sont à respecter : format ouvert, poids du fichier à télécharger doit être indiqué.
	Le javascript doit être non-obstrusif et le site doit être parfaitement utilisable s’il est désactivé par l’utilisateur.
Intégration HTML / CSS
	Les pages sont valides W3C
	Le balisage est propre : pas de styles ou de scripts dans le code HTML
	Le doctype du document HTML sera du XHTML 1.0 Transitional dans le cas (limité) d’utilisation d’iframe.
	Le doctype du document HTML sera du XHTML 1.0 Frameset dans le cas (limité) d’utilisation de frameset.
	Bannir l’utilisation de tableaux pour la mise en page, les tableaux ne doivent être utilisée que pour des données tabulaires et non pas pour créer des mises en page.
	S’efforcer de renseigner l’intitulé « title » des liens pour des raisons de référencement et d’accessibilité. Le title du lien doit fournir plus d’informations que l’intitulé du lien lui-même (mais y compris l’intitulé ; ex : « Aide (nouvelle fenêtre) »)
	La structuration de l’information doit être cohérente par rapport au contexte général du site Web (ex : pas de pub au milieu du texte)
	Une page Web doit posséder une structure cohérente (utiliser h1 (oblig.), h2, …pour leur fonction 1ère ; les blocs d’infos doivent être distincts)
	Pour les tableaux de données, identifier les zones suivante : « thead » (pour l’entête du tableau), « tbody » (pour le corps du tableau) et « tfoot » (pour les données de pied de tableau). On s’efforcera de fournir une description du tableau au sein de la balise « summary »
	Les champs de saisie d’un formulaire doivent être reliés à leurs textes explicatifs respectifs (spécifier label, id et for)
	Respecter le sens sémantique des balises. Proscrire l’utilisation des balises et attributs dépréciés (ex : b, center, basefont, applet, dir, font, isindex, menu, s, strike, u et align, bgcolor, height…).
	Utiliser la balise <abbr> et/ou <acronym> ainsi que son attribut title lorsque cela est possible.
	Dans le cas d’un style spécifique à Internet Explorer, utiliser les commentaires conditionnels. Evitez les hacks du type « _margin » ou encore « *width »
	Pour conserver un maximum de souplesse aux feuilles de style, limiter tant que possible le « poids » des déclarations. Exemple : privilégier « .content » à « body.page #wrapper div.content »
	Pas de notions topographiques ou colorimétriques dans les noms de classes ou : noms faisant référence à la structure. Pas de couleur ni gauche/droite. Exemple : ne pas utiliser div.rouge ou div.left. Si on décide un jour de modifier les propriétés de placement ou d’apparence, ces classes n’auront plus de sens.
	Ne pas utiliser de cote, double ou simple, dans les chemins des CSS.
	Les sites, les pages doivent pouvoir être actualisés facilement et avec souplesse. De ce fait, les zones de contenu doivent s’étendre graphiquement en hauteur (pas de hauteur fixe donc pour les blocs)
Optimisation du référencement
	Pour des raisons de référencement, limiter au maximum les paramètres et les caractères « exotiques » dans les liens.
	Les balises d’indexation <title>, <meta name= »description » /> et <meta name= »keywords » /> doivent êtres renseignées même si leur action en terme de référencement peut être discutable. Elles doivent être situées juste sous la balise définissant l’encodage et dans l’ordre suivant : title / description / keywords
	La balise <title> doit être présente et renseignée sur toutes les pages. Elle doit être en adéquation avec son contenu et donc, dans la plupart des cas, différente d’une page à l’autre.
	La balise <meta name= »description »> doit être présente et renseignée sur toutes les pages. C’est une balise visible par l’internaute. Elle doit être significative de son contenu, des services rendus par la page, des informations livrées.
	La balise <meta name= »keywords »> doit être présente et renseignée sur toutes les pages. Elle doit reprendre les quelques mots-clé de la page. On peut aussi y inclure certains pluriels, synonymes, anglicismes, etc.
	Prévoir un fichier à l’intention des robots d’indexation, à la racine du site. (robots.txt)
Compatibilité Navigateurs
	Internet Explorer 6, (N.B. : Pour cette version, il faut que le site soit un minimum exploitable)
	Internet Explorer 7 et +,
	Firefox 2 et +,
	Safari 2 et + (tolérance)
	Opera 9 et + (tolérance)
	Les pages livrées doivent s’afficher, sans ascenseur horizontal, dans un écran en 1024 x 768
Performance
	Le poids maximal d’une page, images incluses, ne doit pas dépasser 150k.
	Seule la page d’accueil fait exception et peut atteindre jusqu’à 250k, images incluses.
	Évitez les appels multiples à des feuilles de style ou à des fichiers javascript. Merger ces appels pour des raisons évidentes de performance
	L’utilisation du format PNG 24 devra être utilisé avec parcimonie pour des raisons de compatibilité navigateur (IE6 ne supporte pas les couches alpha sans l’utilisation de DirectX. Ce dernier pose des soucis de performances, les images filtrées n’étant pas mises en cache).
Autre…
	L’encodage privilégié est l’UTF-8, il est indiqué avec la balise meta « content type ».
	Les caractères suivants doivent être encodés sous forme d’entité HTML : &, <, >, €
	Prévoir une icône de favori à la racine du site.
	Les valeurs monétaires, statiques ou dynamiques, doivent suivre le format suivant : un espace insécable comme séparateur de millier une virgule comme séparateur de décimale un espace insécable entre le nombre et son unité
	Utiliser un espace insécable entre une double ponctuation et le mot qui la précède : !, ?, :, ;
	Les chemins vers les pages (mais aussi vers les scripts, feuilles de style, images, etc) doivent être en absolu en considérant le répertoire / comme la racine du site.
	Dans le cas d’envoi de paramètre dans l’URL, ne pas oublier d’encoder sous forme d’entité HTML le « & » (&amp;).

Concernant la lecture des pages. Il y a quelques soucis comme par exemple son interprétation d’inputs dans les formulaires mais aussi dans la gestion des tailles de bloc. Rappelons qu’IE7 avait fait d’énormes progrès sur ce terrain. J’ai constaté également des problèmes de marge (margin) sur certaines pages web qui habituellement s’affichent très bien sur les autres navigateurs courants. La page de démarrage msn parle d’elle-même Des propriétés CSS ne sont pas implantées dans cette version telles que :first-letter, :first-line ou encore letter-spacing. La propriété propriétaire (ça se dit ?) de Microsoft « Opacity » ne fonctionne pas non plus, un comble… Coté Javascript, Microsoft souhaite avec cette nouvelle mouture améliorer l’interprétation des scripts et pallier les lacunes mais concrètement, je n’ai pas pu constater les avancées sur cette béta.

Mais ne crions pas au loup trop vite, il ne s’agit que d’une version béta. Le meilleur reste à venir… ou le pire…

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Microsoft a voulu, une fois de plus, de se démarquer des autres navigateurs en imposant sa syntaxe. Pourquoi devoir signaler au navigateur qu’il s’agit d’une page respectant les standards? De plus, je trouve particulièrement indécent de renseigner dans l’attribut « content » les initiales du futur Internet Explorer. Microsoft serait donc le pionnier en matière de standards du web? On m’aurait menti?

En règle générale, ces discussions ne mènent pas loin et suscitent beaucoup plus de réactions que de véritables réflexions sur la question de fond. Selon moi, elle ne devrait même pas se poser surtout si l’on doit réaliser un travail d’intégration sur un site de grande ampleur. S’il s’agit d’un site personnel ou expérimental, libre à celui qui le décide de ne développer que pour les navigateurs respectant les standards. Autrement, on ne peut pas priver les 70 % des personnes utilisant le navigateur de la firme de Redmond.

Il est toujours possible de réaliser un site acceptable sur les différents navigateurs web sans passer pour autant par des hacks en tout genre ou des commentaires conditionnels recommandés par Microsoft. On accuse fréquemment Internet Explorer de foirer la mise en page alors qu’il s’agit bien souvent d’éléments mal positionnés dans le flux ou de flottant qui ne devraient pas en être. Je ne réfute pas la présence de bugs (argh le bug des doubles marges…) mais il faut parfois essayer de comprendre la raison pour laquelle le navigateur n’affiche pas le document correctement. Cela peut permettre de trouver des placements beaucoup plus appropriés.

Je ne suis pas fermés aux avancées des autres navigateurs tels que Firefox ou encore Opera et je suis bien évidemment favorable à ces évolutions. Je suis même devenu un utilisateur régulier de ces deux navigateurs. Aujourd’hui, Microsoft s’est finalement mis à repenser entièrement son navigateur à tel point que la version béta 8 peut déjà se targuer de passer le test Acid. Je suis persuadé que les choses vont dans le bon sens et que l’on se dira dans quelques années que les versions antérieures à la 7 n’étaient qu’un vieux cauchemar. Tout ce qui est Microsoft n’est pas forcément à jeter

Je précise que cette classe js est en cours développement et qu’elle contient encore quelques bugs. Pour l’avoir déjà utilisé, je peux déjà vous  en citer quelques uns :

• Difficulté à gérer les classes pouvant posséder plusieurs propriétés (ex : #accueil .conteneur {}, #article .conteneur {})
• Certaines propriétés telle que la pseudo-classe :first-child ne fonctionnent pas si on utilise une feuille de style externe

La classe est à télécharger sur la page de Projet Google de Dean Edwards

Les popups

Elles arrivent en tête de la liste. C’est un véritable fléau sur le web à tel point que les navigateurs ont du mettre en place des bloqueurs de popup. Mais les “ pollueur du web “ ont bien plus d’un tour dans leur sac et utilisent des techniques alternative pour pourrir votre écran de pub. La fabuleuse lightbox a par exemple été détournée de son utilisation pour servir de popup publicitaire sur certains sites douteux

Les bannières publicitaires en tout genre

Qui ne s’est jamais plaint des bannières qui viennent pourrir le milieu d’un article ? Qui ne s’est jamais résigné à visiter un site parce qu’il y a un intercalaire publicitaire toutes les 5 pages où il faut cliquer sur un “skip this ad” pour pouvoir continuer la navigation ? On est tous d’accord, un site e-Commerce ne peut pas se passer de bannières publicitaires mais elles peuvent tout à fait être placées de manière élégante (le terme est un peu fort). Ce qui a fait le succès de la régie publicitaire de Google, c’est sa capacité à afficher ses publicités discrètement sans que l’utilisateur ne puisse soupçonner qu’il s’agisse de pub.

Les pages sonores

Des webmasters, souvent amusés par les possibilités qu’offrent Flash, sont souvent tentés de mettre un fond sonore aux pages. Evitez ça à tout prix. Imaginez les oreilles du pauvre internaute qui n’a pas vu que le volume de ses enceintes est au maximum. Plus généralement, c’est assez énervant d’entendre la même musique en boucle. De plus il n’y a vraiment aucun intérêt. Des portails musicaux existent si l’on souhaite écouter de la bonne musique.

Les liens externes dans de nouvelles fenêtres

L’utilisateur navigue sur le site, clique sur un lien et là, c’est le drame (niarf !), une nouvelle fenêtre s’ouvre. Rien de plus stressant que voir son Firefox démultiplier le nombre de fenêtres. C’est en général codé de manière totalement crade avec des target=”_blank” dans tout les sens. Ne vous habituez pas à cette pratique, elle nous insupporte tous. Il n’y a aucun intérêt à user de cela, vous n’obligerez pas un internaute à rester sur votre site. Si vous n’avez pas d’autre choix, prévenez l’utilisateur que le lien s’ouvrira dans une nouvelle fenêtre.

Les sites aux 1 000 rubriques

Dans ce genre de catégorie, on retrouve de grands portails (lycos.fr par exemple) qui sont des fourre-tout insupportable. Mais parfois, on tombe sur des surprises. De sites très mal organisés qui ne classent pas correctement leurs rubriques. Concevoir un site, c’est, avant tout, un travail de tri sur le contenu. Allez à l’essentiel. Une meilleure navigation dans votre site est un élément-clé de son succès.

Les pages lourdes

Attendre 2–3 minutes pour qu’une page charge est un vrai calvaire. Un page bien codée et non surchargée en javascript doit s’afficher en moins de 20 secondes. Sur les blogs, évitez les widgets en tout en genre qui sont peut être sympa mais alourdissent votre mise en page. Sur les sites web, veillez à ne pas abuser des fichiers javascript ou des images qui pèsent plus de 60 kilo octets. Choisissez également un bon hébergement

Le scroll infini

Scroller, scroller, scroller… argh ! Ces pages qui font 2 km de long vous hérissent les poils (quand ce n’est pas autre chose). On rencontre souvent ce phénomène sur les blogs. La solution? Utilisez des résumés : un lien “lire la suite” permettra de voir l’ensemble de l’article. C’est plus pratique pour vos stats, vous pourrez ainsi évaluer la notoriété de votre billet. L’internaute est un fainéant qui veut en faire le moins possible donc facilitez lui la tâche

Les accès réservés aux membres

C’est une fâcheuse habitude qu’on prit les webmasters pour augmenter leurs nombre d’inscriptions et ainsi afficher fièrement le nombre d’utilisateurs sur la homepage. A quoi ça sert ? A rien ! On n’évalue pas un site sur sa capacité à amasser le nombre d’inscrits mais plus sur sa qualité de contenu. Votre site à beau être rempli de zozos, il n’en sera pas pour autant une référence. C’est énervant de cliquer sur le lien d’un article (qui semble) intéressant et de voir ensuite un formulaire vous demandant de vous identifier ou de vous inscrire. Et bien souvent, la fainéantise reprend le dessus et on quitte.

Conclusion

C’était donc ma liste (non-exhaustive) des petits trucs qui énervent les utilisateurs web. En évitant ce genre de pratique, vous serez respecté de la communauté d’internaute. D’un point de vue marketing, vous aurez plus de chance de fidéliser vos visiteurs. Ne passez pas du côté obscur, vous le regretterez tôt ou tard Il est important de garder à l’esprit que l’internaute est quelqu’un de très susceptible. Si vous heurtez sa sensibilité, il ne restera pas et ne reviendra peut être jamais. Comme c’est triste…