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

Alright, I see alot of misinformation here. For starters, creating a web page using a certain resolution, say 800x600 for example, makes that page render properly using that resolution only! When that same page is displayed on someone else's laptop, or home PC monitor, the page will be displayed using that screen's current resolution, NOT the resolution you used when designing the page. Don't create web pages for one specific resolution! There are too many different aspect ratios and screen resolutions to expect a "one size fits all" scenario, that with web design does not exist. Here's the solution: Use CSS3 Media Queries to create resolution adaptable code. Here's an example:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

See, what we just did was specify 3 sets of styles that render at different resolutions. In the case of our example, if a screen's resolution is larger than 800px, the CSS for 1024 will be executed instead. Likewise, if the screen displaying the content was 1224px, the 1280 would be executed since 1224 is larger than 1024. The site I'm working on now functions at all resolutions 800x600 to 1920x1080. Another thing to keep in mind is that not all monitors with the same resolution have the same size screens. You could put 15.4 laptops side by side, while both look the same, both could have drastically different resolutions, since not all pixels are the same size on different LCD screens. So, use media queries, and start creating your website with a laptop screen with high resolution, particularly 1280+. Also, create each media query using a different resolution on your laptop. You could use your resolution settings in Windows to adjust down 800x600 and creating a media query at that res, and then switch to 1024x768 and create another media query at that res. I could go on and on, but I think you guys should get the point.

UPDATE: Here's a link to using media queries that will help explain more, Innovative Web Design for Mobile Devices with Media Queries

That tutorial will show you how to design for all devices. There's also tutorials for Media Queries specifically. I developed the entire site to render on all devices, all screens, and all resolutions using no subdomains, and only CSS! I am still working on support for tablets and smart phones. The site renders perfectly on any laptop, or your 50inch LCD TV, and many pages work perfectly on all mobile devices. If you put all your code on page, then your pages will load lightening fast! Also, be sure to pay attention to discussion in that article about the CSS "background-size: cover;" or "contain" properties, they will make your background graphics fluid and able to render perfectly at all resolutions.

Follow the sites tutorials and you can make a single web page that renders on everything and anything!

Answer 2

I target the 1024 pixel monitors (but don't use 100% of that space). I've given up on those with 800x600. I'd rather punish the few with outdated hardware by making them scroll if they need to, versus punishing everyone with new equipment by wasting space.

I suppose it depends on your audience, and the nature of you app though.

Answer 3

sbeam said that 'you always want there to be 65-80 characters per line'. That is not true. Wikipedia, for example, may have 180 characters per line. Or was it meant to be a particular website?

Answer 4

Here's an awesome tool: Google Labs Browser Size

Answer 5

Try to target 1024 as the minimum width. Try how it looks at 800, but don't bother too much making that work. At 800x600 almost none of the major websites are going to work, so people working at that resolution are going to have problems all the time anyway.

If you're going to go for a liquid layout, make sure that text doesn't get too wide, because when lines are too long, they become hard to read. That's the main reason why most websites have a fixed width.

Answer 6

I just took a sampling of screen resolutions from all of the client sites I have access to, this includes more then 20 sites in more then 8 industries here are the results:
alt text http://unkwndesign.com/so/percentScreenResolutions.png
Based on this I would say makes sure it looks good on 1024x768 as that is the majority here by a long shot. Also don't worry about the height as much, however try to avoid making most pages more then 1-2 printed pages at your default font size, most people wont read a page that long, and if a user installs a toolbar that takes up vertical space, my personal preference is that it's their problem, but I don't think it's to big of a deal.

*note the percentage adds up to 100.05% because of rounding.