What the typical viewport size on a 1024x768 screen?

Question

I am designing a web application, and I wish to know the largest size (x and y) that I can design for.

As of January 2008, about half of users are using 1024x278 screens, and probably less than 10% are using smaller screens. (Phone and palmtop users are an exception here.) So we are designing for minimum screen size of 1024x768.

However, that's the screen size, and when we are laying out our content we need to know the viewport size. There is evidence that most users have the browser maximized, but one still must subtract out space for OS decorations and browser chrome. People customize their chrome, so there is no single "right" answer; I am going for a reasonable bound that will accommodate the majority of users.

I see plenty of designers who say that they use a width of 960 pixels because it has many factors and can be divided up evenly -- but before deciding on this I want to know the maximum size that I can get away with, then I might choose to use somewhat less. I have seen max widths of 960, 974 or even 990 quoted... my own experiments seem to show a width of 1000 works OK.

Heights are even more difficult to come by: I find I can fit a vertical viewport height of 595 pixels works on the browsers that I've tried, with typical default OS and chrome settings. But I haven't tried very many, and I would rather see a more authoritative source. Surely someone else has done this research and done it better than me.

So my real question is this: What is the largest viewport size I can design for and expect it to fit without scrollbars for 80-90% of all users?

Answer 1

Make sure your site will render at 800x600, but make it expand to fill whatever size the user has.

Nothing is more annoying than surfing at 1600x1200 or bigger only to encounter a dumb site that won't stretch beyond a 700-800px width.

Check out The man in blue for a great example of how to handle page size changes... http://themaninblue.com/experiment/ResolutionLayout/

Update: I found a nice site that used some stats to determine what % of users can see what size screens: http://www.methodologie.com/webcanvas/

Answer 2

All the answers you've found already are probably right.

For the casual user (Stereotypical: Win XP or Vista, IE6-7, no custom skins) a width close to 1000px would probably fit. If people have modified their browsers, not running them full-screen or have custom skins on their operating systems, this number might change.

If i were to design for a 1024px-width-resolution, I'd probably choose a width close to 980px. It's all up to you, and there's no "one and only answer". Around 960-1000px somewhere, depending on a whole lot of things.

When it comes to the height of the page, don't think too much about it. Put the most important information (navigation, logo, important content) at the top of the page, and don't be afraid of letting the user scroll to find the rest. People are used to, and know they have to, scroll. It's a natural limitation nobody expects you to do anything with.

For that most important information, a viewport with a height of around 550px or more could probably be expected.

So, ~980px * ~550px is probably a more or less standard viewport to use as a starting point :-)

Answer 3

For what it's worth, XP IE7 users with the default width of sidebar open at full-screen XGA get a viewport width of 862px. Heights are not so important as we expect to scroll vertically, but having to scroll horizontally as well is death.

There are of course any number of reasons why this might differ from what is actually available, which is why we're all good web designers and use proper liquid layouts, don't we.

(What's that, stackoverflow? Really? Shocking, tsk.)

Answer 4

I have Firefox open with a size (including chrome) of 1024x1000. I don't browse full-screen.

My chrome includes the menu bar, the navigation toolbar (with small icons), the bookmark toolbar, the tab bar, a right-side scroll bar and the status bar at the bottom.

My actual view port is exactly 1000x843.

Answer 5

I'm currently on a Acer netbook at 1024x600 screen resolution. Remember that we are a growing market segment! (or at least, try not to make your vertical real-estate assume 768 as a minimum screen height)

Answer 6

i am on a Sony laptop WUXGA screen (1920x1200).

I have my taskbar on the lefthand side of the screen so minus the browser chrome I still have a pretty respectably usable 1831 pixels. usually find this is good for most uses.

I just wish stackoverflow woudl detect my wide screen and show me my answer preview in a right hand column.

Answer 7

The 960px width is a good size because it's so divisible. 1000px will be too big for many systems. The scrollbar width plus framing adds up to about 33px on Vista/Firefox.

I think the checking height is useful since it's good to get an idea of what a viewer can and can't see when the first open a page. In these days of info saturation you can't rely on ever visitor to scroll down.

My viewport on Firefox, with tabs open, quick links and the excellent web developer toolbar extension is only 572px when set to 1024x768.

If you use the web developer toolbar one of the many useful features is the ability to instantly resize the browser to whatever sizes you set it up for: eg. 1024x768, 800x600 etc. So you can see your web site the same way visitors of those screen sizes will see it.

Web developer is well worth checking out: https://addons.mozilla.org/en-US/firefox/addon/60

Answer 8

Just thought I'd add that Shaun Inman's Mint stats app has a plugin that tracks window size, rather than screen resolution, and takes into account worst-case browser chrome. It then groups the results as x% of visitors have window width >y%, or >z% height, which can be very useful for making informed decisions about a specific site, and takes some of the guess work out of the process.

Answer 9

Today I just came across a site which is HIGHLY relevant to this old question of mine. Apparently Google is willing to share their knowledge about browser window sizes. Their new service is at http://browsersize.googlelabs.com/ and it basically just shows you their data on typical browser portal sizes.

Answer 10

1007px is the absolute maximum you get to work with in Internet Explorer (details) without horizontal scrollbars. But that said I think you should not go for the very maximum unless you need to. Rather, rely on the assumption that many people's browsers aren't maximized.

Google's Browser Size is a great tool.

Answer 11

Geez, can't any of you geeks answer the posted question? The vast majority of users look at the Web in IE7 in a maximized window on a 1024x 768 screen and haven't modified their browser. So I found a guinea pig and took a screen shot. I assumed the taskbar was one row and visible--again, the default behavior--and got a window size of 1003 x 589. I'd use a live area of 960 x 560, personally.

Answer 12

This seems to be recent, thought I'd mention it, found it while scouring the interwebs...

http://www.nealgrosskopf.com/tech/thread.php?pid=43