Articles
The Long and Short of Website Dimensions
By Cyndi Nguyen
(See more recent article, Part Deux)
One of the most common questions we’re asked as web designers is, “Why doesn’t my website fill the entire screen?” In a society where we drive big cars and live in big houses, shouldn’t it follow that our websites fill every inch of available screen space? Put simply – no.
Despite the fact that an increasing number of people have 17-inch plus computer monitors and connect via a T-1 line or DSL, there is an overwhelming number of computer owners who don’t. In order to cater to these technologically-thrifty folk, it’s vital that we design for the lowest common denominator – typically someone using an 800 x 600 resolution screen and a dial-up Internet connection.
While vertical scrolling is acceptable on the web, under no circumstances should you force a user to scroll horizontally. Remembering our user with the low-resolution screen, this means websites should be no wider than 760 pixels. When we tell people that, most respond with “Really? I never noticed any sites doing that!” Well, take a look at a few of these big players and see for yourself:
www.ibm.com
www.msn.com
www.toyota.com
www.cnn.com
“Wait a minute! How come when I go to Amazon it fills the whole screen?” Good question. There are 2 approaches to constructing a web page – fixed-width or fluid.
A fixed-width site is just that, fixed. This is typically 760 pixels and considered to be the industry standard. A fluid site is designed to stretch or contract, depending on the size of the window to which you’ve adjusted your browser. Before you run to the phone to tell us you want a fluid site, you should know that fluid sites do come with limitations.
First, because a fluid page is meant to stretch, the page can only accommodate straight lines and boxes which really limits the aesthetics of a page. And because you don’t know how big a user’s screen is, it’s impossible to predict what your site will look like on different monitors. For example, what appears as a tidy little paragraph of text might actually show up as one looooong single line of text on a high-resolution screen. As a result, the majority of sites use the fixed-width approach, although some sites marry both approaches by stretching some elements while keeping others fixed (see Apple.com).
In a nutshell, whether you decide to go with fixed-width or fluid really depends on your audience and how much aesthetic freedom you want on your website, usually a decision your designer can help you make.
