Goal
Plan the navigation and layout of the site, for both mobile and desktop browsers.
Prerequisite knowledge
- Section 1.3, “Concept: Themes”
- Section 2.1, “Concept: Regions in a Theme”
- Section i.6, “Guiding Scenario”
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
Section 2.5, “Planning your Content Structure”