2.2. Préparer la mise en page de votre site

Objectif

Prévoir la navigation et la mise en page d’un site web, à la fois pour le mobile et pour l’ordinateur de bureau.

Prérequis

Section 1.3, « Concept : thèmes »
Section 2.1, « Concept : régions dans un thème »
Section i.6, « Scénario guide »

Étapes

C’est une bonne idée de prévoir la mise-en-page du site avant de commencer à construire le site et écrire du contenu ; cependant, votre plan devra peut être être revu avant de démarrer la réalisation ou après avoir construit le site et mis des contenus de test en place, à cause de problèmes de budget ou de retours de clients.

Faire une liste des informations que votre site devra présenter aux visiteurs. Dans le scénario du marché fermier, cela inclut :
- Localisation du marché, avec l’itinéraire et une carte
- Heures et jours d’ouverture
- Histoire du marché
- Liste des vendeurs
- Détail de chaque vendeur
- Liste des recettes avec recherche
- Détail de chaque recette
- Liste des recettes ajoutées recemment
Decider quelles informations seront sur quelles pages ou types de pages sur le site :
Informations qui doivent apparaître sur toutes les pages
Adresse, horaires, et liste des recettes ajoutées
Page de détail d’un vendeur
Information sur chaque vendeur sur sa propre page
Page de détail d’une recette
Détail de chaque recette sur sa propre page
Page d’accueil
Localisation, carte, itinéraire, et horaires
Page À propos
Histoire du marché
Page de la liste des vendeurs
Liste des vendeurs, avec les liens vers les pages de détail des vendeurs
Page de la liste des recettes
Liste des recettes avec recherche, avec des liens vers les pages de détail des recettes
Décider quelles informations sont les plus importantes sur chaque page. Les visiteurs du site qui utilisent leur smartphones ou d’autres petits écrans ne verront souvent que le contenu présenté en premier, et ils pourraient ne pas descendre dans la page pour voir toutes les informations.
Décider lesquelles pages doivent apparaître dans le menu principal du site. Par exemple, le menu principal devrait contenir les pages Accueil, À propos, Vendeurs et Recettes.
- Faire une esquisse de design pour chaque page, montrant à quoi cela ressemblera affiché sur un petit écran comme un téléphone, mais aussi sur un écran plus grand comme celui d’un ordinateur. Considérant que la plupart des visiteurs du site utiliseront un petit écran, c’est une bonne idée de commencer par la mise en page pour un écran d’ordiphone, pour s’assurer que chaque visiteur sera capable de trouver l’information dont il a besoin sans trop descendre dans la page.
  En faisant ces plans de mise en page, vous pourriez vous apercevoir qu’il est nécessaire de revoir votre prévision pour l’organisation des informations sur chaque page. Par example, vous pourriez décider que l’adresse, les horaires et la liste des recettes ajoutées rentreraient bien dans la colonne de droite de toutes les pages, quand le site est affiché sur un écran d’ordinateur. D’un autre côté, vous pourriez décider que pour les mobiles, vous devriez à la place mettre l’adresse et les horaires dans un petit format en haut de toutes les pages, et faire apparaître la liste des recettes récentes en bas de la page d’accueil.