Dec102005What Page Dimensions Should I Design To?
When I teach Web design classes, students always want to know how wide and tall their web pages should be. This is an easy enough question to answer when you’re dealing with printed designs like brochures and magazines: the size of the paper you’re printing on…duh! But with the Web, the size of our “canvas” is not for us to decide. It’s based on the hardware and viewing habits of our sites’ visitors—from 15 inch to 23 inch (and above) monitors and resolutions ranging from 640×480 pixels to 2560 x 1600 (and up). And since not everyone maximizes their browser window to fill their monitor, we’re not even entirely sure if a browser is using the entire area of the monitor.
Know Your Audience
Determining how to approach your Web page design is, like most interactive design, largely dependent upon your audience. The more tech-invested your audience the more likely they’ll have powerful computers, the latest Web browsers, and larger than average monitors. But how do you really know?
There are a few approaches involving JavaScript and some server-side code that can let you track not only your visitors’ monitor sizes, but also what size they’ve opened their browser windows to. I’m not going to show you how to do it: you can find information on that all over the web (like here and here.)
For an easy, out of the box (and a little out-of-the-pocket) approach you can also try the basic site stats package Mint. This php/mysql/javascript stats tracking setup provides a few add-ons that let you track both the resolution of your visitors’ monitors, and the width of their browsers.
No one has yet viewed this site (at least since I’ve started tracking it) with a monitor that’s less than 800×600 pixels; in addition, over 97% of my visitors have their browsers expanded enough to display 760 pixels (wide) of page content.
A starting point
If you’re not going to do the research—after all, it is a bit of a bother to set up the JavaScript code to do this, especially if you’ve got a well established site with lots of pages—you can safely assume that the vast majority (if not all) of the people visiting your site have monitors that are at least 800×600 pixels.
It might also be safe to assume that even if they don’t have their browser windows maximized, they’d at least be willing to expand the window to see the entire width of your site’s pages. In that case it’s pretty safe to design to a maximum width of 760 pixels. This accounts for any browser “chrome” like a scroll bar that would nibble into that 800 pixel total. In addition, if you’re really concerned about the total visible height of a page—often referred to as the area “above the fold” (as in a newspaper)—then a cautious estimate is 410 pixels, giving you about 760×410 pixels to work with (height is pretty tricky as I discuss below.)
A quick look around the web showed that fixed width designs aimed at 800×600 monitors range in width from 705-760 pixels. This site, for example, is designed to 760 pixels wide.
Editor’s Note: April, 13, 2007.Since this article was written, I’ve redesigned the site. It now is designed to 890 pixels wide.
If you want to bite the bullet, like a few sites such as A List Apart have, you can even design for the next larger monitor resolution: 1024×768. This affords around 955×600 pixels of breathing room. A List Apart is set to 960 pixels, while The Onion opts for 957.
Don’t design for height
It’s pretty hard to design a page whose height will always fit a visitor’s browser window. There are a lot of elements that can potentially eat away at the amount of vertical space a browser can display: location bar, status bar, bookmarks bar, menu, tabbed browsing, the Taskbar on Windows, and the Dock on Macs. The safest assumption is that the top few hundred pixels (up to about 410) will be visible to any one visitor. So make sure that anything someone HAS to see fits within that space: so don’t hide your incredible, must-have, offers below this region, or visitors may quickly pass them over. What’s worse is a page proclaiming the virtues of being a member of the Web site, but hiding the “Sign up to be a member” link below the visible part of the page, so users have to scroll just to join. Most won’t.
If you want to get a rough (very rough) approximation of what your site looks like in different size Web browsers try this online tool.
4 Responses to “What Page Dimensions Should I Design To?”
Taurus May 25th, 2007 at 12:02 pm
I’ve been searching for some kind of direction on how to choose an appropriate width for today’s hi-resolution monitors. I noticed that your site redesign is now at 890 pixels wide. Was this an arbitrary choice?
Dave McFarland May 25th, 2007 at 12:16 pm
Hi Taurus,
I picked 890 pixels because I was experimenting with different types of design grid system. 890 pixels provides a grid of 18 columns (40 pixels each) and 17 gutters (10 pixels each), which you can use in a variety of ways from 2 or 3 equal sized columns or a wide selection of mixed width columns. Mark Boulton has presented some useful posts on grid layouts (http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/) as has Khoi Vinh (http://www.subtraction.com/archives/2005/0901_the_funniest.php). But, the best resource for theory and practice of grid layouts that I’ve read is a book named “Making and Breaking the Grid” by Timothy Samara.
Sam September 17th, 2008 at 2:47 am
Hi,
I am getting into webdesign and seem to have two questions i can’t get an answer to. The first is how to storyboard a website, I mean a visual example so someone can really understand it. The second is how do web developers know the sizes of pics, content boxes, and width of columns to put into a website. I hope you can answer my question and thank you in advance.
ellie_30 May 21st, 2007 at 12:12 am
I surfed the web thinking that this might be the case–that the standard for page dimensions is changing. Many online manuals (such as the Yale guide) have not yet been updated. Thanks for the tip!