# Planning Your Site Layout

## Goal

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

* [Concept: Themes](/link/683)
* [Concept: Regions in a Theme](/link/689)
* [Guiding Scenario](/link/679)
## 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.

1. 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
1. 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
1. 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.
1. 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.
1. 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 your Content Structure](/link/693)
## Videos

[Planning Your Site Layout](https://www.youtube.com/watch?v=35e16QDFE7k)