HTML and CSS Reference
In-Depth Information
Figure 7-2.
With the text notched up a few sizes, it soon runs out of room in the fixed-width layout.
A solution to this type of problem might be to enable the page to be more flexible; we
could, for example, have a fixed left navigation area but a flexible content area. However, this
approach presents its own problems: if you maximize the browser window, the line length of
the text becomes long and harms readability. See, it's not easy, is it? In this section, we'll look at
some examples. Which method is best is up to you to decide; they all have their own respective
merits. To aid with the comparison, we'll use an example page design—a simple, two-column
design with a header—and apply the various treatments.
The Fixed-Width Layout
The fixed-width layout is arguably the easiest of the layouts to achieve. You can, to some extent,
remove some of the what-ifs associated with web page design. A print designer knows what
dimensions they are designing for, but on a screen can you be so sure? Deciding on a fixed
width can level that playing field somewhat. The first issue to address is the page width you
should design for. We recommend aiming for a width of 770 pixels so that a browser running
full screen in a monitor at 800
600 pixels will be able to display the page without also showing
the Ugly Horizontal Scroll Bar of Doom.
Why 800
×
600? There are still many people out there who are running that resolution,
though admittedly the most common at the time of this writing is 1024
×
×
768 pixels. Given that,
if you make the layout work for 800
×
600, it's going to play nice on 1024
×
768. However, if you
design for 800
600 and someone with a monitor the size of a cinema screen and with a super-
high resolution is viewing your site, it may resemble a postage stamp. The key to getting it right
is this: know your audience. Get some stats and base your design decision on those. We'll assume
that 800
×
×
600 is what your stats people are telling you for now.
