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.