Section 11.2. Types of Web Page Layouts

11.2. Types of Web Page Layouts

Being a Web designer means dealing with the unknown. What kind of browsers do your visitors use? Do they have the latest Flash Player plug-in installed? Perhaps the biggest issue designers face is creating attractive designs for different display sizes. Monitors vary in size and resolution: from petite 15-inch 640 x 480 pixel displays to 30-inch monstrosities displaying, oh, about 5,000,000 x 4,300,000 pixels.

Float-based layouts offer three basic approaches to this problem. Nearly every page design you see falls into one of two types fixed width , or liquid . A fixed width gives you the most control over how your design looks, but can inconvenience some of your visitors. Folks with really small monitors have to scroll to the right to see everything, and those with large monitors have wasted space that could be showing more of your excellent content. Liquid designs make controlling the design of the page more challenging, but make the most effective use of the browser window. An elastic design combines some advantages of both.

• Fixed Width . Many designers prefer the consistency of a set width, like the page in Figure 11-2, top. Regardless of the browser window's width, the page con-tent's width remains the same. In some cases, the design clings to the left edge of the browser window, or, more commonly, it's centered in the middle. With the fixed-width approach, you don't have to worry about what happens to your design on a very wide (or small) monitor.

  Many fixed-width designs are about 760 pixels widea good size for 800 x 600 screens (since you need to leave a little room for scrollbars and other parts of the browsers "chrome"). However, more and more sites ( especially ones aimed at a more tech-savvy crowd ) are about 950 pixels wide, on the assumption that visitors have at least 1024 x 768 monitors.

  ---

  Note: For examples of fixed-width designs aimed at larger monitors, visit www.alistapart.com, www.espn.com, or www.nytimes.com.

  ---

• Liquid . Sometimes it's easier to roll with the tide instead of fighting it. A liquid design adjusts to fit the browser's widthwhatever it may be. Your page gets wider or narrower as your visitor resizes the window (Figure 11-2, middle). While this type of design makes the best use of the available browser window real estate, it's more work to make sure your design looks good at different window sizes. On very large monitors, these types of designs can look ridiculously wide.

  ---

  Note: The max-width and min-width properties offer a compromise between fixed and liquid designs. See Section 11.4.3.

  ---

• Elastic . An elastic design is really just a fixed-width design with a twisttype size flexibility. With this kind of design, you define the page's width using em values. An em changes size when the browser's font size changes, so the design's width is ultimately based on the browser's base font size (see Section 6.2.2). If a visitor increases the size of the browser's display font (by pressing Ctrl-+ in Firefox, for example), then the page's width grows as well.

  Figure 11-2, bottom, shows an elastic page with the browser's normal font size (left) and several font sizes larger (right). Increasing the font size makes all page elements wider as well. Elastic designs keep everything on your page in the same relative proportions , and make sure that when someone with poor vision has to pump up the text size, the columns holding the text grow as well.

In the tutorials at the end of this chapter, you'll create a fixed-width design and a liquid design.