[[planning-layout]]
=== Planning Your Site Layout

[role="summary"]
How to plan the navigation and layout of a website (mobile and desktop browsers).

(((Planning,site layout)))
(((Site layout,planning)))
(((Layout,planning)))

==== Goal

Plan the navigation and layout of the site, for both mobile and desktop
browsers.

==== Prerequisite knowledge

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

// ==== Site prerequisites

==== Steps

It is a good idea to plan the site layout before you start building
the site and writing content; however, your plan may need to be revised either
before you start implementing it or after you have some of the site built with
draft content in place, based on budgetary concerns or stakeholder feedback.

. Make a list of the information that your site should present to visitors. In
the farmers market scenario, this might include:
+
  * Location of the market, with directions and a map
  * Hours and days the market is open
  * History of the market
  * List of vendors
  * Details about each vendor
  * Searchable list of recipes
  * Details about each recipe
  * List of the most recently added recipes

. Decide which information should be on which pages or types of pages on the
site:
+
  Information that should be on all pages::
    Address, hours, and recently-added recipes list
  Vendor details pages::
    Information about each vendor on its own page
  Recipe details pages::
    Details of each recipe on its own page
  Home page::
    Location, map, directions, and hours
  About page::
    History of the market
  Vendors list page::
    List of vendors, with links to vendor detail pages
  Recipe list page::
    Searchable list of recipes, with links to recipe detail pages

. Decide which information is the most important on each page. Site visitors
using mobile phones or other small browsers will often only see the content that
is presented first, and they may not scroll down to see all of the information.

. Decide which of these pages should appear in the main site navigation. For
instance, the main navigation might consist of the Home, About, Vendors, and
Recipes pages.

. Make a rough design sketch for each page, showing how it would look when
viewed on a small screen such as a phone, as well as on a larger screen such as
a desktop browser. Considering that most site visitors will be using smaller
browsers, it is a good idea to start with the phone-size layout, to make sure
that these visitors will be able to find the information they need without too
much scrolling.
+
In making these page layout plans, you might find that you need to revise your
plan for which information should be on which pages. For example, you might
decide that the address, hours, and recently-added recipes list would all fit
well in the right sidebar area of all pages, when the site is viewed on
desktop-sized browsers. On the other hand, you might decide that for mobile
browsers, you would instead put the address and hours in a short format at the
top of each page, but only display the recent recipe list at the bottom of the
home page.

==== Expand your understanding

<<planning-structure>>

// ==== Related concepts

// ==== Additional resources


*Attributions*

Written by https://www.drupal.org/u/jhodgdon[Jennifer Hodgdon].
