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

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!

Je fais la promotion du XHTML depuis plus de 2 ans. En effet, la plupart de mes sites Web sont entièrement valides, mon entreprise est membre du W3Qc, je forme mes employés et partenaires afin qu’ils respectent les normes et je conseille mes clients en faveur de l’adoption de ces standards.

J’ai décidé de rédiger un guide du XHTML qui pourra servir d’argument de vente, de document de soutien à l’apprentissage du XHTML et d’aide mémoire.

Pourquoi valider
Respecter les normes parce qu’il faut respecter les normes n’est pas le meilleur argument. Nous ne respectons pas (tous) les limites de vitesse, pourquoi respecter les normes lors de la conception d’un site Web. Voici quelques arguments pour appuyer votre discours :

• Un site utilisant les derniers standards est fait pour durer tout au long de l’évolution des navigateurs et des divers langages
• Votre site sera compatible avec tous les navigateurs respectant la norme que vous aurez choisie. Adieu les sites optimisés pour IE sous Windows et qui sont donc incompatibles avec d’autres navigateurs populaires ou systèmes d’exploitation.
• Accélération du développement et de la maintenance. Le XHTML permet une lecture facile du code et une mise à jour simplifié du design, des feuilles de style et de la mise en forme puisqu’ils sont séparés du contenu.
• Une page XHTML a beaucoup plus de chance d’être accessible à tous les utilisateurs puisqu’il respectera automatiquement certains critères requis par les normes d’accessibilité. De plus, vous serez probablement tenté de respecter d’autres normes par la même occasion.
• Les pages XHTML strict sont généralement plus légères ce qui a pour avantage d’accélérer le temps de chargement des pages. Les feuilles de styles étant externalisées, elles sont gardées en mémoire sur l’ordinateur (cache) ce qui a pour effet d’accélérer la vitesse d’affichage des pages.
• En XHTML, il est possible d’organiser stratégiquement les éléments afin de mettre l’emphase sur le contenu unique de chaque page plutôt que sur les divers menus répétés sur le site entier. Ceci aura pour but de donner plus d’importance au contenu lors de l’indexation d’un site par le robot d’un moteur de recherche.

Je pense que certains moteurs de recherche vont même donner un avantage aux sites respectant les normes telles le XHTML.

Comment valider
Il existe plusieurs outils pour valider un site, en voici une liste :

• http://w3qc.org/validateur/ (en français)
• http://www.validome.org/ (en français)
• http://validator.w3.org/ (en anglais)

C’est à ce moment que j’ai l’honneur de vous présenter un de mes produits. Mon équipe a développé un Validateur XHTML Multipage. Ce validateur utilise aussi notre robot pour indexer votre site puis le moteur de validation du W3C pour valider le code des pages. D’un seul clic, grâce à la technologie AJAX, vous pouvez donc valider toutes les pages de votre site Web et voir les résultats apparaître sur le rapport qui vous est présenté dynamiquement. Vous pourrez par la suite valider à nouveau une page en cliquant sur « go » et afficher plus d’information sur les erreurs spécifiques à une page en cliquant sur le nombre d’erreurs dans la colonne « erreurs ». Cet outil est très pratique pendant le développement de votre site Internet, lors de la mise en production mais aussi pendant toute la durée de vie du site afin de vérifier la validité des pages, possiblement altérée par le contenu généré par vos utilisateurs, tels les commentaires.

Grâce à Go-Référencement, qui sponsorise maintenant le Validateur Multipage, je suis en phase d’analyse et commencerai bientôt la charte du projet pour la version 2. L’outil sera migré sur le serveur de Go-Référencement qui fournira aussi un effort de développement. Laissez-moi un commentaire avec toutes vos suggestions et recommandations, je les prendrai très certainement en considération!

Oui mais je n’y arrive pas!
Pas de panique, voici comment s’en sortir.

1. Validez une page et regardez la liste des erreurs. Tentez de corriger les erreurs simples en premier. Une fois la liste écourtée, le projet vous semblera plus réalisable
2. Si le message d’erreur ne vous dit rien, ou que vous ne savez pas comment corriger le code, il est souvent utile de chercher dans Google/Yahoo/MSN le message d’erreur, entre guillemets doubles, en excluant le numéro de ligne. Vous trouverez sans doute des discussions qui traitent de cette erreur sur plusieurs forums et la solution y sera, je l’espère, fournie.
3. Consultez ces sites références :
   1. FAQ Développez
   2. XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)
   3. XHTML - Wikipédia
   4. XHTML Tutorial par W3Schools (en anglais)
   5. Tutoriels AlsaCréations
   6. XHTML en une heure par OpenWeb
   7. W3Qc
4. Si vous ne trouvez rien, vous pouvez vous-même rédiger votre question sur l’un des forums suivants :
   1. AlsaCréations
   2. Développez
   3. Le site du ZérO
5. Contactez-moi et priez

Vous voulez contribuer à ce guide ou proposer des améliorations au le Validateur Multipage? Laissez-moi vos commentaires !