0

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)
Improve this question

2 Answers 2

Reset to default
7

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.

Improve this answer
3
  • That's a good point. Shouldn't there still be some sort of minimum that one should design to?
    – milesmeow
    Sep 7, 2010 at 12:40
  • I love your answer David. Right on the money.
    – jessegavin
    Sep 7, 2010 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, 2010 at 21:39
0

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: https://stackoverflow.com/questions/2932063/what-is-the-minimum-screen-resolution-for-which-you-guys-currently-optimize-your

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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