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.