Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I've yet to find the ultimate resource that lists 'all' browsers and the actual visible canvas size (excludes browser chrome) for content. The closest was a table in the O'reilly book Web Design in a Nutshell:

alt text

The one thing is that this doesn't have the latest browsers. I figured that this community would be a good place to gather this info.

I'll start by adding some:

Mac:

1024 x 768

  • Safari 5.0 - 1012 x 656 (w/ tabs)
  • Chrome 6.0 - 1010 x 672
  • Firefox 3.5 - 1009 x 654 (w/ tabs)
share|improve this question

2 Answers 2

up vote 6 down vote accepted

Such a list would not be overly useful as the viewport can vary greatly between users even with the same screen size because:

  1. They have different toolbars installed, and/or different settings for the default toolbars (large icons or small for instance)
  2. Some browser themes alter the heights of elements like toolbars
  3. Not everyone runs their browser maximized, so the browser's viewport could really be any size

Also the range of screen sizes varies much more now than it used to. Long gone are the days when it was unusual to see much other than 800x600 or 1024x768. There are a number of common wide-screen formats and small-format screens (i.e. those on netbooks and smartphones) are increasingly likely to be used to view your pages.

Rather than designing around the viewport of a selection of specific examples (IE8 default, FF3.6 defaults, FF3.6 default but no tabs...) you should design for a reasonably full range, making sure your page doesn't fall apart completely on small screens nor become to wide to be comfortable readable on large wide screens. This does mean that pixel perfect positioning is an ideal you need to let go of, but it makes your content usable in the widest possible combination of conditions.

share|improve this answer
    
That's a good point. Shouldn't there still be some sort of minimum that one should design to? –  milesmeow Sep 7 '10 at 12:40
    
I love your answer David. Right on the money. –  jessegavin Sep 7 '10 at 13:42
    
Regarding a minimum size to design for: it depends on your target audience. If you site would never work on mobile devices then perhaps a netbook size (~800x400 less the browser chrome for the smaller models, 1024x768 for larger ones). But remember that these and smaller devices sometimes have their DPI set differently so for your graphics and text to size correctly you'll need to use text-size based sizing not pixel based sizes. –  David Spillett Sep 8 '10 at 21:39

Google Browser Size shows an overlay of the percentage of users who have their browsers at certain resolutions. This also takes into account people who don't maximise the browser window, as well as screen resolutions.

As for screen resolutions for sites, see this thread: http://stackoverflow.com/questions/2932063/what-is-the-minimum-screen-resolution-for-which-you-guys-currently-optimize-your

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.