Section 4.2. Organizing the Layout

4.2. Organizing the Layout

Assume that you come up with a list of five areas for your layout: navigation, content, header, footer, and sidebar. Get out a piece of scratch paper, and let the doodling commence. Here are the rules:

Think in rectangles

Not to jump ahead too much here, but both of the major methods for web layouttables and layersare based on rectangular areas, so don't think in terms of circles or triangles. Rectangles and squares are the shapes for you. All the elements of your designblocks of text, image files, Flash moviesare rectangular also, so they'll fit perfectly into the corners and along the sides of your layout.

TIP

Because of the rectangular nature of HTML elements, you might use graph paper to sketch your design.

Don't superimpose areas

Your areas shouldn't overlap, and you shouldn't put one area inside another. In the case of tables, overlapping areas are technically impossible. In the case of layers, overlapping areas are possible but not desirable, because you can easily obscure valuable content.

The areas should butt against each other

Don't leave any alleys or corridors of whitespace between the areas. You'll add the breathing room later.

Use all available space

Don't leave any holes in the layout. Your areas should cover the entire web page.

Place the most important areas toward the top of the layout

A web page reads like a newspaper: you always lead with the most important stuff. The logo for your business falls into this category, as do advertisements and especially your navigation.

TIP

To help you make the best use of space, start by drawing a large rectangle to represent the browser window. Then, divide it into smaller rectangles to represent your areas.

Keeping these suggestions in mind, you may come up with a layout for your site that looks something like Figure 4-1. It's equally possible that what you draw is closer in spirit to Figure 4-2.

Figure 4-1. This is a classic side-nav layout

Figure 4-2. This is a classic top-nav layout

TECHTALK

In a side-nav layout, the navigation area runs down the side of the page. In a top-nav layout, the navigation area stretches across the top of the page.

The sketch in Figure 4-1 is a side-navigation or side-nav layout, because the navigation area runs down the side of the page. By comparison, in Figure 4-2, the navigation area runs across the top of the page, so you have a top-nav layout. Side-nav and top-nav are the two most common layouts on the Web, and for good reason. Whether by instinct or repetition of experience, your visitors tend to look for the navigation along the side or at the top of the page. Whatever the cause, it makes good sense. The steering is always easy to find in a very convenient place on the screen. Better still, when your visitors want to focus on the content, their eyes can scan the middle of the page and ignore the navigation entirely.

4.2.1. Looking at Side-Nav Layouts

In a side-nav layout, the navigation choices sit one below the other, usually at the top of the navigation area. This stack of five or six items doesn't usually add up to too much height, so side-nav layouts tend to offer a healthy amount of built-in whitespace. The extra visual buffer helps to distinguish the navigation area from the others in the layout, which makes your design more usable.

TIP

Another consideration for side-nav layouts is that the side of the page that feels more natural for navigation depends upon cultural and biological factors. Right-handed people, and people who come from cultures where written language is read from left to right, prefer navigation down the left side of the page. Left-handed people, and people who read from right to left, like their navigation on the right. If you expect to have visitors from both groups in large numbers, then a side-nav layout might not be the best choice.

At the same time, you can see by comparing Figure 4-1 and Figure 4-2 that the content area in a side-nav layout isn't as wide as the content area in a top-nav layout, because the navigation area sits beside it and therefore accounts for a certain portion of the width of the page. A narrower content area means that less content fits inside it before the visitor has to scroll. Especially in the case of Figure 4-1, where the links area takes away additional width from the content, you have to be careful about what kind of content you plan to add to your pages. Text and typical images should fit without incident. Your visitors will probably get vertical scrollbars, but that's all right. Scrolling vertically, up and down the page, is fine. There's really no avoiding it. But if the contentan image, for exampleis wider than the available space, the visitor gets horizontal scrollbars in the browser window, which you should avoid at all costs. You may consider switching to a top-nav layout, or maybe you can do without the sidebar area in your current layout.

BEST BET

The navigation area in side-nav layouts is often easier to use, but be careful about the kinds of content that you add to your pages. Wide images and the like may generate horizontal scrollbars.

4.2.2. Looking at Top-Nav Layouts

When the navigation area runs across the top of the screen, it doesn't compete with the content area for page width, which means that your content is less likely to generate horizontal scrollbars in the browser windowsa definite advantage.

The main drawback of top-nav layouts is that the navigation choices run horizontally, one beside the other instead of one below the other, which isn't particularly efficient. If you string together too many navigation choices, you can push up against the width of the page, and you risk getting horizontal scrollbars anyway.

To reduce the likelihood of horizontal scrollbars, you have two remedies:

Shorten the names of the navigation choices

Go for quick, few-syllable names like Store instead of Browse Our Catalog.

Design the navigation to be small

Build small graphical buttons or use small text hyperlinks in your navigation area. Be careful, though! If your navigation becomes too small, you risk overwhelming it with the rest of the layout, and your visitors might lose their bearings.

BEST BET

Top-nav layouts leave more page width for the content area, but the navigation choices can't take up much room, or you increase the likelihood of horizontal scrollbars.

If neither of these options seems to work for your site, then you might reconsider a side-nav layout.

TECHTALK

The main navigation is the primary method for getting around your site.