WEB STANDARDS CREATIVITY

218
There are two major changes between the two layouts:
The content in the larger style is presented in four
columns across the page, whereas the smaller
style keeps the content in one column. A four-column
layout better uses the space at higher
resolutions and reduces the height of the page. At
smaller screen sizes, the columns become too narrow
to be useful, and so the single column
produces better content width.
The menus are positioned differently. When using
a horizontal menu, we often run into problems on
smaller screens as the number of menu items
increases. Eventually, they will wrap onto two lines.
To combat this, we change the orientation of the
menu from horizontal to vertical and position it
next to the content.
Both of these changes can be achieved relatively easily
using CSS, by modifying widths and floating elements. For
example, at 800✕600, each of the three main content
panels uses its default browser styling: a block element
spanning 100% of its container. To get them to line up side
by side in the 1024✕768 style sheet, we make them float
left and supply a width:
.panel
{
float: left;
width: 26.5%;
}
Both layouts use exactly the same HTML markup contained
in resolution.htm, so the style sheet changes are
the only ones you need to make.
Because an alternate style sheet is additive to the main
style sheet, we go ahead and code the 800✕600 style
sheet as we would normally—it will be applied no matter
what. To get our alternate wider style sheet, we extended
the basic styles. We don’t need to write an entirely new
style sheet; we’re just modifying and adding to the styles
that already exist.
As you’ll see in the downloadable files for this example,
the basic style sheet, main.css, weighs in at (a nicely
spaced) 442 lines. The alternate style sheet, wide.css, is
considerably smaller, at 190 lines.
To include both style sheets on our page, we use link
elements:
The main style sheet’s rel attribute is set to stylesheet,
so it will be applied to the page automatically. By setting
the alternate style sheet’s rel attribute to alternate
stylesheet, we indicate to the browser that it shouldn’t
be applied unless specified. It’s also important to include
a title attribute for the alternate style sheet, so we can
identify it later.
But how do we go about turning on the alternate style
sheet when we need it?
Turning on the style
We have a few options for offering this new resolutiondependent
style sheet to users, most of which are pretty
ineffectual:
Include the alternate style sheet in the HTML and
hope that the user is using a browser that allows
switching between alternate style sheets, and also
realizes that there is an alternate style sheet, and
then will bother to turn it on if it applies to him
(ain’t gonna happen).
Use an in-page style sheet switcher. Create a
widget on every page that allows the user to specify
what style she would like the page to be viewed
in (just like the one described by Paul Sowden in
his article on A List Apart, http://alistapart.
com/stories/alternate/). It’s a bit like the native
browser option, except it’s more visible and is
accessible to more browsers. However, in my
experience, users aren’t going to go out of their
way to change the default appearance of a page,
even if it’s going to benefit them.
Do it automatically. Supply the wider style sheet to
browsers that can handle it. Give the users the best
experience without them having to lift a finger.