Web page design: fixed width or stretchy?

A client recently asked a question about fixed-width web pages versus stretchy pages that go all the way across the page. As many clients do, he wondered about "all that blank space" on the screen.

First thing to know: There's a vast variety of monitor sizes and screen resolutions out in the world. The challenge for a web designer is to develop pages that are visible, attractive, and readable to the widest variety of folks out there.

Generally speaking, web designers have two choices when it comes to screen width: stretchy or fixed width.

I'm generally opposed to stretchy, though I've done it from time to time. Why am I opposed? Because a typical page with two sidebars and a content area will tend to stretch the content area unacceptably. The human eye has trouble reading/skimming very long line lengths. Also, those pages tend to get vertically ugly - with two long sidebars and a short (but very wide) content area.

Conversely, a fixed width page will tend to be more consistent across a wide variety of browsers and monitor sizes/resolutions. So, you can do more to ensure appropriate line lengths and usable navigation schemes with fixed widths.

Of course, once you've settled on the fixed option, there's the question: What width? The answer is to design for the smallest resolution that is used by a substantial number of people. For years, that was 640 pixels wide. Today, with under 1% of folks still on 640, we've moved (and most everyone has moved) to an 800 pixel width. Of course, the number of web visitors limited to 800 pixels is dropping (down to 21% at DailyKos.com, for one large sample) but it's still substantial - and thus important to design for that audience.

Important note: with all the browser chrome - buttons, scroll bars, etc. - the usable space is actually somewhat less than the full screen size. Click here to see a graphic that illustrates screen width.

Of course, it's also important to give website users the freedom to adjust the design however they like. That's why all of our recent work uses standard and simple HTML and puts all the design elements into an external stylesheet. Users of our sites can overrride the design with their own preferred stylesheet (for visually-impaired users, mobile phones, etc.)

You can learn a bit more about our approach to the code and what it means for disabled access over at WydenTeam.com, the website for U.S. Senator Ron Wyden.