Hi.
What is the maximum width you should use for a webpage?
I have created a webpage which is 1000 px wide. I would like to make it even wider if possible. Or is that not recommendable seen from a usability perspective?
I still try to cater to 800x600 (760px wide) users still, but I would say 1000px is acceptable these days. It seems most of the layouts I’m handed to slice/code are 1000px wide.
You’re never going to be able to make your design work for absolutely everyone so I like to go by a rule of thumb - design for at least 80% of your audience. You can get a rough idea of what display resolutions people are using here.
Using a min-width of 760px and a max-width of 1200px, and centering the design, seems to work for me, but I don’t do commercial designs, so I’m not as constricted as some folks. It depends on your target audience. Like Ben, I want to make sure 800x600 users are catered to (more out there than we admit, especially in non-US, European, and Aussie locales), but the site doesn’t get lost in larger displays.
I’ve been utilizing a 977px width document.
Pretty neat tool to play around with:
http://grid.mindplay.dk/
100% 
… well, unless you are creating a horizontal scrolling page.
You can lay out a web page in pixels, ems or percentages, or a mixture of those—each method having its advantages and disadvantages. Arguably the web deserves maximum flexibility, as it is a fluid medium, but for some designs that’s not really practical. At least having max-width / min-width layouts can take the angst out of the narrow browser problem.
There’s no such thing as a minimum or maximum width… I would think the heavy rise in handheld devices would teach us that (perhaps not?). You should be using a liquid percentage based width or at least have something that flexes to meet your users demands (such as a fluid layout - which uses min/max-width properties). Setting an explicit width is setting yourself up for a fall, and a guarantee of horizontal scrolling. 
@AlexDawson Thanks for pointing out mobile devices and such, I’d never really thought of them before. Are there any CSS frameworks out there which are based on using a liquid percentage based width?
I am a novice. My site is 920px in width. Is it too small?
Thanks
The best is 100% as he said. However, now days, anyone hardly uses 800x600 screen resolutions. Most are 1027 and up (1027/724?)
To make a layout xxx amount of pixels will narrow down it’s ‘correctness’ for some viewers. IE; 1000px layout will be destroyed when viewing on anything less than a decent sized monitor.
Alas not that I am aware of, however it wouldn’t be too hard for you to address this by editing a framework replacing the absolute PX widths with percentage ones (and perhaps min/max widths). For example, if there’s 10 columns you would make each 10% wide (just make sure it’s close or exactly 100%). I would point out however that if you’re coding for mobile devices, you shouldn’t be using columns in the first place. If you have a screen that’s 10 inches in diameter, columns will try to push too much info into such a small space. Therefore you’re probably better off just having a single column measuring 100% width (no point wasting space).
However, now days, anyone hardly uses 800x600 screen resolutions. Most are 1027 and up (1027/724?)
Hahahaha. Welcome to the world of second-hand computers for non-profits, libraries, schools, hospitals, and more!
This is why I build for decent usability for 800x600 screens (not for mobiles, cause that’s still a lot of scrolling for them anyway).
The other reason is, people with larger screens often purchase larger screens in order to multitask: having several windows open at once. Meaning that 22" screen isn’t necessarily going to show your 22" website.
When forced to have a large minimum width, I console myself by saying, the sidebar may be offscreen but the readable content part still fits. : )
Yes it seems to be a common mistake among designers wanting to be able to utilize the “full canvas”. Screen resolution != Viewport dimensions.
I can understand the desire to have more artistic leeway, but the truth is that unless you’re catering to a specific set of visitors you can’t think in terms of a “hard” layout without risking they leave or turn off their CSS
The actual design and setup of the site can matter too.
this page does make you scroll at a smaller browser size, and because it’s fluid (obviously someone built this with large screens in mind) scrolling to the right shows the black background of the top menu going away, but most of the stuff people would click on are on the left, so it’s not a disaster that this site was built with the 33" screen in mind (or whatever lawlz). The fact that they rely on the black background to make enough contrast for the links at the top is a problem, though. They should have also given each anchor a black background as well. Example of a way to cater to the smaller-screened, and why one should still at least TEST their pages at the smaller resolution, to find small but important issues like that. Some of the site’s background images are orange like the links, so this is a problem (and easily fixable).
Some inner pages have some scrolling at 600x800 but not too bad, and the columns seem to fit.
Also a possibility: the front page be the big, gorgeous piece of artwork you intend, with all interactive stuff still clustering around the top left area, and have the informative inner pages conform more to smaller screens.
If you can make it work for your design, you’re better off not specifying an overall width. By putting an absolute width on it, you are limiting the innate flexibility of the web page to adapt to its audience.
Yes, you want to set boundaries. A min-width of 770px will ensure that it fits in a maximised window on an 800×600px screen, which is the smallest common monitor resolution out there, and will accomodate a 768px-wide ad banner, which if you are using those. A max-width of 1200px will ensure that the site doesn’t overstretch on wide monitors and that line lengths aren’t too long, because that makes reading more difficult.
But by allowing your design to adapt to the size of the viewport, you get the best of all worlds. Maximum use of the viewing area, meaning that the highest proportion of content possible is “above the fold” and that you don’t have any content hidden off the side. A design that fills the page, and only on very wide viewports leaves a blank area down the sides.
Your design should cater for 800×600px screens. A significant minority of people do still have their computers set to that resolution. Among people with higher screen resolutions, some will have sidebar panels open that will reduce the amount of space available for the page content; equally not everyone will maximise their windows, so just because someone has their screen width at 1280px doesn’t mean that their browser window is the same.
One of the key benefits of the web over print is flexibility. Allow your site to flex and bend, and it will stay strong. Try to make it too rigid, and it will break.
One of the key benefits of the web over print is flexibility. Allow your site to flex and bend, and it will stay strong. Try to make it too rigid, and it will break.
Yes, grasshopper. Bend like the bamboo, not break like the stick.
: )
I think what’s most important is to think of what the site visitors are using. True, that may be the same as users in general, but maybe not.
I did a very crude study about a year ago using YUI and some PEAR packages to get a rough idea about what my site’s visitors were using. There’s a 4% margin of error in that some viewports were 0px by 0px ??, some equalled the resolution (no browser chrome?) and some even exceeded it !?? The “oddities” are not included in the graphs.
But it does show both range and percentages enough to provide some insight.
The minimum viewport width was 38.7% of resolution size with the average being 92.5%
The minimum viewport height was 37.5% of resolution size with the average being 75.4%
This suggests that most visitors had the viewport maximized and the difference is resolution size less scrollbar and top bars (i.e. the browser chrome).
Still, the smallest viewport size was 122px wide by 110px high and as can be seen in the graphs a considerable percentage of visitors still had viewports near the 800 x 600 resolution size.
It looks to me like a 750px min width would be safest, but I shudder to think of how it would look at 1900px wide.
Looks like a “fold” of 350px is safest.
Then again I guess 1200px by 650px wouldn’t be too far off for most of my site’s visitors.