Go-Referencement.org : Référencement, marketing de recherche et Web 2.0

Qu’est-ce que YSlow?

YSlow c’est une extension pour Firebug (oui FireBug et non pas Firefox! C’est une extension d’une extension!) qui aide les développeurs à optimiser les performances des sites qu’ils développent. YSlow donne une note de A à F à une page, A étant très fort et F étant moins optimisé. Les règles d’optimisation utilisées pour décider de la note sont celles de Yahoo, développeur de l’extension. C’est un outil qui était à la base utilisé à l’interne chez Yahoo et qui est maintenant disponible au grand public.

L’évaluation

Voici l’évaluation YSlow de Go-Referencement, 59%, mais n’allez pas croire qu’il s’agit d’une mauvaise note, il est très difficile d’obtenir une note au dessus de 90!

On peut voir sur la saisie d’écran que YSlow est simplement un autre onglet à l’intérieur de Firebug. En plus de l’évaluation détaillée de la performance que l’on voit sur l’image ci-dessus, YSlow offre :

• Des statistiques de gourmandise de la page


Empty Cache Full Cache
69.5K 1 HTML document (est)
15.4K 1 Style Sheet File
19.1K 6 JavaScript Files
1702.9K 87 Images
13.1K 3 CSS Images
1820.3K Total size
98 HTTP requests

69.5K 1 HTML document (est)
0.0K 1 Style Sheet File
6.7K 6 JavaScript Files
2.0K 86 Images
0.0K 3 CSS Images
78.3K Total size
97 HTTP requests

Cookies: 1046 bytes

• Liste des requêtes HTTP de la page


Type URL Expires Gzip RespTime Size(Ungzip) ETag
css [HTTP headers] http://www.go-referencement.org/.../style.css 74 15.4K "a180de-3c4b-463f865c"


Pour ce qui est de l’évaluation de performance, c’est une évaluation en 13 points, chaque point se voit assigner une note de A à F et un total est calculer pour le résultat final. Les points évalués sont :

• Faire moins de requêtes HTTP.
• Utiliser un CDN (Content Delivery Network)… Technologie réservée aux gros joueurs de l’industrie visant à offrir une connexion à un serveur géographiquement plus proche du visiteur… Google et compagnie offre ce genre de solutions.
• Mettre une date d’expiration dans les entêtes HTTP. L’objectif étant de permettre au navigateur de mettre en mémoire cache le maximum. Dans un tel cas, si vous faites des modifications sur vos fichiers, les navigateurs ne s’en rendront pas compte ce qui implique qu’il faut ajouter une version à nos noms de fichiers Ex : styles_1.1.2.css pour que le navigateur télécharge la nouvelle version.
• Supporter et offrir la compression Gzip pour que le serveur envoie de façon compressée les données au navigateur qui lui les décompresse.
• Charger les feuilles de styles dans l’entête de la page… J’espère que vous aurez A pour ce point là!
• Mettre les scripts dans le bas de la page. Le JavaScript lourd peut bloquer le rendu progressif de la page.
• Éviter les Expressions CSS Ex : background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ); pour changer le fond d’écran à chaque 2 heures…
• Mettre le CSS et le Javascript dans des fichiers externes.
• Diminuer le temps utiliser pour les requêtes DNS… rien n’est téléchargé tant que la requête DNS n’est pas complète.
• Compresser vos fichiers Javascript, et j’ajouterais, compresser vos fichiers CSS. C’est très mauvais pour la compréhension du code mais enlever les espaces superflus (tout mettre sur une ligne) augmente la rapidité.
• Éviter les redirections.
• Éviter d’inclure les mêmes fichiers externes à plusieurs reprises dans la même page…
• Utilisation des Etags. Permet de mettre une version sur chaque élément d’une page pour faciliter l’utilisation ou non de la cache.

Plusieurs s’entendent pour dire que YSlow est un outil intéressant dont l’évaluation de la note est favorable à Yahoo. Je vois dans les 13 points des éléments intéressants à considérer et d’autres plus difficiles à atteindre. L’important à mon avis est d’être au courant de l’existence de ces éléments et de les appliquer selon nos besoins en performance et budget!

Bien qu’il y ait plusieurs similarités entre le design de sites Web (sites marchands, sites de marque, sites de contenu, Intranet, etc) et celui d’applications Web, certaines attentions peuvent faire la différence entre une application médiocre et une de qualité.

Voici quelques points à considérer si jamais vous avez également à bâtir une application Web à usage commercial :

Simplifiez Oubliez les navigations atypiques ou navigations profondes; la navigation devrait être aussi linéaire que possible. L’utilisateur ne devrait jamais avoir à se demander où il se trouve, utilisez un fil d’Ariane.

Réduisez le nombre de clics La complexité de votre application ou des actions ne devrait jamais transparaître. Demandez-vous constamment si une action ne pourrait pas se faire avec moins de clics. Plus il y a de clics, plus il y a de possibilités d’erreurs et de perte de temps.

Facilitez la recherche Un champs de recherche complémentera bien votre navigation. Surtout si vous assignez des résultats aux mots-clefs les plus fréquemment recherchés (comme un FAQ).

Prévoyez les erreurs Qui sait comment les utilisateurs utiliseront votre application? Concevez votre système avec les erreurs en tête; prévoyez les avant qu’elles arrivent. Il ne sera pas facile de modifier votre application quand les utilisateurs auront commencé à apprendre à s’en servir.

Donnez des options Ne forcez pas vos utilisateurs à penser, donnez-leur toujours des manières simples de corriger leurs erreurs ou de compléter leurs actions.

Brisez le moule Oubliez la subtilité si vous voulez que vos utilisateurs remarquent un message ou une erreur. Changez le format de la page, l’affichage ou utilisez des couleurs vives pour attirer leur attention car l’habitude se développe très rapidement.

Utilisez le clavier Vous connaissez l’attribut tabindex? Il est essentiel quand vous concevez une application car il permet de contrôler la navigation clavier à l’intérieur des pages. Évitez les tendinites aux utilisateurs en excluant les éléments secondaires.

Utilisez des raccourcis claviers Observez comment vos utilisateurs utilisent réellement votre application. Surprenant? Simplifiez leur vie en créant des raccourcis claviers. Attention à ne pas interférer avec ceux du navigateur Internet.

Contrôlez le navigateur Évaluez la pertinence de permettre à vos utilisateurs de rafraîchir la page (F5), de faire Back ou Forward ou de voir l’URL. S’il n’y en a pas, débarassez-vous de ces options et sauvez de l’espace vertical.

Pensez accessibilité N’oubliez pas que des handicapés visuels et daltoniens travailleront probablement avec votre application. Assurez-vous que vos polices et liens soient conformes aux standards d’accessibilité. Ne forcez personne à cliquer sur un bouton radio, utilisez des labels.

Évitez la perte de temps Assurez-vous que vos utilisateurs savent toujours à quoi s’attendre quand ils cliquent sur un lien. Différenciez les liens externes, liens affichant / cachant du contenu, pdfs, boutons, actions, etc.

Enlevez les images Réduisez la pollution visuelle au minimum et accélérez votre application. Vos options principales devraient attirer toute l’attention de vos utilisateurs.

Dosez les couleurs Réduisez le stress de vos utilisateurs en utilisant des couleurs sobres, utilisez des couleurs vives pour attirer l’attention. Ne vous fiez jamais exclusivement à la couleur car les daltoniens auront de la difficulté à faire la différence.

Numérotez vos formulaires Réduisez la longueur des formulaires et numérotez-les. Vos pages seront plus ordonnées et paraîtront moins intimidantes.

Réduisez l’espacement Les applications nécessitent moins d’espacement que les sites commerciaux car les utilisateurs s’habituent rapidement aux éléments et à leur positionnement. Trop d’espacement réduira leur productivité en limitant la quantité d’information affichée par page.

Alignez votre contenu Le contenu d’une application devrait refléter la manière dont les utilisateurs parlent. L’apprentissage est plus difficile lorsqu’il faut apprendre de nouveaux termes pour des concepts déjà acquis.

Utilisez différents niveaux d’information Évitez de surcharger les écrans, séparez l’information en différents niveaux :

• 1) Information essentielle, affichée directement sur la page.
• 2) Information secondaire, accessible à 1 clic.
• 3) Information supplémentaire, requiert une recherche active de l’utilisateur.

Bien que plusieurs des points mentionnés s’appliquent également à la conception de sites Web, ils deviennent rapidement essentiels quand l’efficacité prime. Ne faites pas l’erreur de croire que concevoir une application est la même chose que concevoir un site Web; il est beaucoup plus difficile de faire des modifications quand des milliers d’utilisateurs dépendent de votre application.

Qu’est-ce que le HTML 5? Le HTML 5 c’est une initiative d’un groupe d’experts dans le domaine du Web, principalement des fabricants de navigateurs Web, mécontents des progrès du XHTML 2.0 qui n’arrive pas à sortir de l’état de « draft ».

Mais pour commencer, pourquoi HTML 5? HTML 4 ne fonctionne pas bien?

HTML 4 a été mis de l’avant en décembre 1997. Et oui, bientôt 10 ans, et pas beaucoup de changements depuis 1997. Il faut comprendre que le XHTML 1.0 n’est pas un « nouveau HTML » mais bien une version plus esthétique du HTML 4 car il est plus sévère dans sa syntaxe : éléments et attributs en minuscules, toujours mettre les valeurs d’attributs entre guillemets, toujours fermer les balises, etc… Ce renforcement des règles de rédaction du langage ouvre de nouvelles portes à nos vieilles pages Web qui sont maintenant compatible XML. Il est donc plus facile de transformer et/ou réutiliser son contenu à l’aide de feuilles XSLT ou autres technologies et méthodes. Encore faut-il faire du bon XHTML 1 pour pouvoir crier victoire!

Bon revenons au HTML 5… Donc pas de changement au niveau du principal standard du Web au cours de 10 dernières années. XHTML 2 ne plaît pas à tous, en partie car il offre une mauvaise rétro-compatibilité. Les groupes de développeurs derrières les navigateurs d’Apple, Mozilla et Opéra, ainsi que d’autres cerveaux du Web ont décidé de partir un groupe de travail en dehors du W3C : WhatWG pour Web Hypertext Application Technology Working Group. Le mot Application est plutôt important pour bien saisir où le groupe veut aller avec ce nouveau HTML.

Le HTML 5 propose de nouveaux éléments de disposition qui ont pour principal objectif de regrouper des ensembles d’éléments entre eux tout en évitant la sur-utilisation de balises DIV. En XHTML, il n’est pas rare de voir un <div class=”header”></div> ou un <div class=”footer”></div>, le HTML 5 propose l’ajout d’éléments comme <header></header>, <footer></footer>, <section></section>, <article></article>, <nav></nav> et quelques autres également. L’ajout de ces balises simplifie considérablement le code et donne une meilleure valeur sémantique à ces ensembles de balises. L’ajout de nouveaux éléments implique bien entendu un ménage au niveau des vieux éléments dépréciés des versions précédentes de HTML tels <big>, <center>, <font>, <frame>, <frameset>, <noframes>, <u>, etc…

HTML 5 propose des éléments permettant des opérations, disons… plus dynamiques… comme l’élément « canvas » qui permet de dessiner. On peut imaginer l’utilisation de l’élément « canvas » pour la réalisation de graphiques de toutes sortes. Une liste des éléments disponibles dans HTML 5 est disponible. J’aimerai attirer votre attention sur les éléments suivants qui me semblent être très intéressants :

• Datagrid :
  Ce qui est intéressant avec le Datagrid c’est que la spécification proposera des outils afin de pouvoir effectuer des opérations sur les données.
• Canvas :
  L’élément Canvas permet de générer dynamiquement des images, graphiques.
• Command :
  L’élément Command semble être en mesure de lancer un événement permettant une économie considérable de code JavaScript lors de la conception de formulaire.
• Dialog :
  Permet de facilement représenter des échanges entre 2 ou plusieurs personnes en utilisant les éléments <dt> et <dd>
• Event-Source :
  Whooaa!
• Progress :
  Et oui, un élément pour gérer les barres de progrès. C’est là que le mot Application prend tout son sens. HTML 5 permettra, si un jour complété, de développer des applications Web enrichies rapidement et facilement sans sur-utilisation de technologies externes !

Il y a beaucoup à découvrir sur ce sujet passionnant qu’est le HTML 5. Je n’ai même pas parlé des formulaires enrichis avec des nouvelles cases comme des « sliders », des cases avec des flèches permettant de passer un élément de gauche à droite et vice-versa. Bref, HTML 5 se veut être un HTML plus moderne, plus complet, plus à propos dans cette nouvelle réalité de développement d’applications hébergées.

Dans un monde parfait, on voudrait que le HTML 5 soit déjà réalité! Certains disaient que le HTML 5 serait prêt d’ici 10 ans, même plus! Mais depuis que le W3C a décidé d’emboîter le pas dans une direction similaire, les 2 groupes travaillent en collaboration, on pourrait donc voir des progrès de cette nouvelle version de HTML vers la fin de 2008!

Dans son article “How to Convince a Client their Site Doesn’t Need Music”, l’excellent Matt Inman se penche sur un mal dont trop d’entre nous ont souffert, il s’agit donc sans le moindre doute d’une cause humanitaire… en voici mon adaptation en français.

En tant que producteurs de sites Web, nous prenons note d’une demande aussi classique que perverse: la musique de fond. En bons professionnels, nous nous devons de répondre à toute demande absurde avec éthique et aplomb, portant à la connaissance de notre client chéri que sa requête relève visiblement de la mauvaise idée. Il existe bien sûr des exceptions, des cas où Web et musique font bon ménage, comme les sites de musique, ou encore ceux qui offrent une véritable expérience multimédia. Nous parlerons ici d’une catégorie plus commune : les sites à contenu riche dont l’immersion sonore ne constitue pas une plus-value aux oreilles des utilisateurs.

La prochaine fois qu’un de vos clients aura décidé qu’une muzak lui apportera LA touche branchée, reportez-vous à la liste ci-dessous pour le convaincre qu’il se tire… dans l’oreille. [Note du traducteur: muzak = musique de fond. Le terme Muzak, mot-valise formé de music et de kodak, est une marque déposée de la compagnie américaine Muzak. Source: Office de la langue française.]

1. La muzak dérange. Une musique en fond sonore interrompt tout autre son ou vient s’y superposer. Le hic, c’est que de plus en plus d’internautes utilisent leur ordinateur comme une station multimédia et font jouer musique ou vidéo. Dans ce contexte, toute musique inattendue est une intrusion: imaginez votre magazine qui saute de la table pour se coller à votre visage, comme le facehugger du film Alien, pour vous lire les grands titres! OK, la métaphore est peut-être un peu dure à avaler, mais l’idée est là: ne forcez pas vos visiteurs à subir quelque chose qu’ils n’ont pas voulu. Prosaïquement, on s’attend à ce qu’un site propose un contenu utile, pas de la musique d’ameublement.

2. La muzak s’interrompt quand on change de page. À moins que vous n’ayez inséré des «frames» invisibles – auquel cas vous avez des problèmes plus graves que la musique –, le son sera coupé à chaque changement de page. Pour le confort auditif, on repassera.

3. Certains systèmes sont incompatibles avec la muzak. Les plus anciennes générations de navigateurs (sans remonter au XVIIe siècle, quand même), les systèmes d’opération «marginaux», les plug-in non installés, les configurations non conventionnelles: voilà autant de cas où notre chère musique ne pourra être entendue. Comme ces cas sont mal documentés et ne constituent pas un argument fort, on posera habilement ce choix au client: un site avec musique mais qui fera «planter» certains navigateurs OU un site visible par tout le monde…

4. La muzak ralentit les mœurs ! Faire jouer de la musique est une opération qui consomme les ressources du système au détriment de la performance globale du site – particulièrement avec une machine ou une connexion lente. Non seulement l’expérience de l’utilisateur en sera assombrie, mais elle ne l’incitera pas à revenir se confronter à la frustrante lenteur de votre site.

5. La muzak fait vieux-jeu et amateur. Eh oui, il fut un temps, quand les plus jeunes d’entre vous suçotaient encore leurs Légos, où un fond musical sur un site Web était cool. Mais la Toile a mûri, et pour reprendre les mots de Matt, «it’s considered dated and the mark of an amateur». Voilà !

6. Les sites sans muzak ne sont pas les fruits du hasard. Les technologies gagnent régulièrement en puissance, et pourtant, on trouve de moins en moins de sites à muzak. Selon certains clients, ajouter de la musique serait un avantage compétitif. Erreur! Si leurs compétiteurs s’abstiennent de déguiser leur site en boîte de nuit, c’est simplement parce que c’est une mauvaise idée. On n’a jamais vu un site qui transforme votre curseur en chaton géant: le feriez-vous au nom de l’innovation ?

7. Tout le monde n’aime pas la muzak. Tous les goûts sont dans le cyberespace. Ce que certains trouvent plaisant et relaxant, d’autres le qualifieront de musique d’ascenseur.

8. Allez donc faire un tour sur Myspace ! Vous êtes-vous déjà retrouvé sur une page personnelle de Myspace, cherchant désespérément le bouton STOP caché dans cette abomination nommé profile? Vos oreilles ont-elles souffert de la pénible chanson qui leur était imposée pendant de longues secondes? Avez-vous fait Back, ou même Reset sur votre ordi? Voilà pour votre client une mésaventure à méditer. Et s’il vous fait remarquer qu’un site qui rassemble cent millions de personnes ne peut pas être mauvais, portez ceci à sa connaissance: Myspace a été élu Pire Site de l’année 2006 par le respecté PC World.

9. La muzak consomme votre bande passante. Argument de dernière chance: si le site est prévu pour drainer un haut volume de trafic, l’ajout de musique risque de gruger sa bande passante au point de générer des surcoûts.

10. La muzak distrait du contenu. La gentille techno-lounge que votre client tient à mettre en arrière-plan est-elle LE produit qu’il propose sur son site? Non? Alors pourquoi détourner ainsi l’attention des visiteurs au lieu de leur donner une occasion de se concentrer sur le vrai contenu?

Dans la centaine de critères d’optimisation connus et analysés par les moteurs de recherche, nous savons que certains ont plus de « poids » et d’incidence, dans le calcul du positionnement futur de vos pages Internet (Search engines Ranking Factors :SEOMOZ) Il arrive d’ailleurs que certains d’entre eux soient tout simplement sous estimés. L’exemple de la « balise titre », est assez classique. Avec ces 60 à 70 caractères seulement, elle joue pourtant un rôle majeur dans la position de vos pages.

Mais c’est également le cas pour un autre élément qui peut paraître anodin à première vue, tant sa présence sur une page est peu remarquée, il s’agit du chemin de navigation du site, également appelé « chemin de fer ».
Outre sa vocation initiale d’aide à la navigation de l’internaute, quels peuvent les bénéfices d’un chemin de fer dans le travail d’optimisation de votre site?

1. Répétition « naturelle » des expressions clés de chaque page

Le premier contenu de votre page détecté par les moteurs est souvent déterminant. Il est donc recommandé de soigner tout particulièrement les 1000 premiers caractères de chaque page (et le choix de ses mots clés…). En complément, l’utilisaton des règles de structuration du contenu liées aux normes d’accessibilité des sites, sont particulièrement appréciées des moteurs (balises H1, H2, H3, ….).
L’ajout d’un chemin de fer de navigation va parfaitement dans ce sens puisqu’il se trouve en principe en haut de page, soit après le titre visible (en H1, …) de la page, soit juste avant afin de répéter les termes important de la page. Si vous avez au préalable convenablement nommé vos rubriques, sous rubriques jusqu’aux pages fiche (dernier niveau d’arborescence), votre page sera naturellement créditée d’un contenu enrichi et cohérent avec vos balises titre !!
N’hésitez donc pas à « dérouler » votre chemin de fer jusqu’à la répétition du titre visible de la page dont il indique le chemin !

Quelques exemples concrets sur des sites qui sont très visibles !

PixMania

Alapage

Bien entendu, si ce chemin de navigation est intégré dans une balise de mise en forme (H2 par exemple….), son effet peut être encore plus bénéfique pour votre positionnement !

Astuce : En complément, il n’est pas rare que certains sites très volumineux reprennent de façon automatique tout ou partie du chemin de fer dans la « balise titre ». C’est un choix qui peut s’avérer tout à fait judicieux en fonction de la richesse des termes présents dans le nom de vos rubriques !

2. Restitution du « contexte » dans lequel est utilisée l’expression

Un des axes de progression des algorithmes des moteurs en 2006 concerne la compréhension du contexte sémantique dans lequel sont employés les expressions qualificatives d’une page.
Google en particulier a remplacé la notion, jusque là très quantitative de son fameux « Page Rank » (nombre de liens depuis d’autres sites qui pointent vers votre site) au profit d’une notion davantage qualitative appelée « Trust Rank ». Ce « Trust Rank », relève notamment de l’analyse du contenu environnant l’expression et de la relation des termes entre eux.
Le chemin de fer permet à niveau moindre, certes, d’optimiser ce contexte, à condition que le nommage de vos rubriques et page fiche aient été pensés de manière hiérarchisée et cohérente.

Exemple : Alapage.com

• Page rubrique « a », termes génériques : « jeux video »

• Page sous rubrique « b », termes précis : « jeux vidéo » associé à « jeux Playsation 3 »

• Page liste de produits « c », termes spécifiques : « jeux vidéo », associés à « jeux Playsation 3 » et «arcade/action »

• Page fiche produits : « spiderman 3 » associés à « jeux vidéo »

Dans cet exemple, la relation des termes est manifeste et la page s’en trouve enrichie sémantiquement. Bien sûr il est possible de développer davantage encore ce système, vous pouvez laissez courir votre imagination…

3. Augmentation de la densité du maillage des pages de votre site

Un autre facteur clés du succès de votre positionnement concerne la manière dont les pages de votre site sont liées entre elles. Ce critère représente un « poids » considérable dans le calcul de pertinence des pages, notamment pour Google. Là aussi, le chemin de fer s’avère très efficace !

Prenons un exemple chez alapage.com : Liste de BD « Blake et mortimer »

• la page qui liste les produits se trouve à 4 niveaux en dessous de la page d’accueil
• plus nous descendons dans l’arborescence, plus le nombre de pages est important

Par conséquent, plus on monte dans l’arborescence, plus le nombre de liens entrants pour les pages de niveaux supérieurs est important. Dans notre exemple, la page « livres français » hérite d’un nombre très important de liens entrants, puisque toutes les pages de niveau inférieur (sous rubriques, liste de produits, fiche produits) proposent un lien vers « livres français ».
Chaque page intermédiaire renforce sa pertinence dans son « champs d’action ». On voit ici toute l’importance de « hiérarchiser » les expressions par importance pour chaque niveau du site.
La condition de réussite de ce critère reste néanmoins de faire le choix d’un chemin de navigation généré par l’arborescence du site et non pas par la page précédente visitée par l’internaute (sa vocation première…).

Amazon, pousse même le principe à son paroxysme pourrait-on dire, en proposant des liens transversaux vers des rubriques proches des produits présentés dans la page :

4. … Aide à la navigation de l’internaute

N’oublions pas la vocation première du chemin de fer…. l’aide à la navigation dans votre site à destination de l’internaute !

Mais comme tous les éléments clés d’optimisation de votre référencement, si vous pensez aux moteurs AUTANT qu’à l’internaute, le résultat servira tout autant les intérêts de vos visiteurs que ceux de votre visibilité dans les moteurs !
Pour cela le choix des mots clés et la création des contenus restent les étapes les plus déterminantes pour le succès de votre référencement, CQFD!!

La publicité en ligne est un mal nécessaire ou un bien apprécié mais, jusqu’à quel point peut-on se permettre d’altérer l’expérience utilisateur pour augmenter la rentabilité d’un site?

Le système de Coût par mille (CPM), le premier système publicitaire du Web, est dépendant du nombre d’impressions pour bâtir la notoriété et valeur de l’inventaire d’un site Web. La valeur de cet inventaire diminue rarement selon le nombre de bannières par page, il est donc important pour un site de rafraîchir fréquemment pour afficher de nouvelles bannières.

Pour cette raison, beaucoup de sites de contenu ont été créés avec, en tête, un modèle de rafraîchissements de pages artificiel évitant des technologies comme Ajax. Oui, beaucoup de contenu requiert beaucoup de pages, mais cette sur-segmentation a certains effets négatifs sur l’expérience utilisateur :

• En échelonnant des processus simples sur plusieurs étapes (lecture d’articles, modification de profil, complétion d’un formulaire, etc) on ajoute des clics, de la frustration et du temps perdu…
• En créant une navigation profonde ou un mode de recherche rendant difficile l’obtention d’information sans générer de nouvelles impressions on ajoute des clics, de la frustration et du temps perdu…

Généralement, les utilisateurs n’aiment pas se sentir dépassés, frustrés et ne pas avoir l’impression de comprendre le site qu’ils utilisent.

Un site bien conçu ne devrait pas tenter d’obtenir ses 15-25 impressions par visite au détriment des visiteurs car, rentabilité court terme ne signifie pas nécessairement rentabilité long terme… surtout si un système de coût par influence (basé sur la valeur de l’affichage et loyauté des visiteurs) réussit à s’imposer.

Il est surprenant de voir à quel point le système de CPM a créé des besoins, détours et standards. L’expérience utilisateur ne devrait plus avoir à souffrir maintenant qu’un site peut simuler des impressions en les associant à des actions comme le nouveau Hotmail.com…

J’ai déjà eu l’occasion d’écrire tout le bien que je pense du très polyvalent Matt Inman, voici donc l’adaptation de How to Ruin a Web Design - The Design Curve, un article court mais brillant qu’il a publié sur le blog de SEOmoz. Attention : humor anglo-saxon !

Dans le monde des webdesigners, il existe un théorème méconnu selon lequel la qualité d’un design est inversement proportionnelle au nombre d’intervenants non qualifiés impliqués dans sa conception. Ce théorème s’applique également au temps passé à disséquer, analyser et critiquer la création naissante.En effet, la présence d’imbéciles rend l’intelligence collective multiplicative : un demi cerveau + un demi cerveau n’égale pas un cerveau complet, mais un quart de cerveau (1/2 + 1/2 = 1/4). Additionner un cerveau complet et un demi cerveau ne donne encore qu’un demi cerveau. Plus nombreux sont les « intervenants non qualifiés », moins nombreuse est la matière grise.

Voici deux schémas qui illustrent cette funeste théorie…

Définition de la notion « intervenants non qualifiés »

• Ceux qui n’ont jamais rien créé de visuel (ni Web, ni imprimé, ni rien) ;
• Ceux qui pensent que le style de 1996 est encore hot ;
• Tout ceux qui n’ont ni jugement ni compétence graphique, mais qui profitent lâchement de leur position d’influence pour imposer leur opinion ;
• Les « experts » autodidactes qui « surfent » depuis « longtemps » et « s’y connaissent ». Mieux que vous, d’ailleurs.

Mais alors… qui sont les « intervenants qualifiés » ?

• Ceux qui sont équipés d’un bon œil graphique (deux recommandés), quelque soit leur métier ;
• Les experts en usabilité et en ergonomie (expérience bienvenue) ;
• Tout ceux dont la critique est constructive, qui sont capables d’aller au-delà du « j’aime pas trop » ;
• Ceux qui vous ont choisi parce que VOUS êtes graphiste, et que, même s’ils sont les mieux qualifiés pour leurs affaires, c’est VOTRE mission de sortir un design de qualité.

OK, mais passer du temps sur une nouvelle création, c’est la bonifier, non ? Pas nécessairement. Ce qui peut arriver de mieux à un design, c’est de se laisser oublier quelques heures – quelques jours ? -, de dormir tout un week-end au fond du répertoire d’un ordinateur éteint, et de ressurgir devant les yeux ébahis d’un petit nombre de personnes, dont vous ! S’il est bon, vous le saurez.

Sinon, trouvez vite un coupable !

Je suis un mordu de la qualité des sites Web… un mordu vacciné… je tente de respecter un maximum de bonnes pratiques mais je ne suis pas du genre à tordre le bras du client s’il veut quelque chose avec laquelle je suis en désaccord…

Un des volets pour avoir un site Web de qualité est l’accessibilité. Lors de mon article précédent, j’ai parlé plus longuement des concepts de base de l’accessibilité. Une des bonnes pratiques Opquast dans la rubrique “Accessibilité” est de pouvoir naviguer sur le site en utilisant seulement le clavier. Automatiquement, les sites utilisant le Flash ou le Java pour le menu principal sont identifiés comme non conformes. Les sites présentant des menus déroulant sont généralement non conformes également car les intégrateurs ne pensent que très rarement à ajouter les événements javascript onfocus et onblur pour supporter le clavier.

Le respects des bonnes pratiques en matière d’accessibilité numérique est aussi une bonne manière d’améliorer le référencement organique d’un site Web. Lorsque je parle d’accessibilité à un client et qu’il réplique en disant que les gens aveugles ne sont pas sa clientèle cible, je me plais à dire que les robots d’indexation de contenu de Google sont des visiteurs aveugles! En effet, si on dégage le code HTML des éléments superflus pour les concentrer dans le CSS, les robots auront moins de contenu inutile à traiter et pourront naviguer plus aisément sur le site ce qui améliorera le positionnement du site Web!

Pour apprendre à mieux exploiter les technologies HTML et CSS, le W3Québec propose une formation de 6 heures découpée en 2 blocs de 3 heures les 21 et 28 mars 2007, de 18h à 21h, à l’Université de Montréal. Le formateur Normand Lamoureux, est expert en accessibilité du Web et spécialiste en réadaptation en déficience visuelle à l’Institut Nazareth et Louis-Braille. Son travail de tous les jours consiste à rendre des personnes aveugles autonomes à l’ordinateur. L’un et l’autre volet du cours sera orienté accessibilité, standards et bonnes pratiques.

Vous pouvez vous inscrire en ligne à l’adresse suivante : http://www.w3qc.org/formation/formation-html-css/

Les places sont limitées. Une connaissance de base des langages HTML et CSS est requise.

Rien de pire qu’une splash page ! Vous savez, la page d’entrée d’un site où généralement, vous avez le droit à une animation flash qui vous fait perdre du temps et ne vous informe en rien du tout sur le site que vous venez visiter… Ca vous dit quelque chose ? Et bien, en général, comme le souligne Matt Inman dans son excellent article sur SEOmoz, les clients sont friands de cela ! Pourtant cette technique nuit tant au SEO qu’à l’accessibilité de votre site Internet. Voici les arguments de Matt pour convaincre tout client de ne pas utiliser de splash page :

• Les robots des moteurs de recherche ne peuvent indexer une page vide !

Les moteurs de recherche scannent le texte se trouvant sur la page pour determiner le thème de cette dernière. Donc si votre page est entièrement en Flash ou d’autres éléments multimédias non lisibles par les moteurs de recherche, il y a de fortes chances que les moteurs de recherche ignorent totalement votre page d’accueil ! Les conséquences de cette configuration est que vous ne vous placerez pas sur vos mots-clés mais plutôt sur un “Click to enter” ou un “Skip intro”… Bref le seul élement texte de votre contenu. Pour preuve vous n’avez qu’à effectuer une recherche sur ces termes-ci… Nombreux sites n’ont pas de textes à valeur ajoutée dans leur contenu et se placent donc sur ces termes là.

• Et la balise keyword dans tout cela ?

Aucun des moteurs de recherche majeurs (voire mineurs) prennent en considération cette balise, suite aux nombreux abus ces dernières années. Aujourd’hui seuls la balise titre est le contenu de la page comptent votre optimisation SEO.

• Très bien ! Cachons alors du texte sous l’animation Flash !

Très bonne idée pour se faire bannir Les principaux moteurs de recherche ne sont pas dupes et ont même donné un nom à cette pratique : le cloaking. Cette technique consiste à fournir une page différente pour les moteurs de recherche que celle présentée pour les visiteurs de votre site.

• Le reste de votre site peut rester ignoré par les moteurs de recherche

En effet, si vous n’avez aucun lien de navigation en texte sur votre Splash page, les robots ne pourront accéder à vos pages à forte valeur ajoutée, et donc votre site restera totalement invisible aux yeux des moteurs de recherche… et des internautes !

• Est-ce utile pour vos visiteurs ?

Pour imager ce propos, Matt Inman prend un exemple donné par Jared Spool de Macromedia, dans un article de MarketingSherpa : “Lorsque nous avons des clients qui souhaitent une Splash page en Flash, nous leur disons d’aller dans un supermarché des environs, accompagné d’un mime. Pour chaque client entrant dans le supermarché demandez à votre mime de faire un petit spectacle distrayant de 2 minutes tout en essayant d’expliquer que le pain se trouve dans l’allée 6 et le lait est en promotion !”

• La plupart des utilisateurs ne visionnent pas votre animation

Faites un petit sondage autour de vous… Nombre d’utilisateurs clique sur le lien “Skip intro”, et ne visionnent donc pas la splash page. NewFlangled, une web agency, a analysé leurs logs et en sont venus à cette conclusion : 25% des utilisateurs quittent la page dès qu’ils découvrent que cela est une splash page.

• Les connexions à bas débit sont fortement pénalisées par le délai de chargement

Un utilisateur bas débit fermera tout de suite la page surtout si le lien “Skip intro” ou “Enter” n’est pas disponible faute de temps.

• Le lien “Accéder au site” est redondant et allonge le processus !

En accédant à la splash page, les internautes sont déjà convaincus de vouloir visiter votre site ! Comme l’illustre Matt dans son article, c’est comme si vous ouvrez la porte de votre magasin à un client pour l’amener face à une autre porte à ouvrir ! Ca n’apporte aucune plusvalue, bien au contraire, plus vous allongez le processus, plus vous avez de chance de perdre vos clients potentiels le long du chemin de navigation.

• Le contenu de la splash page peut être intègré dans la page d’accueil

Dans la plupart des cas, l’animation de la splash page peut souvent être intègrée dans la page d’accueil elle-même, soit en entête (header ou bandeau), ou dans le contenu. Ceci est le compromis idéal entre l’efficacité d’un site en terme de taux de conversion, et le souci d’un graphisme soigné. Il permet aussi d’uniformaliser la navigation en l’affichant directement dès la page d’entrée (ici la page d’accueil), ce qui est bénéfique pour l’usabilité et l’expérience utilisateur. Pour illustrer cette notion, je vous invite à faire un tour sur le site d’un éditeur en ligne (Virtual Paper).

• Pensez à la navigation… et ergonomie !

Généralement, sur une splash page, vous n’avez aucun ou peu d’élements de navigation, en tout cas, pas ceux que vous allez retrouver sur les autres pages du site. Ceci peut être déroutant pour vos visiteurs qui peuvent se décourager rapidement et quitt er votre site.

Voilà ! Si vous avez d’autres arguments ou contre arguments ! Je les attends avec impatience ! Je suis très d’accord avec l’opinion de Matt (consultante SEO oblige) : mise à part pour le site d’un artiste ou d’un web designer, où la créativité et l’originalité doivent être privilègié, je le déconseille aux autres types de sites, surtout ceux d’entreprise.

Bien que, pour plusieurs, cette liste de conseils et de validation “onsite” pour les moteurs de recherche pourra vous sembler assez générale, vous seriez étonnés de voir à quel point la majorité des développeurs et experts en référencement oublient / ne valident pas correctement ces étapes de base. Avec ces 19 trucs, vous pouvez être certain que tout effort de « link building » ou de « link baiting » sera maximisé! Les voici :

1. Faire une campagne test de 100$ dans Google Adwords afin de vérifier que votre recherche initiale de mots-clés est bien ciblée et que les mots-clés les plus importants sont priorisés.

2. S’assurer qu’il y a une balise Titre et une balise Description bien écrite, attirante et unique sur chacune des pages du site.

3. Vérifier que tout élément de contenu pertinent sur chacune des pages du site est statique à la page qui lui était destinée, qu’elle n’est pas dupliquée et qu’elle n’est pas dans une image texte.

4. Réviser le contenu dans chacune des pages pour s’assurer une présence minimale des mots-clés sur lesquels vous tentez de vous optimiser.

5. Vérifier votre code pour être certain que tous vos titres et sous-titres présents dans vos pages sont sous des balises H1/H2 et qu’une feuille de style (CSS) a été appliquée pour leur donner le bon format à l’affichage

6. S’assurer que tout élément de navigation est un lien texte et qu’il n’y pas de liens du type « cliquez ici » ou « plus d’infos », diluant ainsi la force des liens contextuels que vous tentez de créer

7. Vérifier chaque page de contenu pour s’assurer que des liens contextuels sont affichés dans chacune des pages du site et qu’ils créent une emphase sur les sections les plus importantes du site

8. Si vous planifiez échangez des liens (réciproques, unidirectionnels ou three-way), assurez-vous d’avoir un petit annuaire de base avec catégories ou sinon, au minimum, une page « liens / ressources »

9. Vérifier la présence du fichier robots.txt à la racine du site et prévenir l’accès aux dossiers sécurisés

10. Assurez-vous d’avoir un fichier sitemap.xml à la racine de votre site

11. Valider que vous avez une miette de pain / fils d’ariane sur toutes les pages

12. Offrir un sitemap physique facilement accessible et visible en tout temps sur votre site

13. Offrir une page d’erreur (404) avec un champ de recherche et vos principales catégories

14. Vérifier que les images importantes et pertinentes ont un « alt » tag (cette étape devrait être automatisée d’une façon quelconque)

15. Installer un outil général d’analyse de données (Google Analytics est gratuit, IndexTools est plus précis concernant le suivi des actions)

16. Installer des outils de tracking (Heat Map tracking, trackers de conversion des plateformes de Pay-Per-Click, etc.)

17. Enregistrer / valider votre site via Google Webmaster Central afin d’analyser vos liens entrants via les webmaster tools.

18. Faire un test rapide de localisation d’IP pour vous assurer que votre domaine est hébergé près de votre marché cible principal

19. À moins d’avis contraire, inscrivez la signature de votre entreprise au bas de la page d’accueil en utilisant un mot-clé ciblé comme « anchor text ».

Avec cette liste de base, toute compagnie de développement et de marketing Internet assurera à ses clients que leur site web sera plus facilement référencé, et que vous génèrerez plusieurs clients potentiels par le simple fait de vous être assuré que ces 19 éléments d’optimisation onsite ont été validés et analysés. À titre d’exemple, NVI compte 17 employés et plus de la moitié de nos clients proviennent du fait que nous incitons fortement la majorité de nos clients à avoir une visibilité minimale sur le web.

Des idées pour monter ma liste à 25? Merci!