Design a Website for the Best Monitor Size

Ever wonder what size monitor you should design a website for? A more interesting question is, "For what size browser window should I design?".

Since website visitors often have their browser window smaller than their monitor, designing for browser size is more important than monitor resolution.

I have two monitors each with a resolution of 1280 x 1024, so my affective resolution is 2560 x 1024. My browser window is rarely over 1100 x 700, and often under 900 x 600.

Placing Important Information

Anything placed on the right side or bottom of a layout could be invisible to viewer until they scroll.

Since most people scan a website before deciding to read more, you want to grab their attention right away. That means placing the most relevant information where people will see it.

Keep your important information to the left and upper sections of your pages.

The question remains, what parts of your layout can people see?

Browser Window Sizes

Google has a website (browsersize.googlelabs.com) that shows the browser window sizes of people who visit their site. Here is another website (foldtester.com), that offers a similar tool.

Both have the ability to overlay this information onto any URL. (If you have a flashed based site these tools will not work, flash overlays the percentage screen.).

Amazon.com looks like this using Google's tool.

As you can see their main content exists in the 95% sweet spot. The ads to the right are visible to 90% of their visitors, without scrolling.

Test Out Your Website

Enter your website's URL into one of these tools (browsersize.googlelabs.com or foldtester.com) and observe the percentage of people that can view the different parts of your layout.

If you are using a CSS based fluid layout to float columns in a website, I'd suggest that you adjust your browser screen to either the 90 or 80% width to test your design with these tools.

I would recommend that you keep important information inside the area marked as 90% (95% if possible).

Images and text past the 90% area will not be visible to 1 in 10 visitor without scrolling (1 in 5 if it is outside the 80% areas).

This does not mean that you should never place anything outside the 80% area, just keep in mind that it might not be visible when someone first loads a page from your website.