i1

Grid Layout at a glance

Site Genre: Pattern Group i

magnify imageFigure I1.1 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.

Background

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.

Close

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.

buy the book to find out more

SOLUTION

magnify image Figure I1.3 Align the navigation and content on your Web pages in a grid layout.

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.

Other Patterns to Consider

Grid layout is one part of the PAGE TEMPLATE (D1) pattern. The three most important elements of a grid layout are NAVIGATION BARS (K2), SEARCH ACTION MODULES (J1), and CONTENT MODULES (D2). Grid layouts need to take into consideration which elements will be ABOVE THE FOLD (I2) that is, which elements customers will be able to see without having to scroll down. Design your layout to emphasize a CLEAR FIRST READ (I3) that is, the first element that visitors typically see on a page. Many of the items you place in the grid will be CONTENT MODULES (D2) containing dynamically retrieved content. One issue to consider is that these modules will vary in length, making it more difficult to have precise control over the layout of a Web page. In older Web sites, grid layouts are often implemented using HTML tables. Splitting large tables into SEPARATE TABLES (L3) can speed up the load time of these Web pages. For newer Web sites, we advocate using XHTML and STYLE SHEETS (D11) rather than using tables for layout.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.