A Complete Guide to Web Design

Fixed versus Flexible Web Page Design 19

DisplaysA Variety of

Fixed versus Flexible Web Page Design

Web Design in a Nutshell, eMatter Edition

of contrasting hues, they are close enough in overall brightness that the text will
be illegible when the colors are displayed on a grayscale monitor.

Monitors also vary in the brightness of their displays, known as thegammavalue.
PC monitors tend to be much darker than Macintosh monitors, so colors that are
deep and rich when created on a Mac may look black when displayed on a PC.
Likewise, graphics created on a PC may look washed out when viewed on a Mac.
Gamma is discussed further in Chapter 3.

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.
Naturally, there are good reasons for and against each approach.

You may find that you choose a fixed structure for some sites and allow others to
be flexible. You may find that you 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.

Flexible Design

Web pages are flexible by default. The text and elements in a straightforward
HTML file will 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 the 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 with-
stand stretching and shrinking web windows. This approach comes with
advantages and disadvantages.

Advantages

• The reality is that web pageswillbe displayed on a variety of monitor resolu-
  tions and conditions; keeping the page flexible allows it to be “customized”
  for every display.


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


• Designing flexible pages is closer to 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.

Disadvantages

• On large monitors, the text line length can get out of hand when the text fills
  the width of the browser. Long lines of text are particularly uncomfortable to