WEB STANDARDS CREATIVITY

The trouble is that if you’re trying to make your design
one-size-fits-all, you’ll encounter irreconcilable differences.
At 1280✕960, four columns of text may produce the most
succinct, organized, and visible structure to your content,
but giving four columns to someone on an 800✕600 monitor
will just produce a squished mess. Conversely, a
single-column design that works quite comfortably at
800✕600 will look painfully stretched at 1280✕960.
Traditionally, one answer has been to simply limit the
width of a page—lock it at a fixed width that produces
nice, readable line lengths at a width of 800 pixels (or
your chosen base resolution) and anything above. However,
this is often unfairly constraining on those who are
taking advantage of better-quality technology. Users with
higher resolutions receive no benefit for their investment;
they just get more space on either side of the content.
Recent statistics (www.thecounter.com/stats/2006/
August/res.php) indicate that users with a screen resolution
of 800✕600 make up roughly 16% of the market,
about 55% have a resolution of 1024✕768, and about 21%
are on a higher resolution than that (the actual statistics
for any particular site will vary by audience). By designing
to a resolution of 800✕600, you’re punishing the majority
of your users for the circumstances of a minority, albeit a
fairly large minority.
So is there a way to give users with larger screens the
benefit of their hard-earned pixels without penalizing
those on lower resolutions? Yes, by providing different
designs to different sizes.
At first, this may sound like an inordinate amount of
work. But thanks to the flexibility of standards-based layouts,
it is quite possible—even easy—to use the exact
same HTML markup and provide different designs to different
resolutions by just changing the CSS.
As you can see by comparing the different layouts for
the UX Magazine (www.uxmag.com) and White Pages (www.
whitepages.com.au) websites, shown in Figures 9-1
through 9-4, the design aesthetics of a page do not have
to alter greatly in order to accommodate different
browser sizes. Most of the time, just a reorganization of
the major content areas is enough to create a more flowing
layout that maximizes screen real estate. Layouts
optimized for wider screens usually result in a decreased
page height, which brings more content above the fold,
allowing users to see more of the page without scrolling.
Assuming that your titles, menus, forms, and other website
accessories are coded using some nice, robust CSS,
they should all fit easily into either design.
chapter 9 Creating Dynamic Interfaces Using JavaScript
211