Ressources de référence

Ressources (françaises) de référence pour se lancer, suivre et se perfectionner dans la conception, l’intégration, le design, etc. de sites web orientés qualité, standards, accessibilité, expérience utilisateur, etc.

Vos propres références sont les bienvenues en commentaire.

(et à propos de la veille : Faire de la veille)

Articles et billets

Outil

  • Projet Opquast – Gestion de la qualité
    #qualitéweb  #referentiel #bonnespratiques
    http://www.opquast.com

Communautaire

(forum, liste de diffusion, discussion, etc.)

Événements

  • W3Café
    http://france.w3cafe.org
  • Paris Web
    #conférences #ateliers
    www.paris-web.fr

Mémo rédacteur web / intégrateur HTML

Mémo rédacteur web / intégrateur HTML
Rédacteur web Intégrateur HTML
Style éditorial Faire court
Faire simple
Organisation de l’information Appliquer le principe de la pyramide inversée
Les titres Compréhensible hors-contexte
Hiérarchisés Utiliser les balises <h1> à <h6>
Contribuent à organiser la page
L’emphase Prévoir de l’emphase Utiliser les balises <strong> et <em>
Les aides à la compréhension Prévoir les abréviations Utiliser les balises <abbr> et <acronym> (voir Abréviations, sigles et acronymes : balises, attributs HTML et accessibilité
Prévoir un glossaire Utiliser les balises <dl> , <dt> et <dd>
Langue Signaler les langues et les changements de langue Utiliser l’attribut lang de la balise <html> pour la langue principale du document
Utiliser l’attribut lang dans la balise englobant un texte d’une langue différente de la langue principale.

Utiliser la balise <span> au besoin
Les liens Compréhensible hors-contexte
Un même intitulé pour des liens vers une même destination Utiliser l’attribut rel= »nofollow » pour qu’il n’y ait qu’un seul lien suivi par les moteurs de recherche
Liens dont le libellé est le même différenciés par info-bulle Utiliser l’attribut title du lien
Utiliser l’info-bulle pour des renseignements supplémentaires
Les téléchargements Indiquer les informations techniques Utiliser éventuelement l’attribut title du lien
Les règles typographiques Indiquer et imposer les règles typographiques Utiliser les espaces insécables (&nbsp;). Voir HTML Character Entities (en)
Les tableaux Titre du tableau Utiliser la balise <caption>. Voir Au tableau ! pour la création de tableaux en HTML
Résumé du tableau Utiliser l’attribut summary
En-tête et pied de tableau Utiliser les balises <thead>, <tfoot> et <tbody>
Résumé des en-têtes Utiliser l’attribut abbr
Les images Ne traiter que les images de contenu Gérer les images illustrative et décorative via la feuille de style. Dans le cas d’une image présente dans le contenu mais n’apportant pas d’information, laisser la valeur de l’attribut alt à vide.
Image-lien : indiquer la fonction du lien Utiliser l’attribut alt
Alternative courte
Alternative longue pour des images complexes Utiliser l’attribut longdesc
Les boutons Utiliser des verbes
Les formulaires Items réunis par groupes logiques Utiliser la balise <fieldset>
Titres des groupes logiques Utiliser la balise <legend>

Gabarit de tableau HTML

<table summary= » »>
<caption></caption>
<thead>
<tr>
<td>&nbsp;</td>
<th id= » » abbr= » »></th>
</tr>
</thead>
<tbody>
<tr>
<th id= » » abbr= » »></th>
<td headers= » »></td>
</tr>
</tbody>
</table>

Conception de site web – Planning

Projet

  1. Écoute de la problématique ; écoute de la demande, des besoins, des objectifs, des résultats attendus
  2. Prise de connaissance de la cible, des produits, des contraintes, des moyens financiers, du calendriers
  3. Liste des produits, des services
  4. Questionnements sur la mise à jour : qui ? quel niveau technique ? quelle fréquence ? quels impacts ?
  5. Exigences de qualité : quel niveau ? quel suivi ? quelle fréquence ?

Mise en œuvre

  1. Anticipation des questions techniques : hébergement, nom de domaine
  2. Mise en place du calendrier, des intervenants, du coût
  3. Choix de la ligne éditoriale (ton, principe à mettre en avant, etc)

Réalisation

  1. Arborescence
  2. Charte graphique / Rédaction texte
  3. Choix de gabarits déjà existants ou développement de gabarits manquant à utiliser dans projet en cours et projets futurs
  4. Intégration / développement

Suivi

  1. Recette
  2. Tests / audits
  3. Mise en ligne
  4. Suivi de la qualité

Consignes rédactionnelles

  • Faire simple

    Faire des phrases de préférence affirmatives, avec sujet-verbe-complément. La lecture a l’écran est difficile et bien moins fluide que sur papier.

  • Faire court
  • Utiliser le principe de la pyramide inversée

    La pyramide inversée, c’est le principe qui consiste à placer en haut les informations importantes et de détailler en descendant.

  • Appliquer la règle des « 5W »

    Les « 5W » sont les cinq questions auxquelles il faut répondre : « what », de quoi on parle ; « who », de qui on parle ; « where », où est-ce que ça se passe ; « when », quand est-ce que ça se passe et « why », pourquoi. On peut y ajouter deux questions : « how », comment et « how much », combien.

  • Faire des liens

    Les liens hypertexte sont la base même du web. Faire des liens externes pertinents enrichi votre contenu et donc la satisfaction apportée à l’utilisateur.

  • Rédiger des titres informatifs

    Contrairement au support papier, les titres sur Internet doivent être compréhensibles hors de leur contexte. En effet, la nature du web fait qu’ils peuvent se retrouver isolé du reste de la page (Flux RSS, résultat de recherche, etc.)

  • Soigner la titraille

    La titraille, c’est l’ensemble des titres, y compris la légende. Elle doit être équilibrée. Une titraille hiérarchisée est déjà une information pour le lecteur qui parcourt souvent la page plus qu’il ne la lit.

La balise d’indexation <title>

  • Balise très importante pour le référencement
  • Apparaît dans les résultats des moteurs de recherche
  • Titre différent sur chaque page et adapté au contenu : pour varier les mots-clé, pour que toutes les pages ne paraissent pas identiques dans un résultat de recherche.
  • Les mots-clé les plus importants au début
  • 60 carctères / une 10aine de mots environ

robots.txt / balise « robots »

Le fichier robots.txt

Le robots.txt permet est destiné aux moteurs.
Il permet d’autoriser ou non un moteur nommé (utile pour interdire les collecteurs de mails mais sachant que tous les robots ne respectent pas le robots.txt !).
Il permet également de spécifié des pages à ne pas suivre (Les pages qui n’ont aucun intérêt pour le référencement ; les dossiers de scripts, de formulaire, par exemple). Il permet ainsi une économie en ressources.

  • Attention à la syntaxe et à la casse : c’est : robots.txt
  • Les robots sont le plus souvent sensible à la casse
  • Si les robots.txt sont destinés aux moteurs, ils sont lisibles par tous : ne pas y lister les répertoires cachés (il suffit de ne pas faire de liens dessus !)
  • Le robots.txt est unique et doit être à la racine du site
  • Ne pas sauter de ligne dans le fichier robots.txt
  • En cas d’absence de robots.txt (= si on veut que le moteur suive tous les liens, indexe tout), le moteur le cherche (ce qui entraîne, dans les logs, une erreur 404). Ne le trouvant pas, il ne perd pas son temps à l’analyser. On peut toutefois le mettre quand même si on veut « faire propre ».

Exemple :

# Commentaire
User-agent: *
# A quel moteur s'applique la règle. * = tous les moteurs
Disallow: /scripts/
# Interdit la visite à tout le contenu du répertoire scripts
Disallow: /membres/inscription.php
# Interdit la visite à la page inscription.php
# un groupe User-agent par moteur

La balise meta robots

  • Elle n’est pas suivie par tous les robots ; privilégier le robots.txt
  • On doit la mettre sur toutes les pages du site !
  • Syntaxe :
    page indexée, liens suivis :

    • <metaname="robots" content="index, follow">
    • <meta name="robots" content="all">

    page indexée, liens non suivis :

    • <metaname="robots" content="index, nofollow">

    page non indexée, liens suivis :

    • <metaname="robots" content="noindex, follow">

    page non indexée, liens non suivis :

    • <metaname="robots" content="noindex, nofollow">
    • <meta name="robots" content="none">

La balise d’indexation « keywords »

  • Une importance très faible
  • Y mettre les mots absents du contenu et pourtant ayant un rapport, une pertinence avec le contenu (synonymes, anglicismes, …).
  • Mettre les mots dans l’ordre d’importance, les plus importants au début.
  • Utiliser les groupe de mots : « création de sites Internet » plutôt que « création, sites, Internet ».
  • Ne mettre les pluriels que s’ils différents de plus d’une lettre du singulier (ex. : cheval / chevaux).
  • Séparateur : espace ou virgule ou espace + virgule
  • Risque d’être considéré comme spammeur au-delà de 100 mots ou 1000 caractères (un caractère accentué vaut pour un) ;
  • Une 20aine de mots suffit.
  • L’utilisation de marques, de nom de concurrent est illégale.
  • A placer sous la meta « description ».
<meta name="keywords" content="" />

La balise <textarea>

Les attributs rows et cols sont obligatoires et leur valeur doit être renseignée pour que la page soit valide.

Si la feuille de style indique une hauteur et une largeur pour les textarea, elle prendra la main sur les valeurs indiquées par rows et cols.

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