What is the best width for a web page?

Whatever the user sets the width of the web page to in his or her browser.

Fixed-width web sites are an example of bad design, right up there with “best viewed in Internet Explorer 4.0” badges. Figure out the absolute minimum width you need for the site to function, and design it so that it stretches if the window is larger. “Liquid layout” are the keywords you should search for.

Whatever the target audience uses is what’s best. If your site is a government site, it needs to be viewable using even 8×6 (so ~700), but if it’s an indie zine design you could easily design using 900–1000 pixels (assuming your audience uses 1280×1024 or above monitors).

I still play it safe and use a 750 fixed width, centered layout, very much like Fluther’s layout. This ensures compatibility with 1024×768 monitors and above, and is mostly viewable in an 800×600 environment for those still at that (or old projectors). I rarely use fluid layouts but they do have advantages. I also design custom stylesheets or even displays for devices like the iPhone.

Fixed width is not bad design. Long paragraph lines are ugly and can be difficult to skim. Really it depends on the content. If you have charts or tables then there may be good reason to let the page stretch.

However, for articles or long bodies of text a fixed width is going to be more attractive and easier to read. There are problems with fixed width if not done properly, but it is generally better for that type of content. It can also be difficult to layout the controls of a web application is you do not use a fixed width. Again it depends on the type and number of controls, in some cases a stretchy layout will be ok.

And you can do both… have a stretchy basic layout and then control content that needs it with fixed width inner elements. The issue will remain though that some users with humongous screens seem to think that the browser should stretch all the way across and be filled. I’d prefer the content appear inviting for a majority of users than worry about filling the screen horizontally.

If you want to set a specific width it should be based on the users who visit your site. Hopefully, you have a site statistics tool that is tracking your visitor’s browser and other parameters like screen resolution. Otherwise, there is no “best” width. The size that Yahoo uses is probably based on the stats of their users and accommodates users with 800px wide resolution (800×600) or greater. This probably fits 95%+ of their users… and don’t forget they may have a different version of the site for mobile devices.

960px. Use the grid system for layouts.

http://960.gs/

I’ve never been annoyed by the width of a Web page, and I’m not sure why designers over-concern themselves with this issue. No one’s going to leave your site because it’s 800px wide instead of 750px. As long as you site isn’t 1800px wide you’ll be good. See what works best with your content, because that’s what matters most.
-Link

Flexible layouts are wonderful in theory, but pose quite a few complications for designers. The downside of going with a fixed width layout is negligible if you keep it viewable at 1024×768. 800×600 is very quickly falling out of use, and right now a 1024px screen width is the most common. Even the smallest consumer laptops have widescreen monitors, so even those miniature netbooks (which seems to have turned out to be a fad anyway) are running at a 1024-pixel wide resolution.

Well, from my experience, I’ve found a centered 960px site works best for me.

jumpo7 basically said it. Just to add my 2 cents…

Statistics have proven that it is far easier, faster, and less fatiguing for the human eye to read a column of text somewhere between 6–8 inches wide than a sprawling sea of text.

Looking at this page here on Fluther with my 22” monitor, one might say they should have made it a liquid format, because so much of my screen is wasted blank space. But they knew that would be an awful design for a site that is mostly text. Most of the sites I’ve built for clients are fixed-width (900 to 980), while a few are liquid, and look great on widescreen monitors. It depends entirely on the content.

Twitter was designed to be narrow on purpose, and it’s not because people are using ancient 800×600 monitors! And likewise, there’s a reason the image search on Google is liquid, so if you happen to have a big monitor, you can take advantage of that and see a whole lot more pictures at once than if it were fixed. Clever, both are based on different types of content, and both accommodate a user with any size monitor.

I also agree that you should check your visitor stats and see what resolution the majority are using. You can’t go wrong using real data like that to tweak your site for your audience.

There are two answers to this question, and both answers are based on the resolution that the page is viewed in. First, is the width (screen resolution) used by the people viewing the page in their web browsers. Second, is the width of paper used to print the web page. Since the pipe-dream of paperless communication has not been realized yet, both are important to consider.

I usually recommend using fluid web layouts, because they scale more easily, and they also allow users to re size their browser window regardless of their screen resolution. That being said, I fully realize that fixed-width layouts also have benefits.

The first consideration for a fixed-width layout, is the width of the user’s screen. If you have collected these statistics from your current website visitors, then you should cater to your current visitor base. If you do not have this information, or this is your first website, then you will need to use some more general statistics. If you search the web you will find many different sites that have collected browser statistics. At the time of this writing, the vast majority claim that 1024×768 screen resolution has nearly a 50% majority, with a significant number using 800×600 resolution, and no users with lower resolutions than that (some reliable stats can be found at http://www.w3schools.com/browsers/browsers_display.asp). After we account for window borders, etc. a generally good fixed-width for a web page is somewhere less than 980 pixels for 1024×768 resolution, and less than 760 pixels for 800×600 resolution.

Printing is a slightly different story. Nearly all home and office printing is done on 8.5×11” paper (standard “letter” size). The maximum “safe” width to allow printing on 8.5×11” paper is 560 pixels. This means that you have three options: 1) you can assume that none of your site visitors will ever want to print your web pages, 2) you can restrict your site to 560 pixels wide or 3) you must create CSS definitions for both widths, and use the media=“print” directive on your CSS tag (see http://www.w3.org/TR/html4/struct/links.html#edef-LINK). With this method, you can also hide certain elements, such as navigation trees or ad banners, to make the printed page less cluttered.

To summarize:

* write your page based on your visitors.
* for 1024×768 resolution, use a width less than 980 pixels
* for 800×600 resolution, use a width less than 760 pixels
* for printing, use a width less than 560 pixels
* to accommodate printing and a wider screen resolution, use the “media” attribute of the css tag

This is an excellent post and there are many useful links from the commentators. Bravo all, I joined this community because of this post. Thanks.