Recommended website resolution (width and height)?

browser standards resolution
Aximili picture Aximili · Jan 19, 2009 · Viewed 342.3k times · Source

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

Karl Fast picture Karl Fast · Feb 12, 2009

The advice these days is:

Optimize for 1024x768. For most sites this will cover most visitors. Most logs show that 92-99% of your visits will be over 1024 wide. While 1280 is increasingly common, there are still lots at 1024 and some below that. Optimize for this but don't ignore the others.

1024 = ~960. Accounting for scrollbars, window edges, etc means the real width of a 1024x768 screen is about 960 pixels. Some tools are based on a slightly smaller size, about 940. This is the default container width in twitter bootstrap.

Don't design for one size. Window sizes vary. Don't assume screen size equals windows size. Design for a reasonable minimum, but assume it will adjust.

Use responsive design and liquid layouts. Use layouts that will adjust when the window is resized. People do this a lot, especially on big monitors. This is just good CSS practice. There are several front-end frameworks that support this.

Treat mobile as a first-class citizen. You are getting more traffic from mobile devices all the time. These introduce even more screen sizes. You can still optimize for 960, but using responsive web design techniques means your page will adjust based on the screen size.

Log browser display info. You can get actual numbers about this. I found some numbers here and here and here. You can also rig your site to collect the same data.

User will scroll so don't worry much about height. The old argument was that users wouldn't scroll and anything important should be "above the fold." This was overturned years ago. Users scroll a lot.

More about screen resolutions:

More about responsive design:

Tools and front-end frameworks for responsive design and liquid layouts:

Related questions

Why is javascript the only client side scripting language implemented in browsers?

Why don't browsers add support for, say, Python scripting as an alternative to Javascript? Or more general purpose scripting languages? Is there a reason that Javascript is the only one implemented across browsers? After all, the script tag does have …

Read More
How to detect Render Mode of browser for current page?

I know that modern browsers generally have two render mode: standard mode and quirk mode. The browser detects the heading DocType. The question is how to detect render mode of current page at runtime. Is there any Firebug tool to …

Read More
Hiding the scroll bar on an HTML page

Can CSS be used to hide the scroll bar? How would you do this?

Read More