Structure du site Web

 Dessine moi un site web

 Un site web est tout sauf un flyer. Il a son langage, ses usages et demande une discipline à part de son concepteur.

 

Les bases de la construction d’une page Web

Il existe évidemment des tas de façons de construire une page web, mais on peut distinguer souvent une même structure générale en 3 parties.

Nous les commenterons dans le sens de la lecture (de haut en bas et de gauche à droite).

structure page web

LE HEADER : L’ENTETE

l’élément d’en-tête de la page, dissocié du corps du texte.
Le header, contrairement au corps de page qui change d’une page à l’autre, est un élément fixe qui reste le même quelque soit la page où l’on se trouve.

D’ailleurs lorsqu’on développe un site web, le header sera créé sur un fichier distinct ( header.php )
Le header se compose (le plus souvent) :

> du logo et de sa baseline ( repère identitaire de la marque )

la baseline étant le slogan ou la phrase qui anime la marque

, exemple pour Nike Just do it et pour SNCF : A nous de vous faire préférer le train

 

> d’une navigation web qui permet de se repérer et d’accéder aux différentes pages du site.

Elle est en général placée dans le header en haut de page ou à gauche du site afin que le visiteur puisque y avoir accès très facilement.

Le header est donc l’élément visuel le plus important de la structure d’une page web grâce à son positionnement dans la page (tout en haut) et par ce qui le constitue (le logo et la baseline : identité visuelle et textuelle de la marque ainsi que la navigation principale.)

LE CONTENT / CORPS DE PAGE :

C’est la partie où l’on intégrera tout le contenu, il sera constitué du titre, sous-titre (si nécessaire) et des paragraphes, images qui constituent la page sur laquelle on est.

A la différence du header, celui-ci varie d’une page à l’autre.

On veillera tout de même à préserver un style et une structure de contenu, homogène sur toutes les pages.

LE FOOTER :

Le pied de page qui se trouve en bas du site. Comme le header, il restera le même quelque soit la page du site que l’on visite.

Il sera constitué généralement de la signature du site web et aussi d’unenavigation, beaucoup moins essentielle que celle du header mais qui présente l’avantage d’être présente sur toutes les pages (on y trouve principalement les mentions légales, les conditions générales de vente et le plan du site. )

 


 

Structure de l'info

Une information bien structurée.

Si votre site web n'est pas bien organisé et que l'internaute ne trouve pas ce qu'il veut, il suppose que l'information n'existe pas. Il risque d'abandonner sa recherche et se tourner vers un autre site.
 
Pour éviter cela, les informations doivent être bien rangées de telle sorte que les internautes les trouvent facilement. C'est comme dans la vie réelle, les affaires mal rangées se retrouvent difficilement. Mais si les informations ne sont pas présentes l'utilisateur doit aussi pouvoir s'en rendre compte rapidement.
 
Lorsque des internautes s'expriment de la façon suivante : "Je ne trouve rien sur ce site", "je suis perdu", Où est-ce que je peux trouver cela", c'est qu'aucune structuration sérieuse des contenus n'a été faite. Il faut donc aider les internautes à trouver ce qu'ils cherchent.
 
Structurer l'information s'effectue en général en 4 étapes :
 
  1. Lister tous les contenus d'un site web
  2. Organiser les contenus par catégories
  3. Structurer l'information
  4. Réaliser un plan de site appelé aussi arborescence d'un site web
 

1. Lister tous les contenus d'un site web.

Il faut se placer du côté utilisateur du site. Il s'agit d'une évidence, mais il est important de le rappeler. Avant de commencer la réalisation d'un site Internet, il est primordial de lister l'ensemble des contenus que l'on veut voir apparaître.
 
Se placer uniquement du côté fournisseur d'information est une erreur car c'est le meilleur moyen de présenter des contenus web, certe intéressants pour le concepteur du site mais parfois sans intérêt pour l'utilisateur.
 
Bien souvent on s'attache à la réalisation du design graphique avant même d'avoir imaginé les contenus d'une page web, c'est comme si l'on souhaitait poser les papiers peints sur des murs qui n'ont pas été encore construits.
 

2. Organiser les contenus par catégories.

 
La meilleure organisation des contenus web consiste à regrouper les informations et à les agencer afin de faciliter la navigation, toujours d'un point de vue utilisateur.
 
Cela consiste à ranger les éléments dans des catégories : ranger ensemble ce qui se ressemble, séparer ce qui est différent.
Cette organisation est faite pour simplifier les choses.
 
Une approche intéressante pour bien organiser le contenu d'un site consiste à prévoir les actions et cerner le comportement des internautes, comprendre comment ils vont aller chercher l'information en fonction de leurs besoins.
 
Plusieurs critères peuvent permettre de regrouper les informations dans des catégories comme par exemple :
 
  • alphabétique : liste d'artistes sur des sites de musique.
  • chronologique : calendrier d'une saison sportive pour un club de rugby.
  • géographique : localisation d'une destination de vacance sur des sites de voyages.
  • thématique : pièces ou billets pour un site de collectionneurs.
  • par tâches utilisateur : acheter, vendre pour un site immobilier.
  • par cible utilisateur : étudiants, chercheurs, entreprises... pour une université.
 

3. Structurer l'information.

Il reste ensuite à hiérarchiser ces catégories pour mettre en valeur certains contenus web, rendre prioritaire ou faciliter l'accès aux informations et établir des connexions entre-elles.
 
C'est une phase très importante qui permet de garantir une navigation optimisée pour les internautes.
 
Certains éléments sont plus importants que d'autres. Cette hiérarchie apparaît dans les menus de navigation qui en découlent.
 
 
 
Dans la hiérarchisation de l'information, il ne faut pas oublier les rubriques incontournables : l'accueil, le plan du site, les mentions légales, les contacts...
 
Pour ces rubriques, les internautes ont acquis une expérience utilisateur et comme sur l'ensemble des sites, le bouton d'accueil est le premier dans la liste du menu de navigation. Si vous le placez au milieu de la barre de navigation, les utilisateurs seront perdus, et il est fort à parier qu'ils ne le trouverons pas. Il faut capitaliser sur l'expérience des internautes, car en général, ils s'attendent à retrouver sur votre site les mêmes modèles de fonctionnement que sur les autres sites.
 
Il ne faut pas oublier qu'un site n'est pas statique. Il évolue au fil du temps. La structuration de l'information peut être modifiée en fonction de l'actualité, mais aussi en fonction des saisons comme dans l'exemple de Florajet.com, ci-dessus ou le menu indique : "1er mai : offrez du muguet".
 

4. Réaliser un plan de site appelé aussi arborescence d'un site web.

L'étape finale consiste à réaliser l'arborescence, sous forme de graphique.
 
Parfois elle est aussi schématisée sous la forme de dossier / répertoire comme les différents dossiers et fichiers en informatique présent dans l'explorateur d'un ordinateur.
 
Elle représente les différentes rubriques, les différentes pages et les relations existantes entre elles. A l'aide de rectangles pour les rubriques et de flèches pour les relations, l'arborescence décrit l'organisation et le contenu d'un site web.
 
Elle permet de bien comprendre les différents niveaux de navigation. On parle de largeur, pour le nombre de rubriques accessibles depuis la page d'accueil, et de profondeur pour le nombre de sous-rubriques accessibles depuis une rubrique.
 

Les CMS libres

  • Joomla!

    Joomla! est un CMS Open Source sous licence GNU GPL, très répandu. L'installation est facile, ne demandant que le trousseau d'accès au serveur MySql. L'utilisateur découvre un site préconfiguré avec des exemples de contenus structurés et un back-office qu'il peut

  • 1
  • 2
  • 3

Prenez contact

 Openspice
 Via formulaire
 +33686574003
 +33367083077
 FRANCE
 Strasbourg

Gardez contact