Qu'est-ce qu'un site de qualité?

On dispose maintenant d'une définition précise par Google de ce qu'est un site de qualité. Un lien nous la donne en base de page.

Dans cette page nous verrons les critères qui définissent un site de qualité et moderne du point de vue du visiteur...
Ils deviennent encore plus essentiels depuis les efforts des moteurs de recherche pour filtrer les sites dans les résultats de recherche, selon leur qualité.
Bien que la qualité d'un site ait toujours été d'actualité elle a pris un importance particulière en avril 2011 avec la Panda Update, la mise à jour de l'algorithme de Google pour éliminer les pages de pauvre qualité et qui va même plus loin en pénalisant un site tout entier si une partie de son contenu n'est pas appréciée des utilisateurs et n'obtient aucun lien retour.

Site de qualité

Critères de Maslow
Selon Maslow, le design du site doit répondre à une hiérarchie de besoins, par ordre décroissant:
  1. Accessibilité. Le contenu du site doit être facile à trouver et utiliser par tous.
  2. Stabilité. Le site est consistant, toutes les pages se valent.
  3. Ergonomie. Il est facile à utiliser.
  4. Disponible. Toujours en ligne.
  5. Fonctionnalités. Offrir des services que l'utilisateur apprécie.
  6. Flexibilité. Il s'adapte aux besoins de l'utilisateur.

Voici en détails tous les éléments pratiques du site, en complément et en accord avec les critères de Maslow. En fin de page vous trouverez un lien sur les critères données par Google.

Nom de domaine
Avoir un vrai nom de domaine et pas un sous-répertoire sur un site collectif. La sémantique du nom doit être en rapport avec le contenu du site.
Composition
Il convient pour réaliser une page bien conçue de placer les éléments là ou les visiteurs ont l'habitude de les trouver, lorsqu'il s'agit d'informations pratiques mais on peut faire preuve d'imagination quand au contenu.
La disposition la plus commune est la suivante:
1) En-tête en haut de page. Il contient le logo, et des éléments optionnels. Ce n'est pas le meilleur endroit pour placer une publicité.
2) Barre latérale à droite ou à gauche. Le coté droit rend le site plus accessible aux mobiles.
4) Corps de texte.
4) Pied de page contenant les liens pratiques comme les termes d'utilisation. Les liens vers les sites partenaires sont ignoré autant des moteurs que des visiteurs. En trop grand nombre, ils pénalisent un site.
Contenu
Un contenu complet, cohérent, en bon français et original attirera les liens sur le site et donc la note pour les moteurs de recherche.
Pour être original vis à vis des moteurs de recherche, le contenu doit comporter du texte avec des mots-clés ne figurant pas des articles similaires.
Le texte doit être hiérarchisé avec des balises <h2>, <h3>, etc.. et avoir un titre dans une balise <h1>. Ne pas utiliser ces balises comme éléments de mise en page, les feuilles de style CSS sont là pour cela.
Image et widgets
Le contenu peut être complété avec des services, comme par exemple une carte Google Maps.
Un site moderne s'agrémente d'images et de vidéos. Voir comment créer une galerie d'images, ou utiliser une lightbox pour afficher une image, un texte ou un formulaire.
Liens
Pas de liens brisés, ne pas lier de pages sans intérêt et pas de liens vers des pages dont le contenu n'est pas en rapport étroit avec votre page. Testez l'apparition de liens brisés régulièrement.
L'attribut "title" de la balise <a> permet d'afficher un message quand la souris s'arrête sur le lien. De même l'attribute "alt" fournit des informations sur les images.
Navigation
Toutes les pages du site doivent pouvoir être atteinte à partir de la page d'accueil, directement ou non. L'idéal est que chaque dossier au moins soit lié sur la page d'accueil. On peut la compléter d'une carte de site.
Visiteurs
1) Doivent revenir souvent sur le site: ils le feront parce qu'ils y trouveront des références utiles, du contenu unique, une présentation attrayante.
2) Doivent rester longtemps sur le site: les pages sont liées entre elles, le contenu est intéressant. On peut utiliser les techniques du romancier, susciter l'intérêt, et même créer un suspense!
Titre
Le titre de chaque page doit être différent de celui des autres pages.
Dans les résultats des moteurs de recherche, on doit cliquer sur votre page. Pour cela il faut un titre et une description qui incitent à choisir cette page là plutôt qu'une des autres, même si elles sont placées avant.
Le titre se met dans la balise <title> dans la section <head> du code source de la page, ainsi que dans une balise <h1> dans le corps de la page. On peut utiliser PHP pour se faire: 
<$title="Mon titre"; 
<title><?php echo $title?></title>
<h1><?php echo $title?></h1>
Description
Ajouter une balise meta description qui donne envie de consulter la page. Sinon le snippet des pages de résultats est prise par le moteur de recherche au début de la page, ou par concaténation de phrases : 
<meta name="description" content="ici la description de la page">
Feuilles de style
L'utilisation des CSS fait la différence entre un site de qualité et un site de débutant.
CMS ou template
Utilisez un CMS si votre site est destiné à publier des nouvelles ou un blog. Cela fournit des outils qui automatiseront des tâches comme trouver les articles en rapport. Sinon utilisez des templates en PHP pour uniformiser l'apparence du site.
Un template PHP de base ressemble à cela: 
<?php
$title="Mon titre";
include("top.php");
include("sidebar.php");
?>
<body>
...
</body>
<?php include("footer.php");
Favicon
C'est l'image qui s'affiche dans la barre d'URL à gauche du nom de votre site. Voir la page sur le graphisme pour savoir comment créer la favicon de votre site. Ce peut être réalisé en 5 minutes.
Vitesse
La vitesse de chargement est devenue un critère important. On peut accélérer la page en réduisant le nombre d'images ou améliorant la compression, en passant du PNG au JPG. Il existe aussi de meilleurs compresseurs PNG, voir la liste d'outils.

Voir aussi Qu'est-ce que la qualité d'un site pour un moteur de recherche. Comment il peut l'évaluer. Et si vous lisez l'anglais, Why our newspaper is dying, un sommaire en textes et images des mauvaises pratiques.

Templates

Voilà une liste de sites offrant des templates à adapter pour le design de vos pages. Noter que les interfaces à largeur variable, dites aussi "extensibles", qui s'adaptent à la largeur de l'écran, sont préférables car les internautes n'ont pas forcément la même résolution d'écran que vous.