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?
Not the answer I was looking for, but +1 for being the only person to point out this important point. Thanks!
Kevin Babcock
2009-09-30 14:15:21
+1
A:
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).
DVK
2009-09-29 14:57:18
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
2009-09-30 14:08:55
+2
A:
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.
meder
2009-09-29 14:57:42
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!
Kevin Babcock
2009-09-30 14:17:01
+3
A:
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.
Jacob
2009-09-29 14:58:24
Yes, but research suggests that 70 characters is the approximate maximum amount before eye strain sets in.
Jacob
2009-09-29 15:46:26
A:
Not sure about absolute pixel values, but one thing I'd make sure of is that the text columns don't get too wide. There is a number of characters beyond which reading comprehension is impaired.
Krougan
2009-09-29 14:58:44
+1
A:
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.
fvu
2009-09-29 15:01:02
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
2009-09-30 14:13:54
+2
A:
Target either the 800x600 or 1024x768 resolution.
For 800x600 it is around 750px.
For 1024x768 it would be 970px.
Developer Art
2009-09-29 15:04:25
A:
1000 pixels in width, is what I use which fits into the minimum 1024x768 resolution used these days without a horizontal scroller at the bottom of your browser ....
halocursed
2009-09-29 15:10:35