Datasheet

Conversely, fixed-width designs are often unkind to larger screen resolutions. When browsing at higher
resolutions and with a fully maximized window, a design optimized for smaller window sizes can be
drowned out by unused white space. Our users’ displays are constantly increasing, which makes fixed-
width designs less than future-proof — a site designed for the resolutions of today will likely need to be
revisited in a year or two, as its users clamor for a more intelligent use of the window widths available
to them.
Liquid Layouts
Proponents of liquid (or “fluid”) layouts are quick to counter that fixed-width designs set an unfair tech-
nical assumption on our audience: there is no guarantee that our user’s browser window is large enough
to accommodate the width specified in our design, and users with smaller windows should not be
penalized by the sites they visit. So, to that end, liquid layouts are designed to be entirely flexible. As the
browser window expands or contracts, the page’s layout will follow suit, ensuring that the content fills
the display at any window size (see Figure 1-10).
Most apologists for fixed-width techniques will say that their users’ screen resolutions have been
increasing over recent years, and that designing for smaller screen resolutions is no longer necessary.
Their server logs might tell them that an overwhelming majority of their users are running resolutions
such as 1024 × 768 or 800 × 600, and that building a design that caters to smaller screens is less vital than
it was in the early days of the Web. Designers on the other side of the debate will quickly counter with
the fact that screen resolution does not determine the size of the browser window. If a user’s screen resolution is
set to a specific width, the browser isn’t automatically maximized to occupy all of that space. By making
that assumption (and serving up a fixed-width design to match), designers can potentially exclude users
who browse at smaller window sizes, forcing them to resize their pages to meet the designer’s design
criteria. Instead, fluid layouts are agnostic when it comes to the size of the browser window. By defini-
tion, they attempt to subvert the design to the preferences of the user, rather than the other way around.
Of course, liquid layouts are not without their flaws— no design technique is a silver bullet, and this is
no exception. Just as it is easier to read text that has been divided into separate paragraphs, it is also
easier to read text that has been set to an optimal width. This is where most fluid layouts break down.
By allowing their content to reflow as the size of the browser window increases, that content can be
increasingly difficult to read at larger window sizes. Studies have shown that the user’s ability to
comprehend onscreen text suffers slightly when the length of the line being read exceeds 4 inches
(
http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm); so while a
fluid layout might be ideal for small-to-medium browser window widths (see Figure 1-11), legibility
can suffer quite a bit when the window expands beyond that threshold (see Figure 1-12).
25
The Planning and Development of Your Site
03_588338 ch01.qxd 6/22/05 11:18 AM Page 25