Recommended website resolution (width and height)?

Question

Is there any standard on common website resolution?

We are targeting newer monitors, perhaps at least 1280px wide, but the height may varies, and each browser may have different toolbar heights too.

Is there any sort of standard to this?

Answer 1

Here are statistics of browser display in 2008: http://www.w3schools.com/browsers/browsers_display.asp

About 50% users are still using 1024x768. If you want your site to look nice in high resolutions use flexible layout.

Answer 2

I would say that you should only expect users to have a monitor with 800x600 resolution. The Canadian government has standards that list this as one of the requirements. Although that may seem low to somebody with a fancy widescreen monitor, remember that not everybody has a nice monitor. I still know a lot of people running at 1024x768. And it's not at all uncommon to run into someone who's running in 800x600, especially in cheap web cafes while travelling. Also, it's nice to have to make your browser window full screen if you don't want to. You can make the site wider on wider monitors, but don't make the user scroll horizontally. Ever. Another advantage of supporting lower resolutions is that your site will work on mobile phones and Nintendo Wii's a lot easier.

A note on your at least 1280 wide, I would have to say that's way overboard. Most 17 and even my 19 inch non widescreen monitors only support a maximum resolution of 1280x1024. And the 14 inch widescreen laptop I'm typing on right now is only 1280 pixels across. I would say that the largest minimum resolution you should strive for is 1024x768, but 800x600 would be ideal.

Answer 3

Ultimately, this is not a matter of standards or best practices for markup, but rather knowing your audience and making sure your website does what you want it to do.

It's more important to consider the width of the browser viewport rather than screen resolution -- you cannot assume that every pixel on a display will be allocated to the browser (and even if it is, you have to subtract browser chrome). If you have access to analytics that report browser width (n.b. browser width, not screen resolution) then pay very close attention.

It's nice to try to accommodate the widest possible range of viewports but there are some limitations. Some challenges can be handled with CSS media types, some can't. Some can be handled with fluid layouts. But fluid layouts cannot work in all situations, depending on the type of information to be displayed, line length, reading comfort, etc. Some fluid layouts don't work in wide displays. Most break when sized below a certain width, etc.

As much as I'd personally like to design for viewports ~960 pixels and up, you can't always do it. So in some cases, it's still safest to design for viewports <=760 pixels or so (800 pixel wide display, maximized) -- though the time we can finally toss this limitation once and for all -- for the desktop at least -- is very fast approaching.

Where conversions are an issue -- and you have a fixed width layout -- you better have a darned good reason for putting anything that the user needs to click in order for the cash register to go "ka-ching" anywhere east of the 760th pixel.

Ditto for the primary navigation.

Finally, test your layout in everything you can get your hands on. Big. Small. Desktop. Handheld. The works. There's no substitute.

Answer 4

Whatever your target browser size, make sure to include space for browser toolbars, status bars, and scroll bars as above. Internet Explorer (IME) often has over 100px of vertical space in toolbars and status bars. Typically, if I'm shooting for 1024 x 768, I would try to create a design of around 960 - 980px wide and 600px high to be safe. That way you accomodate scrolling if necessary and some nice white space (if the design requires it). I highly recommend YUI grids for instances where you need to target specific sizes:

YUI Grid

Answer 5

Forcing your user to scroll horizontally is a serious UI transgression. Unless you are specifically building a web site for a population with a known screen size, you are safest ensuring that your design works with screens as small as 800 pixels wide (about 8% of the web surfing population if memory serves me right). It is wise to make it adapt well to larger screens but not at the cost of the folks still surfing at 800x600.

Here's another thing to consider as well: not everyone runs their browser at full screen (I don't). So the idea that if is Ok to design for a specific (and large) "screen size" really doesn't work for a number of reasons.

Update on 12/15/2010: When I first answered this question, 800 pixels was an appropriate answer. However, at this point, I would recommend 1024 pixels wide (or 960 as someone else points out). Technology marches on...

Answer 6

The guidelines we use, which seem to be fairly widely used and are backed up by the figures that we get from Google Analytics, are to design the site so that it will work on a screen that is 1024 pixels wide and 768 pixels high (1024x768 and 1280x800 are the most common resolutions we see, accounting for at least 70% of all traffic).

This is why you see many sites (this one included) which use a central column approx 1000 pixels wide and with the most important content in the top 500-600 pixels so it's above the fold when being viewed in screens this size.

Using a 1000 pixel wide layout works fairly well on screen sizes of up to about 1680 pixels in width (typically as high as you'll see on laptops, except the large 17" ones) but do start to look a bit silly on 1920 pixel wide ones (high end computers, typically workstations), however these very high resolutions don't account for a large percentage of traffic on the general internet - 2% or less (on the other hand, if you have a specialist audience like this site, the figure with high resolutions may be somewhat higher).