Whether you are designing a web application, a site, or a blog theme the question that will likely come up when you start is what screen resolution should I support? Then how big should I make the page? This question was posed to me yesterday and here is my response.

Width is #1

Height doesn’t matter as much as width. As long as you keep the width smaller than 960px you should be fine in most cases. I’ve found the site http://960.gs/ and BlueprintCSS.org are great resources for some patterns and hints on how to layout a page at this width. Make sure all important content falls within this width. If necessary you can expand the page with a sidebar that falls outside of the 960px area. For sites with a lot of text and simple layout an elastic design that stretches to the viewers screen width is also an option.

Height is #2

Figure the main message should be “above the fold” either in the header banner or in the main image. Right now the majority of desktops have a height of at least 768px and smaller Netbooks 600px. Subtract the toolbars, etc. from that and you get a smaller figure. So, 550px is probably a safe figure for the main message fold line. Content of course can scroll past there, especially on sub-pages.

Update 2010-01-07

Left to Right is #3

Put your most important content on the left. This will make it more accessible to people using mobile devices like iPhones, Blackberry’s, Droids, and NetBooks. This should include things like contact info, search bars, and your key message.


Just found this great tool for testing your site in Google labs called BrowserSize so you can see on a percentage basis how much people can see.
These are some basic guidelines. I sometimes follow them and sometimes break them. It is about knowing your audience and making sure that they get a pleasant experience that doesn’t require a lot of scrolling to get your message or use your application.