[[planning-layout]]
=== Préparer la mise en page de votre site

[role="summary"]
Comment préparer la navigation et la mise en page d'un site web (pour
navigateurs sur mobiles et ordinateurs de bureau).

(((Préparer,Mise en page du site)))
(((Mise en page du site,préparer)))
(((Mise en page,préparer)))

==== 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

* <<understanding-themes>>
* <<block-regions>>
* <<preface-scenario>>

// ==== Pré-requis du site

==== É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.

==== Améliorer votre compréhension

<<planning-structure>>

// ==== Concepts liés

==== Vidéos (en anglais)

// Video from Drupalize.Me.
video::https://www.youtube-nocookie.com/embed/35e16QDFE7k[title="Planning Your Site Layout"]

// ==== Pour aller plus loin


*Attributions*

Ecrit par https://www.drupal.org/u/jhodgdon[Jennifer Hodgdon].
Traduit par https://www.drupal.org/u/vanessakovalsky[Vanessa Kovalsky] et
https://www.drupal.org/u/fmb[Felip Manyer i Ballester].
