What is the best absolute width for a webpage? [closed]
https://stackoverflow.com/questions/202557
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Assuming a fluid layout is not an option (since that is a different discussion all together), what is the recommended width for a site layout? What are the pros and cons of different sizes?
Solution
I've always kept with 960px as it's viewable on 1024x768, and is cleanly divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480... so I can split up the design of my site (using the rule of thirds) cleanly.
EDIT after a few years: Please consider using CSS Media Queries to make your content responsive to the myriad of devices out there now if you can't use a fluid layout. I'm not sure that one can claim one pixel width to rule them all in 2012.
OTHER TIPS
Check out http://browsersize.com for some quick stats on screen resolutions users use nowadays. You can use http://setmy.browsersize.com to quickly resize your browser to emulate viewing your website at a particular screen resolution. Make sure that your layout satisfies at least the most widely used screen resolution (1024 x 768).
Also, don't necessarily aim to take up the maximum horizontal space. The width of text (number of words per line) ideally shouldn't exceed a certain threshold for usability:
At the very common 1024×768 screen resolution, most fixed-layout websites don’t use all available space to the left and right of their content. Flexible layouts make a better use of horizontal space, but struggle to maintain usable line-lengths. Usability experts have told us that there are just so many words you should put on a line. Between 8 and 12 words seems to be the ideal line length. Print media, especially newspapers, don’t hesitate to use even shorter lines. Why? Because they can, by laying out text across several columns.
If you use a fixed width that is any wider than the smallest screen likely to visit your site, you will annoy and frustrate users who have to scroll sideways to get to the rest of your content.
I also use a layout between 950 and 980px and always centered unless the client demands otherwise :)
Please keep in mind that monitor resolution often quoted in statistics is not necessarily the same thing as inner width of browser window. Users may have additional sidebars/toolbars, use non-maximized browser window. The bigger the screen, the less likely you want to use it all just for one page.
Very long lines of text are harder to read. The optimum is 25-30em (depends on many factors, but you shouldn't simply go for maximum).
Mobile browsers have "virtual" screen resolution they use for zoom and it's ~960px in Opera Mini/Mobile and Mobile Safari.
I vote to divide the motion here. Just because screen sizes are X doesn't mean that X or anything that is close to it is the best design for your website.
Your website purpose has a lot to do with the width that you choose.
Many marketing experts think that a more narrow column "converts" more visits into sales. Perhaps this is because it is easier to direct people's attention if the page is narrow.
On the other hand, a site dedicated to images should show at the best available resolution for each visiting browser.
At one time it was 800px; however, more and more sites are beginning to use 1000px. This is driven by the fact that, more often than not, visitors' low end resolutions are at 1024x768. The additional 24 pixels leaves room for the browser chrome, padding and margins you may want to manipulate, etc.
Just to give some perspective, even the new wave of netbooks with their tiny screen have resolutions of 1024x768.
But, above all else, know your audience as @warren suggests and capitalize on that.
You could try developing multiple layouts and use Javascript to switch between them depending on the visitor's window.innerWidth
That said, I usually use something between 950px and 980px.
The maximum website width for optimal performance and cross-monitors compatibility is 960px when it is related to desktops and laptops.
For more details on how and why see the following article:
According to these statistics, a minimum of 1024 pixels wide will cover most users.
