Fixed vs. liquid design

The Web is a unique medium in that end users have
numerous different systems for viewing the web page. When designing for print, the
dimensions of each design are fixed, and although television resolutions are varied (PAL,
NTSC, HDTV), those designing for the screen work within a fixed frame—and regardless of
the size of the screen, the picture content is always the same.
In a similar fashion, it’s possible to design fixed-width sites for the Web. The earlier shot of
the Thalamus Books site is an example of this. Fixed-width sites are beneficial in that they
enable you to position elements exactly on a web page. However, because they don’t
expand with the browser window, fixed-width sites restrict you to designing for the lowest
common screen size for your intended audience, meaning that people using larger resolutions
see an area of blank space (or a background pattern).
You can get around this limitation by creating a liquid web design—one that stretches with
the web browser window. The benefit of a liquid design is that it’s irrelevant what resolution
the end user’s machine has—the design stretches to fit. The drawback is that you
have to be mindful when designing that web page elements move, depending on each end
user’s monitor resolution and/or browser window size. You therefore cannot place elements
with pixel-perfect precision.
Generally speaking, largely text-based sites tend to work best with liquid layouts, although
you have to take care to ensure the content area is always readable. (I’ve seen numerous
liquid sites where the text spans the entire web page width, which is tricky enough to read
at 8005600, let alone on larger monitor resolutions.) Sites that are largely image-based in
nature (such as portfolios and many online magazines) tend to work better as fixed websites.
For instance, for any site with fixed-width images at the top of text columns (common
for online magazines), the images would not sit snugly within the columns if the
layout were liquid, and could instead end up lost among large areas of whitespace.
Overall, though, there are no hard-and-fast rules and, despite what some designers might
claim, neither fixed nor liquid design is better than the alternative. You should use whatever
technique is suitable for each project you work on. Later in the chapter, you’ll see various
methods for creating strict, fixed layout skeletons, liquid designs, and combinations of
the two.