Pattern 26: Three-region layout **
AKA: Grid layout; tiled working surfaces (Tidwell); repeated framework (Tidwell)

You have attempted to CLASSIFY YOUR SITE (11). You are aware of the need to FOLLOW STANDARDS (36) and exploit PRIMING AND INTERFERENCE (18). You have a SITE MAP (12). You have positioned the SITE LOGO AT TOP LEFT (24) and begun thinking about the NAVIGATION BAR (25).

How can a user, arriving at you site’s home page, or any other of its pages, determine where they are in the site, what content is available and what other pages there are to visit?

Therefore

Layout the home page and possibly other pages as a grid. Start with three basic sections: a navigation and brand section usually across the top, a service navigation bar on the left or right and the page content. Use separate table where possible and avoid nesting tables with out good reason.

Next, make sure that you use MAGIC MARGINS (60). Apply this pattern in parallel with BREADCRUMBS (23) and NAVIGATION BAR (25). Make sure you render CONTENT BEFORE GRAPHICS (55).

Contributors and sources
Veen (2001) calls this pattern Three-Panel Layout; Cato (2001) refers to it as Grid Layout, which is more general implying, as it does, more than three areas.

The layout of a magazine or newspaper tells its reader quickly where key information is and where to start reading about it. Headlines stretch exactly across the articles they refer to. Sidebars highlight important content and provide indices to it. One reason that this works is that people are used to it and exploit transfer effects, as described in PRIMING AND INTERFERENCE (18). Similarly, many web sites are laid out in a very similar way to the picture above, so that users know quickly what to do when they arrive at a site laid out in this way

Three-region layout is very common on web sites and people will be able to recognize it and benefit from transfer effects. The usual layout is shown in the figure above.

The navigation and brand information is usually shown at the top and may include advertising. This is often the best place to locate the SEARCH BOX (14). This shows the user where they are and how they got there. The service bar is usually on the left but could be right justified provided that you use MAGIC MARGINS (60). This shows the user where they might go next. Content occupies the central panel and will usually display the page name and various headlines. This shows the user what they have found.

If you need more regions than three then so be it – but try to do it with three first.

If you design the three (or more) regions using just one table the browser will have to download all the HTML before it can begin to render it on screen.

Making the site logo and top navigation bar (with the search box of course) into a separate table will mean that the user can get a much faster sense of location and even get on with searching the site without waiting for the page content to arrive.

Browse the language	What is Wu?	Look at an example pattern sequence	Structure of the patterns
Comment on Wu	Contributors	Return to TriReme home page	Links to related sites