WEB STANDARDS CREATIVITY

210
Different layouts
for different needs
As the Internet becomes more pervasive, users are beginning
to access web pages from a greater number of
devices—laptops, desktops, PDAs, mobile phones, fridges
. . . who knows what’s around the corner? And with each
new device comes a different design constraint. Mobile
phones certainly don’t have the screen space that a desktop
computer has, so the way that users can—and
should—view content will be vastly different.
Even on the same device, different users have different
needs. Visitors come to your site to do different things,
and your interface should be able to accommodate all of
them. You want to be able to provide users with the optimal
experience for their chosen device and purpose.
This chapter explores techniques for dealing with these
design problems using JavaScript and CSS. I call these
dynamic interfaces. We’ll look at creating two types of layouts:
resolution-dependent layouts and user-controlled
modular layouts. All the source files for the examples are
available to download from www.friendsofed.com/.
Resolution-dependent layouts
It’s quite obvious that different devices have different display
capabilities. Nowhere is this more apparent than
when comparing mobile devices, such as PDAs, with their
desk-locked cousins. The resolution on a PDA can be as
low as 240✕320, whereas a desktop monitor can go up to
2048✕1536 and beyond. Even on desktops, the variance
in resolution is astounding. Your parents could be browsing
on a (now prehistoric) 800✕600 system, while your
power-user sister is on a 1280✕960 screen. The difference
between the two is huge, with an over 150% increase in
available area. And the design requirements for each are
equally different. Throw widescreen and dual-screen systems
into the mix, and the possibilities explode.
With such large differences, it’s no longer viable to say,
“Well, just create a fluid layout that stretches for all resolutions.”
What we are talking about here is a fundamental
difference in the way a page should be laid out. More
information is going to be visible to someone with a
higher resolution, so your design should take this into
account. Less information will be visible to someone with
a lower resolution, and your design should also be able to
handle that.