Planning Your Site Layout

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.