Section 4.4. Taking Measurements

4.4. Taking Measurements

The width of the visitor's monitor screen is a key consideration, because it directly affects the width of your layout. Unfortunately, this measurement is completely out of your control. Your visitors decide what size monitors they buy, what screen settings they pick, and whether they prefer to browse the Web with a fully maximized browser window. If your layout is too wide for the visitor's screen, then your site generates horizontal scrollbars, which are never good.

The best way to proceed is to make an educated guess. Table 4-2 lists common monitor settings and the corresponding widths for your layout. In each case, the layout width is less than the screen width to account for browser features like vertical scrollbars, which eat up some of the available screen real estate.

TECHTALK

A pixel is a very small, colored box. It is the smallest component of a bitmap graphicthe name is a contraction of picture element. It is also the standard way to measure lengths and widths in web design. On a typical Windows monitor screen, there are 96 pixels for every inch. On Macintosh monitors, there are 72 pixels per inch..

Table 4-2. Common screen widths

Screen width (in pixels)	Layout width (in pixels)	Comments
640	600	Safe for virtually any layout
800	760	The current standard width
1024	955	The new, emerging standard width

According to Table 4-2, if you want to be absolutely safe, you should design your layout to be 600 pixels wide. Nearly every device on the Web today can handle 640-pixel displays (with the notable exception of MSNTV, formerly WebTV, which holds firm at 544 pixels). However, most visitors have enough computing power to go beyond 640-pixel screens, and 600 pixels across doesn't leave you much room for design, so the 760-pixel layout has become the standard width. It accommodates the vast majority of people browsing the Web.

Computers manufactured within the last four years tend to display at 1024 pixels (or higher), so as long as your audience isn't using antique hardware, 955-pixel layouts are generally fine. Don't push past 955 pixels, though. While many of your visitors wouldn't have a problem with higher screen widths courtesy of their brand new or high-end computers, those who have older or less prime equipment probably make up the greater part of your audience.

TIP

Even if your visitors can handle layout widths of 955 pixels, you might want to consider 780 pixels anyway as a courtesy for those who prefer to surf the Web in unmaximized browser windows.

4.4.1. Looking at Fixed-Width Layouts

A fixed-width layout always keeps the same width, no matter the width of the browser window (see Figure 4-8). If you design your layout to a width of 760 pixels, then the width remains 760 pixels wide. Visitors with 640-pixel screens get horizontal scrollbars when they visit your site, while visitors with 1024-pixel screens or higher get fields of whitespace around your layout.

TECHTALK

A fixed-width layout always keeps the same width, no matter the width of the browser window.

The advantage to building fixed-width layouts is that the measurements of your areas are always pixel-perfect. You can calculate exactly where a specific element appears, which makes it easier for you to achieve more ambitious designs. It's also easier to create fixed-width layouts in Dreamweaver, because it takes fewer steps, and you have less to edit and troubleshoot.

The main disadvantage to fixed-width layouts is that they don't take full advantage of screen real estate for those visitors who happen to have wider displays. On the widest displays, your site can look cramped, which doesn't help in the usability department. As a workaround to this, many designers center their fixed-width layouts on the screen so that all the extra whitespace doesn't appear to one side. Instead, you get smaller fields of empty space on either side of the layout.

Figure 4-8. A fixed-width layout always retains its width

TIP

Another way to handle the abundance of whitespace in a fixed-width layout is to place a pattern image on the background of the page. The browser treats the background image like desktop wallpaper, automatically tiling or repeating it to fill up all available space. This way, the whitespace isn't completely empty, and if you choose a pattern that ties in with the graphical theme of your site, you can very easily approximate the look of a liquid layout.

4.4.2. Looking at Liquid Layouts

In a liquid layout, the width of the layout changes to match the width of the browser window (see Figure 4-9). As the width of the browser window expands, the width of your site expands in step. This solves the problem of cramped layouts handily, because you never get whitespace around your design. A visitor could come along with a 1,600 pixel-wide screen, and your layout would dutifully fill up the space.

TECHTALK

A liquid layout changes size to match the width of the browser window.

Liquid layouts begin as fixed-width layouts, in that you design your layout to fit within a certain size screen. Then, to enable the liquid effect, you specify that certain areas of your sitethe content area, for instanceshouldn't have a fixed size; they can expand as needed. The initial fixed width of your layout then becomes your minimum width. Go below this threshold, and you can anticipate horizontal scrollbars, because there might not be enough room in the browser window to accommodate all your content. But keep to the minimum width or exceed it, and the liquid effect works as advertised. You won't get horizontal scrollbars, and you won't leave fields of empty space.

Liquid layouts in general are easier for the visitor to use, but they can be difficult for you to implement properly, especially when the layout is design-intensive. Straightforward designs work best in liquid form.

Figure 4-9. A liquid layout expands to fill the width of the browser

4.4.3. Filling in the Details

After you've decided upon a width for layout, you can begin to assign pixel measurements to the individual areas, as Figure 4-10 shows. When in doubt, eyeball it. Your measurements don't have to be precise, your sketch doesn't have to be to scale, and you can always modify your numbers later. The purpose here is to give yourself a starting point for when you construct your layout in Dreamweaver. A few things to keep in mind:

Figure 4-10. Use pixel measurements to express widths and heights

Keep the most important content above the fold

The phrase above the fold refers to everything that appears in the browser window when the visitor first lands on the page. (The content that the visitor has to scroll down to see is below the fold.) Table 4-3 gives the above the-fold height for your page width of choice. In a 760-pixel layout, for instance, you have a maximum height of 420 pixels before content starts disappearing off the screen. Make sure that you have plenty of room above the fold for your main navigation and your best pieces of content. You may want to limit the height of your banner area, for instance, to make more room for the content area.

Table 4-3. Above-the-fold heights

Screen width (in pixels)	Above-the-fold height (in pixels)
640	300
800	420
1024	600

TECHTALK

Content that is visible without scrolling when the visitor first lands on a web page is above the fold. Everything else is below the fold.

These terms come from the newspaper business. Newspapers, of course, are folded lengthwise, which makes them easier to ship and stack. Back in the glory days, somebody figured out that putting the most compelling news and photos above the foldthat is, on the side of the fold facing potential customersincreases sales.

Make the content area as large as possible

The content area delivers the goods, so it should be the keystone of your layout. Feel free to trim down your navigation area or any other area that competes for screen real estate.

TIP

If you're planning a top-nav layout, pay special attention to the height of your nav area. Because the monitor screen is wider than it is tall, it's very easy for the navigation area to push the main content area below the fold. A height of 100 pixels is more than enough, and it might even be excessive, depending upon how you plan to present the main content.

Don't assign widths to liquid areas

If you're building a liquid layout, choose the areas of your layout that should expand with the browser. Typically, these are the content area, the header, and the footer. Don't assign fixed-width values to these areas. Label them with the asterisk (*) instead, which is web shorthand for whatever (see Figure 4-11). But definitely assign fixed widths to the non-liquid areas in your design, such as the navigation or sidebar areas.

Figure 4-11. Asterisk characters indicate variable width areas

Assign heights only to areas with fixed heights

The navigation area in a top-nav layout and the banner area are likely to remain fixed at a given height, so supply rough height measurements for these. On the other hand, the main content area of your design needs to expand vertically to accommodate the amount of content that you place inside it, so it doesn't have a fixed height value. The browser will automatically determine the correct height when it renders your page. Feel free to mark unfixed heights with the asterisk character, or simply ignore them.