Standard/mean browser width these days is:

May 24, 2006 3:56 PM

Redesigning my website, and I'm wondering:

What's the standard/mean browser window width these days?

In previous versions, I did the fixed-width + auto border on left and right trick in CSS to make things look balanced no matter the width. This time, I want to align left and give each column a set width. But to look decent I need a ballpark width -- 720px? 800px? 1024px?

Thanks!

posted by docgonzo to computers & internet (17 comments total)

My rule of thumb is readability in 800 but designed for 1024. The last DELL we bought here I think defaulted to 1024, which is a nice step forward.

Also, first google result for "most common screen resolution" is an W3C survey of common browsers, screen resolutions, etc.

Although, admittedly, I've looked for those numbers before without any luck. Maybe that's the precise phrase you need.
posted by fishfucker at 4:01 PM on May 24, 2006 [1 favorite]

Thanks for that link. I had not found that.

I wonder, though: Is screen resolution the same as browser window size? I don't stretch my browser window to fill all of my screen; is that uncommon?
posted by docgonzo at 4:09 PM on May 24, 2006

W3Schools say themselves on that page that those are their stats and their site is for techy people interested in web technology, so it's probably not a reflection of the general populace. All they're sure of is the trends.

This question has essentially two answers:

1. a guess
2. a reply from a purist that you shouldn't be trying for the common or average browser window, you should be trying for compatibility with every browser and window size by using proportional columns and font sizes

So here we go:

1. There's a vanishingly small proportion of people on 640x480, and the people on 800x600 are already used to websites not fitting in their viewport, so you should go for 1024x768 as a baseline -- but aim to keep all your key nav and content within the 800x600 area, so that nothing very important is "below the fold" for people on older monitors.
2. "you shouldn't be trying for the common or average browser window, you should be trying for compatibility with every browser and window size by using proportional columns and font sizes"

posted by AmbroseChapel at 4:13 PM on May 24, 2006

" Is screen resolution the same as browser window size? I don't stretch my browser window to fill all of my screen; is that uncommon?"

No. I've got a 1680 x 1050 screen; my browser viewport at the moment is 1003 pixels wide. I get the impression that Windows users are more accustomed to having their windows maxed out than Mac users. My target width when I designed my own blog was 800 px--it looks a little cramped, but requires no scrolling.
posted by adamrice at 4:23 PM on May 24, 2006

As a professional web developer who sees this issue discussed every few months on web developer lists, I'd say Ambrose is correct in both answers. The Counter has stats that are probably less high-end focused than W3Schools.

I wonder, though: Is screen resolution the same as browser window size?

The answer to this is so obviously no that I suspect you meant to imply some other question, but I'm not sure what that question might be.
posted by scottreynen at 4:28 PM on May 24, 2006

doc:

you're right -- I've totally misread the question. FWIW, I always have my browser maximized, but I know others don't. I'm not quite sure if you can get statistics on what width browsers are set at, but I've never quite looked into that.
posted by fishfucker at 4:44 PM on May 24, 2006

I think the first question you have to ask yourself is "who is your standard/mean audience." You've likely already figured this out, but it's worth some extra thought.

Think about where your audience will be viewing your site. Will it be in a home office? Corporate cube? Coffee shop? Dorm room? Subway train? Public library? Developing world?

Will they be likely to be using a standard desktop? Gamer PC? Laptop? Cell phone?

Once you've defined the where and what with of your audience's viewing preferences... then you can determine the ideal screen size.

The design for the lowest common denominator theory is just a bad idea these days. Who's to say which browser is the lowest common denominator? Lynx? Opera's new mini browser for cell phones? IE 5 on a Mac?

There's a great article about how television accomplishes designing for multiple audiences including audio only (comparative to lynx) all the way up to the latest and greatest Plasma HDTV (or whatever's hip these days in TV land). Of course I can't find it *ways finger at del.icio.us bookmarklet*, but the point is pretty simple to figure out. You optimize your design for each audience and each resolution and each browser they're likely to use. That could very well be 760 pixels wide (assuming a maximized 800x600 resolution) or it could be flexible or text-only or flash heavy or completely horizontal, and on and on and on...
posted by 10ch at 4:51 PM on May 24, 2006

I'm running 1920x1440, but my browser is about 1000 pixels wide. When I run a browser on a laptop, I usually browse fullscreen (800 to 1000 pixels, give or take).

There are two interesting points to make about this: the first is the rather obvious chicken-and-egg syndrome. If most people design their sites to be viewed at around 800 to 1000 pixels, most people will subsequently browse at about that level in order to have it "look right".

The other, more important issue is this: humans don't like reading horizontal lines longer than about 60 characters. You can go up to about 80, or down to about 40 and still be in a good range, but any more and your eyes fatigue more quickly trying to re-position after each line break, while any less and you're constantly going left-right-left-right. It is no coincidence that most dead-tree books are set to about this width--it is the product of hundreds of years of refinement. Thus, provided you only have a few columns of information at any given time, there is a maximum theoretical limit to how wide a screen can be while maintaining ease of readability.
posted by Civil_Disobedient at 6:55 PM on May 24, 2006

When one designs a website for a particular screen size, do you also take into consideration the frames and scrollbars surrounding the browser window?
I ask this because, in my previous job, we were designing a web-based application. One of the design mandates was that there would be no scrolling. Al least no side scrolling. At the time, we were building the app to run full-screen (as a thin client) on an 8x6 display. The application would inevitably scroll unless we cut the actual live real-estate of the app down to something like 780x450 (or whatever it was...I remember being told to actually count pixels to determine how wide the Windows framing was in IE.) I always wondered if there was some reference or rule for this sort of thing.
It was nuts.
posted by Thorzdad at 6:58 PM on May 24, 2006

I do take into account the scrollbars. One really has to, I think.

And I also almost never have my browser maximized. Sites that expect/require that my browser be maximized are annoying to me.

Often, I like to copy/paste from my browser to e-mail or another document, so it's nice to have screen real estate available so I can just click back and forth directly to the copy/insertion point in both applications.

I still really like elastic design, where the content stretches to fill the browser. Firefox and, I think, Opera respect the CSS "maxwidth" attribute, which helps make elastic design stay elegant (keeps paragraphs from stretching too wide; as previously mentioned, text lines that are too wide are difficult to read). IE doesn't respect "maxwidth", but there are workarounds.
posted by amtho at 7:10 PM on May 24, 2006

"which helps elastic design stay elegant"
posted by amtho at 7:10 PM on May 24, 2006

I use the Ion window manager for X, a tiled window manager, so though I'm running at 1024 x 768, the size of my browser window is smaller to make room for a gkrellm2 window on the right and an xterm window on the bottom. My current browser window size is 894 x 555. For what it's worth, even in 2006 it's rare that I come across a site which requires horizontal scrolling at this size.
posted by IshmaelGraves at 8:37 PM on May 24, 2006

If you have a good web analytics package it should tell you what the most common resolution for your site is. But here are some guidelines.

Consider your audience.

If it needs to be highly accessible (e.g. governmental sites, public service, etc.) it's best to design for 800x600.

If your catering to designers, 1280x1024 and even higher is probably a safe resolution. Naturally, they use high resolutions.

Personally, about a year and a half ago I started designing 90% of my projects for 1024x768. According to my statistics, 98% of our visitors had this resolution or higher.

Just my 2¢
posted by blueplasticfish at 12:08 AM on May 25, 2006

For 1024 x 768 which is what i usually recommend for our clients i suggest you keep your design within 950 - 1000 horizontal and 600 - 690 vertical.
Keep navigation elements within 700 x 450
posted by FidelDonson at 1:39 AM on May 25, 2006

I wish everyone would design for 2048px.

Then we might get ourselves some nice LCD panels.

You see my point. Push forward!
posted by trevyn at 5:24 AM on May 25, 2006

Pay attention to line length. Lines of text that are too wide can be difficult to read.

• Max-width in Internet Explorer
• Elastic Design
• Elastic Design Demonstration
• Fixed or fluid width? Elastic!

posted by kirkaracha at 6:45 AM on May 25, 2006

For those of you recommending 800x600 - screw 600. Nothing is more annoying to me than websites that force me to click to see the rest of the content, because the designer doesn't realize that the web is not a static printed page, and I am quite used to scrolling down, thank you. Fixed page height is a ploy to make me see more ads, nothing more.

Having said that, if your site has subsections they should be on separate pages - we don't need TimeCube style sites with a single 10 billion line page.

As for width - 800 is probably OK but if you do use a fixed max width please don't force it into the top left corner, allow your content column to center itself in the page. This means that even if I have a 1600px wide viewport (as on my laptop) or an 800px wide port (as someone running 800x600) your content will look the same. I find far too many sites that are hard-coded to top left, meaning 1/2 to 2/3rds of my browser window is filled with blank white nothing.

You might also try the CSS3 columns thing - could be a good solution for keeping line lengths short while allowing elastic design? Check out this blog for example in Firefox, compare with IE. Columns galore in FF. Could use the MS "if IE" tags to feed IE an alternate sheet that forces 800px width for content, and allow FF to use full-screen and columns?
posted by caution live frogs at 8:43 AM on May 25, 2006