I1 Grid Layout  

A major step in creating a PAGE TEMPLATE (D1) is designing a clean grid layout, one that will give your Web pages structure and coherence. This pattern describes grid layouts and how to create one. You can use this pattern in conjunction with ABOVE THE FOLD (I2), CLEAR FIRST READS (I3), EXPANDING SCREEN WIDTH (I4), and FIXED SCREEN WIDTH (I5) when you're designing a page template.

Problem

It is difficult to organize the many competing elements of a Web page in a cohesive manner without creating clutter and overwhelming the reader.

Solution

 Create a grid layout that you can use to organize all of the elements on a Web page. Sketch out multiple grid layouts to see if they can accommodate the most important navigation and content elements. Run usability tests on the grid layouts by greeking the navigation and content, and determine if customers can guess the elements solely on the basis of position and layout.
   

The Environmental Protection Agency's Web site has a strong grid layout. The navigation bar runs along the left side, and features like Recent Additions and Search run along the top. The main content is in the center, and relevant side content is on the right.

Advantages

Grid layout is a technique from graphic design used for organizing page layouts for newspapers, magazines, and other documents. It can also be used to organize the content of your Web pages. In a grid layout, a page is divided into rows and columns, and every element is made to fit within this grid. Constant design elements, such as titles and logos, always appear in the same place, giving a consistent theme to every page.

There are three advantages to using grid layout:

  1. It gives your entire Web site a coherent visual structure, making it easier for your customers to predict where they'll be able to find elements such as page titles, NAVIGATION BARS (K2), and CONTENT MODULES (D2).
  2. It reduces clutter and gives your site visitors strong visual cues to follow, making things easier to find and text quicker to read.
  3. Once it has been designed, your design team can reuse it, giving them more time to focus on content development instead of reinventing the wheel. They can place new content into the right place in the grid every time.
Guidelines

Identify the Elements That Are Common Throughout Your Web Site. Decide which elements are essential and which are common to the majority of your pages, such as the logo, NAVIGATION BARS (K2), SEARCH ACTION MODULES (J1), PRIVACY POLICY (E4), and CONTENT MODULES (D2) containing news items, stock quotes, travel information, and sports scores. Use these elements to anchor the structure of your Web pages.

 

Sketch Out Grid Layouts That Incorporate the Common Elements. Rough out several grids that combine the basic elements of your Web site in a design that you can use consistently. Group related items together; keep unrelated items separate. Keep in mind that people have already developed expectations about where certain design elements will appear. For example, research conducted at Wichita State University suggests that people expect links to the SHOPPING CART (F3), ACCOUNT MANAGEMENT (H4), and CONTEXT-SENSITIVE HELP (H8) to be at the top right; a SIGN-IN/NEW ACCOUNT (H2) link to be near the top left; and a clickable logo that leads back to the HOMEPAGE PORTAL (C1) to be in the top left corner.

   

Align the navigation and content on your Web pages in a grid layout.

 

Create Sample Web Pages and Get Feedback. Use your sketches to create rough Web pages, and test them for usability with your customers. See if the placement of your elements makes sense to them. “Greek” the text by changing it to nonsense words, and see if your customers can still guess the basic elements of the Web site on the basis of position and layout.1 Use this feedback to fix potential errors early in the process, when they are still easy to correct. [For more information on getting feedback in usability tests, see Appendix A (Running Usability Evaluations).]

Indicate related elements, either by grouping them near each other or by making them similar in size, color, and font. Leave proper spacing between unrelated elements. For example, visually separate your navigation from other images and the main text. Thin lines can also be used to emphasize elements.

1 Most Web designers use a variation of a poem for greeking. It starts with “Lorem ipsum dolor sit amet.” Oddly enough, this poem, written in Latin, historically has always been quoted incorrectly.

 

Study How Other Web Pages Implement Their Grids. If you understand how other Web sites use and implement their grid layouts, you will find it easier to implement your own. Many older Web pages use HTML tables for grids, making them quite easy to reverse-engineer. Go to a Web site and save one of the pages in a text editor. Find every instance of border=”0” and change it to border=”1” . Now you're ready to open the local copy of the Web page in your Web browser. You should be able to see the overall grid and how each individual element fits in. Doing this for newer Web sites that make use of XHTML and/or STYLE SHEETS (D11) is just as easy. First save the entire Web page, including images and style sheets. Then open the Web page in a text editor, go to the bottom of the Web page, and add the HTML lines shown in Figure I1.2. Once you save your changes and load the file into your Web browser, you should see a thin border around and <div> and <table> elements in the Web page, making it easy to see how the grid layout is set up.
   

When this code is added to your pages, it lets you view all the <div> and <table> structures.