Planning Your Site Layout
with Joe Shindelar This tutorial covers how to plan the navigation and
layout of your website for both mobile and desktop browsers. By the end of this tutorial you should have at least a
rough draft of a plan for the navigation and
layout of the site for both mobile and desktop browsers. This will help to inform future
decisions about which feature to use in order to achieve the
desired results. Before you get started with this tutorial, you want to make
sure you know what themes are and the role that they play
in a Drupal site, understand how Drupal uses
regions for block placement and that you've familiarized yourself with the Farmers Market
guiding scenario. You can find links to
more information in the written version
of this tutorial. Before you get started building your site,
it's a good idea to spend some time upfront
on planning. This will help you to make decisions
about which Drupal features to use and how to use them. Keep in mind that your plan may need to be revised as you go, based on draft content,
budgetary concerns or stakeholder feedback,
and that's perfectly fine. The goal here is to just get us
started thinking about what it is we're
trying to build. Start by making 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 that the market
is open, a brief history of the market, a list of vendors with details
about each vendor. Perhaps a searchable list
of recipes and a way to find recipes based on what's currently
in season as well as a list of the most
recently added recipes. From there, decide which information should be on which pages or
types of pages on the site. Some information like the
address, hours, and recently added recipes list
might appear on all pages. Each vendor will have a
details page that shows information
about that vendor. A recipe details page shows a complete recipe. The homepage with the
location, a map, directions, and hours
for the market. And an About page that contains
the history of the market. As well as listing pages for both
vendors and recipes so users can browse the list and
then click to get more details about a particular vendor
or recipe. Perhaps made searchable, so you
can, for example, list only recipes with a
specific ingredient. For each of these 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. And then decide which of these pages should appear in the main
site navigation. For instance, the main navigation might consist of home, about, vendors, and recipes pages. Finally, 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 small browsers, it's 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 the
desktop size 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 the page but only display the recent
recipe list at the bottom of the homepage. In this tutorial we started the process of
making a plan for our site. We listed the different pieces
of information we want to have available
on the site. And then we broke that up into
information about which pieces of information should appear on which pages in a draft list of both landing pages and detail pages. And then we created a sketch
of what a possible layout might look like on both mobile
and desktop devices. Remember, this isn't intended
to be a final specification but rather an exercise to help us begin to translate our ideas into the various tools
Drupal provides.
