Voici un exemple typique d'un site qui a un look professionnel et moderne. On retrouve ces éléments dans divers sites:

Une mise en page consistante

La mise en page se retrouve à travers tout le site. La mise en page est structurée et n'utilise pas des éléments volants (un menu qui se retrouve en haut sur une page, en bas sur une seconde, à gauche sur une troisième...)

Barre de navigation principale A

Elle contient les liens vers les pages principales du site. On peut placer cette barre en haut ou à gauche et la bloquer en place (comme sur mon site). L'idéal est que la barre soit fixe, elle permet au visiteur de retrouver directement les pages principales.

En-tête B

L'en-tête reprend le logo de l'entreprise, un slogan, une adresse, un numéro de téléphone,... Placez-y les données les plus importantes. Si vos contacts se font principalement par téléphone, placez-y donc votre numéro.

La barre latérale C

Il s'agit d'une nouveauté qui est reprise par de nombreux sites et utilise généralement une police de caractères plus épaisse. C'est la barre d'action où vous indiquez clairement ce que vous voulez du visiteur: placez-y vos produits en promotion, demandez aux visiteurs de s'inscrire pour une newsletter, etc... Cette barre d'action peut comporter une partie fixe (sur toutes les pages) et une partie variable (par exemple: "cette semaine uniquement: recevez une batterie de rechange gratuite à l'achat de cet appareil photo!"). Faites de petits blocs que vous pouvez facilement ajouter à chaque page. Ces petits blocs sont en fait des pages séparées que vous pouvez modifier rapidement (le contenu est alors repris directement sur toutes les pages qui utilisent ce bloc).

Regardez-bien comment se présente la barre d'action: elle va du haut en bas de la page: c'est donc un des éléments les plus importants de la page! Utilisez-là à bon escient! Le bas de la barre d'action peut contenir un bloc d'informations.

Le contenu principal D

C'est ici que vous placez votre texte. Traitez d'un sujet par page et évitez les formules "pour la suite, cliquez ici": arrangez-vous pour cerner le sujet sur une seule page car peu de personnes ne lisent "la suite".

Fil d'ariane (breadcrumb)

Un fil d'ariane est important si votre site devient touffu et qu'il comporte plus d'un niveau hiérarchique. Ce site contient un fil d'ariane en haut de page.

Il s'agit d'un fil d'ariane hiérarchique, mais il existe également un fil d'ariane linéaire qui reprend les différentes pages que vous avez visité. Cela peut être interessant pour les sites de vente où l'acheteur peut retourner en arrière.

Le fil d'ariane a comme avantage que de google (et d'autres) reprennent le fil d'ariane sur la page des résultats. Vous avez ainsi la possibilité d'offrir au visiteur non pas un lien, mais plusieurs liens vers votre site. Utilisez un fil d'ariane à bon escient: il ne sera pas repris par les moteurs de recherche s'il est trop complexe et ne correspond pas à la structure du site.

Il n'y a pas de fil d'ariane dans les deux exemples présentés.

Dans une autre catégorie: le fil d'ariane est également utilisé par le navigateur d'Ubuntu (Nautilus). Il donne un aperçu de la structure hiérarchique des répertoires.

Vous aurez remarqué que les sites commerciaux utilisent de préférence un fond blanc ou clair: nous n'avons rien à cacher. Un petit exercice pratique: consultez le site web de vos concurrents, et analysez leur mise en page.

Et pour terminer, évitez les sites d'une page. Il y en a de très bien faits (une liste d'exemple et explicatif en français).

Les sites d'une page, même mal faits, sont idéaux si vous vous adressez à une clientèle très bas-de-gamme (vous vendez du sirop typhon pour maigrir, pour faire repousser les cheveux et pour augmenter le désir sexuel). Le visiteur n'a qu'une page à lire et vous risquez moins qu'il ne se perde en cours de route.