Choix des mots-clé

    Avant :

  1. Faire une première liste de tous les mots-clé du site (tous les mots importants)
  2. Réduire cette liste à une dizaine de mots (jusqu’à une 50aine pour un gros site)
  3. Privilégier les mots ayant un bon rapport concurrence / popularité : sur un mot très référencé, un site précis aura plus de mal à sortir ; mais il faut tout de même choisir un mot qui sera tapé par les internautes dans les moteurs de recherche. Utiliser un outil pour trouver les mots-clé les plus cherchés :
    • Le générateur de mots clés Google AdWords recense de façon automatique une liste de requêtes courantes effectuées sur Google, en rapport avec un mot clé saisi
    • Overture donne une liste de mots liés à un mots-clé ainsi que le nombre de fois où ils ont été recherché (?)
    • Le générateur de mots-clé MIVA indique le nombre de fois où un mot clé à été demandé par les internautes dans les 30 derniers jours ainsi qu’une liste de combinaison de mots associés à ce même mot-clé.
  4. Repérer son principal concurrent sur ces mots-clé (l’outil SeeURank, gratuit au début, peut y aider) et étudier son code, ses backlinks, son indice de densité… Il servira de maître-etalon pour son propre site.
  5. Pendant :

  6. Réanalyser cette liste de mots-clé : regarder régulièremement la liste des mots-clé qui ont apportés des visites au site. Repérer ceux qui en apporte le plus, vérifier si les internautes les tapent le plus souvent avec ou sans accent

A savoir :

  • Les internautes tapent le plus souvent des combinaisons de 2 ou 3 mots
  • Les mots-clé doivent correspondre au contenu du site
  • Il ne faut pas mettre de nom de concurrent, de marque de concurrent

Référencement naturel : critères importants

  1. le contenu
    Le contenu doit être pertinant et fait pour les utilisateurs (pas pour les moteurs de recherche). Inclu :

    • la densité des mots-clé, placés dans un contexte sémantiquement cohérant
    • la non-similarité des pages
  2. la balise <title>
    Doit être adaptée au contenu de la page.
    Utilisée mais également affichée par les moteurs de recherche.
    (voir la fiche : title (balise))
  3. les liens entrants et sortants pertinents
    Plus les backlinks sont pertinants nombreux, plus ils servent le référencement. Les liens sortant en rapport avec le contenu ont également une influence bénéfique.
    (voir la fiche : a)
  4. En cas d’interdiction : robots.txt
    (voir la fiche : robotx.txt)
  5. les balises <h1> à <h6>
    Elles servent à hiérarchiser la page. Attention à ne pas les detourner de leur usage car elles sont, entre-autres, très importantes pour les lecteurs vocaux.
  6. L’URL
    Si l’URL contient les mots-clé recherchés par l’internaute, le site aura beaucoup plus de chance de ressortir.
    Dans le cas d’une marque, une URL significative doit contenir le nom de la marque.
  7. la balise meta « description »
    Plus importante pour recevoir une visite d’un internaute que pour les moteurs de recherche.
    (voir la fiche : description / keywords)
  8. la mise à jour des pages : date de la dernière mise à jour et fréquence
    Les moteurs de recherche (et les internautes !) aiment les sites fréquemment actualisés. Si, entre deux visites d’un moteur, le contenu d’une page n’a pas changé, le spider espacera ses visites.
  9. la balise meta « keywords »
    Importance de plus en plus infime.
    (voir la fiche : description / keywords)
  10. les balises <strong> et <em>
    Toujours en respectant la logique du contenu et l’internaute.

Les balise d’indexation « description »

  • Certains moteurs affichent le contenu de la meta description dans leurs résultats. Elle est donc utile pour séduire l’internaute.
  • En cas d’absence de la balise de description, le moteur affichera les premiers mots de la page, ou les quelques mots autour des mots de recherche.
  • 150 / 200 caractères, espaces compris (un caractère accentué vaut pour un).
  • A placer sous la balise title.
<meta name="description" content="" />

L’attribut title

  • Le title peut être pésent sur les liens, mais sur d’autres éléments aussi. Il n’est pas obligatoire sur une image
  • Il doit donner les mêmes informations que le libelé du lien avec des informations en plus (par ex. « Nouvelle fenêtre »)
  • Il est très utile pour optimiser le référencement.
  • Le title est affiché sous forme d’info-bulle dans les navigateurs visuels.
  • Le plus possible, chaque lien doit avoir un libelé spécifique.
  • Il doit faire moins de 80 caractères

L’attribut alt

  • alt est un texte alternatif obligatoire et réservés aux images, objets et applets.
  • C’est un equivalent textuel à un élément graphique (une image / un objet / un applet) dans un navigateur qui ne les affichent pas. (navigateur vocal, images désactivées, problème de téléchargement de l’image, etc.)
  • Il est obligatoire sur ces éléments mais il peut être laissé vide (alt="") sur un élément qui ne soit que décoratif (par ex. les puces d’une liste)
  • On ne DOIT PAS l’utiliser sur un lien.
  • En cas d’absence de title sur un élément mais où le alt est présent, IE affichera le contenu du alt dans une info-bulle. Mais ce comportement n’est pas conforme.
  • Il doit faire moins de 60 caractères (si l’élément graphique nécéssite une explication plus longue, utiliser l’attribut longdesc)

La balise <a>

  • L’intitulé du lien doit faire moins de 80 caractères.
  • L’attribut title est facultatif. Il reprend les informations de l’intitulé du lien + autres informations
  • L’attribut title doit faire moins de 80 caractères.
  • Il est conseillé (par Google, entre-autres) de ne pas dépasser 100 liens par page, y compris pour un plan du site.
    Le critère 6.7 de Accessiweb (niveau Triple-A) préconise 40 liens maximum, hors des liens de navigation
  • Que le liens soit entrant ou sortant, les mots-clé présent dans le titre augmenteront les chances d’être bien référencé
  • Un lien dans un contexte sémentiquement identique à son propre libélé est plus pertinant

Les propriétés raccourcies (CSS)

En CSS, un certains nombres de propriétés peuvent être regroupées sous une seule déclaration. On utilise pour cela les propriétés raccourcies.

Par exemple :

p {
font-family: "Times New Roman", Times, serif;
font-size: 1.2em; font-style: italic;
font-weight: bold
}

peut s’écrire :

p {
font: italic bold 1.2em "Times New Roman", Times, serif
}

Dans le cas des bordures, des marges externes et internes, on peut déclarer un style successif à chacune des 4 bordures d’un éléments. Dans ce cas, il faut respecter le sens de « l’horloge » ; on part de midi et on fait le tour du cadran : top, right, bottom, left. Exemple :

div {border:2px dotted; border-color:#F03 #5C2 #9A3 #245B7A}

Si les deux valeurs verticales sont identiques entres-elles ainsi que les deux valeur horizontales, on peut déclarer les deux en une : top/bottom, right/left. Exemple :

div {margin:20px 10px}

Enfin, il existe aussi une déclaration raccourcie pour le cas où les valeurs horizontales sont identiques : top, right/left, bottom. Exemple :

div {padding:3em 1em 2em}

Les principales propriétés raccourcies, et l’ordre de leurs valeurs, sont les suivantes :

  • background : color, image, repeat, attachement, position (vertical, horizontal)
  • border : epaisseur, style, couleur
  • border-top : epaisseur, style, couleur
  • border-right : epaisseur, style, couleur
  • border-bottom : epaisseur, style, couleur
  • border-left : epaisseur, style, couleur
  • border-color : couleurs dans le sens de « l’horloge »
  • border-style : style dans le sens de « l’horloge »
  • border-width : valeurs dans le sens de « l’horloge »
  • font : font-style, font-variant, font-weight, font-size, -* line-height, font-family
  • list-style : type, position, image
  • margin : valeurs dans le sens de « l’horloge »
  • padding : valeurs dans le sens de « l’horloge »

Optimiser le poids de sa feuille de style

La feuille de style externe

Plutôt que de mettre tout votre style en interne, dans une page, il faut privilégier la feuille de style externe.

<link rel="stylesheet" type="text/css" href="votre_feuille_de_style.css" />

plutôt que

<style>
* {font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #ABC}
body {background: url(images/fond.jpg)}
h1 {border: solid #DEF; border-width: 0 2px 2px 0; background: #FFFFF0}
#footer, #footer a, #footer span {font-size: smaller}
#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}
</style>

Le séparteur

A la fin d’une déclaration, on met un  » ; ».
Le point-virgule est un séparateur, entre deux déclarations, il n’est donc pas nécessaire de le mettre à la fin de la dernière déclaration.
Le gain peut parraître minime, mais sur Internet, chaque octet compte.

h2 {margin-top:20px}
h3 {text-indent:10%}
p {text-align: justify}

plutôt que

h2 {margin-top:20px;}
h3 {text-indent:10%;}
p {text-align: justify;}

Les couleurs

La notation hexadécimale des couleurs peut être passée sur 4 caractères au lieu de 7 lorque chacune des trois couleurs est décrite par deux caractères identiques.

color:#ABC

plutôt que

color:#AABBCC

Les unités

Lorsqu’une valeur est à 0, il est inutile de préciser son unité, quelle qu’elle soit.

margin:0 5em

plutôt que

margin:0px 5em

Les valeurs par défaut

Chaque propriété à une valeur par défaut initiale. Inutile, donc, de déclarer le comportement d’un élément si celui-ci est déjà par défaut.

div {border:1px solid #A1F5C3}

plutôt que

div {position:static; border:1px solid #A1F5C3}

Les propriétés raccourcies

(Voir Les propriétés raccourcies)

Une même propriété peut, à elle seule, déclarer plusieurs propriétés. Elles sont donc à privilégier fortement ; en plus du gain de poids, elles sont aussi bien plus agréable au développement et à la relecture car elles permettent un code moins verbeux. [1]

border: solid #DEF; border-width: 0 2px 2px 0;

plutôt que

border-color: #DDEEFF; border-style: solid; border-left-width: 0px; border-right-width: 2px; border-top-width: 0px; border-bottom-width: 2px;

Les déclarations communes

Lorsque qu’une ou plusieurs déclarations s’appliquent à plusieurs éléments, les declarations communes apportent, elles aussi, plusieurs avantages. Celui du gain de poids, un code moins verbeux, mais aussi une maintenance plus agréable puisqu’une même propriété pourra être modifier sur plusieurs éléments, même différents mais tous concernés, d’un coup. [1]

#footer, #footer a, #footer span {font-size: smaller}

plutôt que

#footer {font-size: smaller}
#footer a {font-size: smaller}
#footer span {font-size: smaller}

Les propriétés qui héritent

Les CSS sont basées sur le système d’héritage et un certain nombres de propriétés héritant, il n’est pas nécessaire de les re-déclarer dans les éléments enfants. [1]

* {font-family: Arial, Helvetica, sans-serif}

plutôt que

* {font-family: Arial, Helvetica, sans-serif}
p {font-family: Arial, Helvetica, sans-serif}
a {font-family: Arial, Helvetica, sans-serif}

Les selecteurs qui appartiennent déjà à une classe

Pour un même groupe, il est parfois inutile de créer une classe pour chaque élément du groupe. Il suffit de faire appel à la classe (ou à l’id) du groupe et de préciser quel élément sera touché par la règle.
Si le poids de la feuille de style y gagne, le poids du code HTML en tire également le même bénéfice.

#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}

et <div id="footer"><span>Réalisation&nbsp;:</span><a href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

plutôt que

#footer {color: #BDB76B}
.footerLiens {color: #562}
.footerTexte {margin: 0 5px}

et <div id="footer"><span class="footerTexte">Réalisation&nbsp;:</span><a class="footerLiens" href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

Le formulaire d’inscription

Les informations

Des informations concises et utiles

Le formulaire va d’abord donner une première impression au visiteur ; la page ne doit pas le faire fuir. Il ne faut pas oublier que les internautes ne sont pas patients, qu’ils passent souvent leur temps à remplir des formulaires d’inscription, à devoir donner des informations sur eux, leur goûts, etc., pour accéder à des pages. Il vaut mieux éviter de demander des informations en trop grand nombre ! D’abord, cela va charger votre base avec des informations dont vous ne ferez probablement pas usage (Allez-vous vraiment téléphoner à vos internautes ?!) Ensuite, cela peut décourager celui qui voulait s’inscrire. Non seulement c’est trop long mais il est aussi en droit de se demander pour quelle raison on a besoin de savoir sa ville pour jouer à un jeu en ligne. N’oubliez pas, d’autant plus, que s’il estime la question inutile ou trop personnelle, rien ne l’empêchera de remplir de fausses informations !

Aider à la saisie

Mentionnez, dés le début, les champs obligatoires et, comme précédemment, ne rendez obligatoires que ce qui doit vraiment l’être. Une aide contextuelle est la bienvenue. Pour indiquer un format de date, préciser en quoi on a besoin de telle information, etc. Attention, tout de fois, à ne pas surcharger le formulaire en renseignements : vos indications comme vos libellés, pour être efficaces, doivent être clairs, concis … inutile de faire de la littérature ici.

La présentation

Une présentation adaptée

Ce premier point acquis, soignez la présentation de votre page. Si le contexte de votre site nécessite un formulaire long, découpez le en plusieurs étapes que l’internaute pourra visualiser et identifier. Ainsi, il ne sera ni surpris ni lassé si, en validant sa page, il doit encore remplir d’autres renseignements.

Cheminement et actions

Dans ce type de questionnaire à étapes, il y a quelques règles à respecter. Il est notamment nécessaire de permettre de revenir aux étapes précédentes. Au moment de la validation finale, un récapitulatif de l’ensemble des informations données, avec la possibilité de les modifier, est, là aussi, le bienvenu. Que ce soit pour l’accessibilité du site… comme pour le confort de tous.

Exemple de découpage en ongletsExemple de navigation d’un formulaire à étapes

Pour un formulaire long comme pour un formulaire court, n’oubliez pas d’afficher une confirmation après la validation. Rien de plus perturbant pour un internaute que de n’avoir aucune explication de ce qu’il va découler d’une action qu’il vient de faire !

L’ergonomie et le design

Une utilisation fluide et agréable

Après avoir travaillé le contenu, apporter un soin tout particulier à sa présentation et à son comportement peut être d’une grande aide pour l’internaute et, là encore, contribuer à l’effort de séduction que vous faites envers lui. Découpez les types d’informations en zones, grâce aux balises et (c’est-à-dire la délimitation de la zone et son titre). La balise < label >, nécessaire aux navigateurs vocaux, est aussi très utile et très agréable. Elle permet de mettre le curseur dans le champ de saisie voulu quand on clique sur son étiquette. Et surtout, ce dont on se passe difficilement dès qu’on y a goûté, elle permet de cocher / décocher un bouton radio ou une case à cocher en cliquant sur son libellé (la zone de clic est considérablement élargie).

Un design agréable mais aussi informatif

Pour ce qui est du design lui-même, les feuilles de style vont vous permettre de rendre votre formulaire plus « sexy », apporter quelques agréments supplémentaires. Vous pouvez, par exemple, les utiliser combinées au javascript, pour modifier l’apparence d’un champ de saisie quand le focus est sur lui. Rien ne vous empêche non plus d’appliquer un style particulier à vos champs obligatoires ; de personnaliser vos champs de saisie aux couleurs de votre site, etc. Tant que vous ne faites pas de votre page un arc-en-ciel de couleurs doublé d’un feu d’artifice d’effets ! Mettez-vous à la place de l’internaute et simplifiez-lui la vie.

Le fonctionnement

La fiabilité des informations

Votre formulaire est maintenant d’une présentation irréprochable ; attaquons-nous à son fonctionnement (fiabilité, enregistrement) Il va, bien évidement, falloir vérifier les informations qui vous ont été indiquées : la présence du « @ » dans l’email, une date au format voulu, etc. Pour limiter les erreurs, vous pouvez avoir recourt au menus déroulants, à un calendrier cliquable, etc. Le tout est de minimiser la frappe de l’internaute (sans pour autant alourdir le formulaire inutilement). Faire une première vérification en Javascript peut vous permettre de limiter les sollicitations au serveur. Par contre, ne serait-ce que dans le cas où le Javascript est désactivé, il faut quand même faire une deuxième vérification côté serveur avant d’enregistrer les informations dans la base. A vous de juger, donc, en fonction du nombre d’informations à vérifier, de votre serveur, etc. Une petite astuce bien pratique est de désactiver le bouton de validation final dès qu’il a été cliqué une première fois. Cela permet d’éviter les inscriptions en doublons des internautes qui cliquent deux fois (soit que la page suivante est lente à charger et qu’ils s’impatientent ; soit qu’ils double-cliquent par habitude).

La confirmation

L’envoi d’un mail de confirmation va vous permettre de vérifier la validité du mail – si celui-ci est nécessaire pour le déroulement du jeu – en confirmant et achevant l’inscription via celui-ci. C’est également le moyen de rappeler à l’internaute ses paramètres de connexion. D’abord, même si votre envoi est immédiat, il peut très bien finalisé son inscription plus tard ; mais ainsi, il garde aussi une trace, dans ses mails, au cas où il perdrait son mot de passe … ou votre URL ! N’oubliez donc pas de rappeler, dans votre mail, le nom du jeu, son adresse, éventuellement comment se connecter et les informations personnelles de votre nouvel inscrit : login et mot de passe. Si nécessaire, vous pouvez également aiguiller votre nouveau joueur vers la prochaine étape de jeu, ce qu’il peut dès à présent faire. Ceci dépend surtout de la complexité de votre game-play.

La legislation

Les informations légales

Un dernier point à aborder, et non des moindres, est la partie légale. En premier lieu, un site qui récolte des informations sur des personnes -et c’est le cas d’un formulaire d’inscription – doit être déclaré à la CNIL. C’est totalement gratuit. Mentionnez alors votre numéro de déclaration dans votre page et rappelez au visiteur qu’il garde un droit de consultation et de modification des informations qu’il aura remplies.

Le règlement interne

Le formulaire est aussi l’occasion de faire lire et accepter le règlement du jeu et du site par le futur inscrit. N’autorisez la validation du formulaire que si le champ correspondant au règlement a été rempli.

La newsletter

Enfin, si vous proposez une newsletter, sachez que la Loi sur l’Economie Numérique, vous interdit d’inscrire l’internaute par défaut. Il doit lui-même cocher une case indiquant qu’il souhaite être abonné à la newsletter. Si le fonctionnement de votre jeu oblige à recevoir des mails, précisez-le. Un formulaire prêt et complet ;-) Fonctionnement, ergonomie, accessibilité, … ; séduction, look, fiabilité, … votre formulaire est maintenant fin prêt ! Il ne me reste plus qu’à vous souhaiter beaucoup d’inscrits ;)

Article écrit pour Game On Net (articles sur le développement de jeux en ligne)

L’accessibilité numérique et handicap

J’assistais hier à une conférence sur l’accessibilité pour les sites web et autres supports numériques.
Plutôt destinée à convaincre les décideurs encore hésitants, elle présentait des cas concrets d’entreprises ayant fait le choix de l’accessibilité.
Les avantages relevés étaient divers :

  • une meilleure image (y compris par rapport à la concurrence qui n’a pas fait ce choix),
  • utilisation de l’intranet par tous les employés,
  • parts de marché supplémentaires (handicapés, personnes rencontrant des handicaps, personnes âgées)
  • le développement de services spécifiques à un handicap et qui s’avèrent intéresser l’ensemble de la population

Sans compter qu’un code accessible entraîne un travail de réflexion sur le site, le code, etc. On observe :

  • un site plus ergonomique et donc une clientèle plus satisfaite par le service,
  • un meilleur référencement,
  • une maintenance plus facile, plus fluide
  • des pages plus légères donc moins de ressources utilisées

A savoir :

  • 3,2 millions d’handicapés en France
  • 9,2 millions de seniors dont 2,6 millions d’internautes
  • La loi sur l’accessiblité numérique, adoptée la semaine dernière, impose aux 5506 sites web publics de se rendre accessibles aux personnes handicapées dans un délai de 3 ans.
  • Le projet Support-EAM (Soutien d’un label de qualité pour l’accessibilité du Web) est une initiative européenne qui travaille à la mise en place d’un label pour les sites Internet accessibles.