Menu
Page height, width and alignment Before smartphones and tablets became popular, web designers created fixed width pages that worked on the most common screen sizes - usually 1024 pixels wide by 768 pixels high.
1280×720 is considered to be the most suitable screen resolution for the desktop website version. Usually, the desktop version provides the best user experience and is supposed to be the most convenient and wide.
The optimal width is generally between 940px - 1000px width. This width allows you to cater to the majority of devices that people are using and will still look nice on wider screens.
A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024x768 resolution or higher.
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:
Bad idea, I believe. The whole point in separating content from layout was to enable your web page to be displayed on any sort of browser.
Putting in artificial limitations such as a minimum screen size will limit your market.
Having said that, I believe every desktop should be able to display 1024x768. But what about the browsers running on iPhones or other screen-challenged devices, or even those that don't use their entire desktop for the browser?
In answer to your specific question, no, I don't believe there is any standard for a minimum or common display area in browsers.
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...
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.
there are actually industry standards for widths (well according to yahoo at least). Their supported widths are 750, 950, 974, 100%
There are advantages of these widths for their predefined grids (column layouts) which work well with standard dimensions for advertisements if you were to include any.
Interesting talk too worth watching.
see YUI Base
Here's an awesome tool: Google Labs Browser Size
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With