What is a good maximum content area width for web pages?

Question

Is there a standard max for the width of the main content area of a web page? I want to maximize screen real estate without affecting usability. I've seen a lot of sites stick to 980px or less. Anyone have any suggestions?

Solution 1

I'm assuming you're referring to the wrapper width since you mentioned 980.

The most ideal solution is to not think of pixels at all and instead rely on ems/%s and scaling, be as fluid as possible so your design fits on small mobile devices and your elements heights are not fixed but auto. Example being: http://www.456bereastreet.com/

But if you're stuck with web designers who still think pixel and you know for sure you'll be unable to get them to try making images that are liquid/fluid, I would say shoot for 960 pixels in width so you have enough viewing area in a 1024x768 with scrollbars in IE6/XP, but this really depends on your audience and the majority of your audience's screen resolutions.

Solution 2

Research, such as that referenced here suggests that people have a more difficult time reading long lines of text. That's why I restrict my content width to 800px or so.

Solution 3

There's no "standard", especially in this age of PDAs/smartphones/netbooks/smartbooks/kiosks/etc... - while it may sound cliche, the best thing is to design a fluid layout not depending on exact screen size.

The answer may change depending on your intended/anticipated user base, of course (e.g. assume 1024 px screen width leaving you with 980 working px - and consciously decide that you are not interested in supporting anyone with smaller screen resolution).

Another solution is to allow size layout customization by making it into portal-like with user having control of layout of the portlets (ala My Yahoo).

Solution 4

960 is a pretty common standard, and the rationale behind that figure is the fact that fitting on a 1024 pixel wide screen will allow a big majority of your users to see the content without scrolling. See here for one of 100's of sites that give access to browser & user system capabilities statistics for some initial inspiration.

But in the end, it'll up to you to understand the structure of your customer base - if your site targets iPhones, targetting 1024 pixel wide screens may not be your smartest decision.

Solution 5

You have to first ask the question. Who is my audience?

View more solutions

Comments

[Admin]

The definition of "long" differs with each other person.

[Jacob]

Yes, but research suggests that 70 characters is the approximate maximum amount before eye strain sets in.

[Kevin Babcock]

Interesting article. Thanks for the link and suggestion!

[Kevin Babcock]

I think going with a maximum width (~980px) is a good idea since the majority of our users are enterprise clients with desktop machines and medium to large sized monitors. Thanks for the feedback!

[Kevin Babcock]

Interesting statistics. It's interesting to see that <10% of users have a screen size smaller than 1024x768. Of course, those stats should be taken with a grain of salt. w3schools.com takes stats from their users, which I imagine are largely developers. Developers tend to have the more high-end systems than regular users, who may be stuck on laptops or older/smaller monitors. I guess it all comes down to identifying your audience. I'd love to see stats from sites like Google, Facebook, Yahoo!, etc, which would probably be more representative of internet users as a whole. Thanks for the link!

[Kevin Babcock]

Not the answer I was looking for, but +1 for being the only person to point out this important point. Thanks!

[Kevin Babcock]

Unfortunately most of the site has been designed using pixels, so switching to ems won't be an easy task although I agree that it would be a better solution. For now I think going with a 960px width is probably the best short-term fix, gradually moving to a more fluid layout over the long term. Thanks for the suggestion and the link!

[Raam Dev]

Unfortunately your link is broken. I found the new link but sadly the link to the full article is broken. A search led me here, but that seems to require a subscription. In the end, I found this helpful.

[ChrisW]

What would your answer be if the unit were ems: what is a good max-width value, measured in ems?

[DaveGauer]

@ChrisW webtypography.net suggests 45-75 characters per line. I tried max-width: 70em; on a website of mine and it looks great.