home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

2.2. Fixed Versus Flexible Web Page Design

Closely related to the issue of varying monitor resolutions is the question of whether web pages should be designed to be flexible (resizing and adapting to various window sizes) or fixed at a particular size (giving the designer more control of the page's dimensions). There are very strong opinions on both sides, and there are good reasons for and against each approach, naturally.

Figure 2-1Figure 2-1

Figure 2-1. Browser and system measurements

You may find that you choose a fixed structure for some sites and allow others to be flexible, or you may have strong convictions that one or the other approach is the only way to go. Either way, it is useful to be familiar with the whole picture and the current opinions of professional web designers. This section attempts to present a balanced overview of the possibilities and the pitfalls.

2.2.1. Flexible Design

Web pages are flexible by default. The text and elements in a straightforward HTML file flow into the browser window, filling all available space, regardless of the monitor size. When the browser window is resized, the elements reflow to adapt to the new dimensions. This is the inherent nature of the Web. Designers who are initially traumatized by the unpredictability of where page elements land usually just learn to let go of some control over the page.

Many designers make a conscious decision to construct pages so they can adapt to stretching and shrinking browser windows. This approach comes with advantages and disadvantages. Advantages

The advantages of a flexible design include the following:

  • The reality is that web pages are displayed on a variety of monitor resolutions and conditions; keeping the page flexible allows it to be "customized" for every display.

  • Designing flexible pages is in keeping with the spirit and the nature of the medium. A "good" web page design by these standards is one that is functional to the greatest number of users.

  • The whole window is filled, without the potentially awkward empty space left over by many fixed-width designs.

  • You don't need to worry about choosing a target monitor resolution. Creating flexible pages

As noted previously, simple HTML files are flexible by default, so you don't need to do anything special to ensure flexibility. However, you can format your page layout and content using relative measurements so that elements resize in proportion to one another.

Tables and frames can be used to give the page a flexible structure. Tables are often used to create columns of text and to divide the page into logical sections. By using relative (percentage) measurements for tables and cells, the table resizes with the browser window; however, the columns and elements remain proportional to one another. For instance, two columns with widths of 25% and 75% always retain those proportions, regardless of the table size. Sizing tables is discussed in Chapter 13, "Tables".

Frames can also be used to add structure to a flexible design. They, too, can be specified with percentage values or to automatically fill any remaining space in the window. For instance, two frames with widths of 25% and 75% always retain those proportions, regardless of the size of the window in which they are displayed. The contents within each frame flow to fill the frame. Frames are discussed in Chapter 14, "Frames".

The size of the content (text size, margins, images, etc.) can be set to relative sizes using Cascading Style Sheets. For instance, style sheets allow designers to specify measurements in ems, a unit used in printing to refer to the width of one capital letter "M". On the Web, an em translates to the font size; in other words, an em unit in 12-point text will be 12 points square. Using em measurements for text height, line length, leading, etc. ensures that page elements will scale proportionally with the user's chosen text preference. See Chapter 17, "Cascading Style Sheets" for more information on using style sheets.

2.2.2. Fixed Design

If you want more control over the layout of a page, you may opt to design a web page with a fixed width that stays the same for all users, regardless of monitor resolution or browser window size. This approach to web design is based on design principles learned in print, such as constant grid, relationship of page elements, and comfortable line lengths. Advantages

These are the advantages of fixed design:

  • The basic layout of the page remains the same regardless of monitor size. This may be a priority for companies interested in presenting a consistent corporate image for every visitor.

  • Fixed-width pages and columns provide better control over line lengths. Tables can be used to prevent line lengths from becoming too long when the page is viewed on a large monitor. Disadvantages

Consider also these disadvantages:

2.2.4. Choosing a Page Size

Obviously, if you decide to design a fixed web page, you need to make a decision regarding which screen size you want it to fit. Common sense dictates that the page should be accessible (and display properly) to the greatest possible number of people. The idea is to find the most common monitor resolution and design pages that safely fill its live space. 640 480 versus 800 × 600

Although finding the most common monitor resolution sounds fairly simple, there remains some controversy over which resolution is the safest. Over the past few years, the number of users with 800 600 monitors or higher has grown substantially, leading many designers to believe that it is perfectly safe to create web pages that fill the 800 600 monitor live space. Other designers disagree, maintaining that 640 480 monitor users should still be taken into consideration. The conventional wisdom

Because approximately 92% of users view web pages at resolutions of 800 600 or higher, professional web designers tend to consider 800 600 to be the standard web page size, as of this writing. More and more commercial web sites are being designed to these specifications. (Very few designers create pages for 1024 768 resolutions or higher.)

However, the low-end 640 480 monitor users are not being written off entirely. Even the small percentage of users with 640 480 monitors translates to millions of viewers.

Again, knowledge of your audience can help you make your design decision. For instance, if you are designing an online resource for graphic designers, you can be certain they will be using 800 600 pixel monitors or higher. An 800-pixel page width is also fairly safe for sites targeting other professional groups because office hardware is more likely to be upgraded regularly. However, if you are designing an educational site to be viewed in schools that may not have the budget for state-of-the-art hardware, the lowest-common-denominator 640 480 is a safer bet. The same goes for sites that are likely to be viewed in households, libraries, or other institutions where older hardware setups are still in use.

Remember that it is possible to use HTML and Cascading Style Sheets to design flexible pages that will resize to fit any window size. You don't need to choose one size or another.

If you are designing a site especially for WebTV (with its particularly small window size) or some other display device, you should follow the appropriate guidelines for those devices. And, as always, test your designs in as many monitor configurations as you can get your hands on to see how your page holds up under diverse conditions.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.