A Complete Guide to Web Design

20 Chapter 2 – Designing for a Variety of Displays

Fixed versus Flexible Web Page Design

Web Design in a Nutshell, eMatter Edition

read on a screen, so allowing the text to wrap the full width of the window or

frame risks poor reading conditions for some users.

• Elements float around on large monitors, making for a less coherent design
  that may be more difficult to use. Likewise, in very small monitors, elements
  get cramped together.


• The results of flexible design are unpredictable, and users will have varying
  experiences of your page.

Creating flexible pages

As noted above, simple HTML files are flexible by default, so you don’t need to do

anything special to ensure flexibility. However, you can introduce structure to a

flexible document by using tables and frames.

Tables are often used to create columns of text and to divide the web page up

into logical sections. By using all 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 monitor

on which they are displayed. Sizing tables is discussed in Chapter 10,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. The contents within each frame will flow to fill the frame. are discussed

in Chapter 11,Frames.

Fixed Design

Those who require more control over the layout of a page may opt to design a

web page with a fixed width that will stay the same for all users, regardless of

their monitor size or how the window is resized. This approach to web design is

based on design principles learned in print, such as maintaining a constant grid,

the relationship of elements on the page, and comfortable line lengths.

Advantages

• The web page will look the same regardless of the monitor size. This is often
  crucial 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

• If the available browser window is smaller than the grid for the page, parts of
  the page will not be visible and may require horizontal scrolling to be viewed.
  Horizontal scrolling is nearly universally considered to be a hindrance to ease
  of use, so it should generally be avoided. One solution is to choose a page
  size that will serve the most people, as discussed later in this section.