What is a good size for Page Width so your website is usable by a large audience?
And why do you say so?
Debbie
That’s a topic of great debate, the best answer is that should not DEPEND on fix width. OK, That’s my disclaimer, now here is my convoluted preferred practice.
-
I like to make the USABLE ( anything inside the body tag) width to be a multiple of 160px… this only because it makes it easier to convert the styles or even plan them to degrade functionally for mobile devices such as iPhones.
-
I chose 960px because it complies with the rule above. Although the average monitor has gotten so that it can support MUCH bigger sizes, you will find that ( on average, remember the user can change any setting), really wide blocks of text are difficult to read.
The complicated stuff:
Considering the above, you could make your site wider, and still maintain comfortably narrow text blocks… by having more “columns”… of course that means more possibility for vertical scrolling.
You could also set a BIGGER text/head line size ratio.
A good width is the one that fits the devices that your audience is viewing with.
If you are targeting mobile devices than a 1024px width is no good (or vice versa).
The easiest solution is to have a fluid width that adapts to all and then adjust for more capable devices.
Read the following link and although it applies its primarily concerned with mobile devices the logic can be applied to all.
http://yiibu.com/articles/rethinking-the-mobile-web/
For capable sites I prefer an elastic site (one that has a min and max-width) which defaults to fluid for less capable browsers or mobile devices.
There is no one answer these days as the iphone, ipad and 27" monitors are all common place and it depends on who you need to support
Small business sites seem to be mainly fixed with still and I rarely get asked to produce a fluid site for a small business.
Paul…
1.) I am planning on using your world-famous 3-column, fixed-width layout where the left and right margin adjust to fill in the difference between the fixed-width part and your monitor size.
2.) My target audience is PC users.
3.) I thought I had saw someone on here throwing out a number like 800 pixels? :-/
Debbie
If you are aiming at mainly pc users then I would go with elastic and stretch from about 700px - 1200px approx.
More info here:
http://www.hobo-web.co.uk/seo-blog/best-screen-size/
The width of my browser window. And I’m not telling you what it is. In fact, it varies, depending on which computer I’m at and what I’m doing.
Ideally, your site should be flexible enough to fit to whatever size my browser window is, although you would probably want to set a max-width to avoid it getting too big. People use a range of computers and other devices with a range of screen sizes, from mobile phones through netbooks/old PCs to high end widescreen monitors. Within that range, people will have their resolution set to varying values, and some people will maximise their browser window while others won’t, and some will have sidebars open. (eg, on my home PC, which is 1280×1024, I don’t have my browser tabs maximised, because it makes them too big, and lines get too long to comfortably read on textual sites - viewport width is about 960px. On my laptop and work PC, which are both 1024×768, I do have my browser maximised. On my mobile phone, for graphical layouts it assumes a width of about 840px)
But if making a flexible width is too difficult bearing in mind other design constraints and goals, it’s better to make it smaller than larger - if possible, go for 768px so that it fits comfortably on an 800px screen. Anything larger than that and you will introduce horizontal scrolling for a significant minority of people … and horizontal scrolling is BAD. Most people are not going to worry if the website is narrower than the available space, but plenty will complain or miss out on things if it’s wider.
Ha ha!
Ideally, your site should be flexible enough to fit to whatever size my browser window is
Well, that is why I was thinking of using something like this from Paul O. (Honestly, he has so many examples, that I forget the exact name of the one I wanted to use, which was a few months ago. I just remember the name had “3-column” and “fixed width” and “sticky footer” and used margin: 0 auto; so that it adjusted reasonably to different width monitors. I think the link above is what I decided on?!)
if possible, go for 768px so that it fits comfortably on an 800px screen.
You lost me?!
What is the significance of 768px (wide??).
And how does 768px become 800px??
I was going to a design like KLPX-FM which I believe is similar to Paul O’s (although not a sophisticated).
Debbie
Debbie
to answer at least one of your Qs. it (768px) doesn’t “become” 800px… but you have to consider that the browser it self takes up some screen real estate. So, if your target audience happens to use a resolution of 800px wide. and you made your site 800px, you’ll get a scroll bar(at least most times) … because the vertical scroll bar from the browser will take up 25-40px (or so) and there might be left-edge… to the browser window of 5px.
Also the user may not have his the window maximized to the size of his screen ( it’s nice to be able to click onto the desktop w/o having to minimize or close he browser window all together and leave your site, would you?)
So the “significance” is 800px - (estimated vertical scroller+ possible right border + few pixels to be able to see the desktop)= 768px.
Oh, okay, that makes sense!
So, do you agree that I should shoot for a website that is 768px wide? (Kinda “skinny” isn’t it?!) 
Debbie
If you are going for a fixed width then 748 pixels is the figure that makes the most sense because then you don’t need a separate page design for printing as 748 pixels is the screen equivalent to what is almost certain to fit across the page when printed.
If you go any wider than that with a fixed width then you need a second version of the stylesheet to reduce the width for printing.
So you wouldn’t go any bigger than that?
I had a really nice 3-column layout from Paul O but it is different than his one here.
I am torn which one I should use? In the version I have, it is a 3-column fixed-width with 100% high columns and a sticky footer. (Not sure if you know which one I mean?!)
I actually picked it on from another thread on here last Fall.
Is the “max-min” feature really worth redoing everything and adding more complexity to my home page?
Debbie
WHICH you’ll notice so far the ‘names’ on the site that have answered you said don’t fix the width – there’s a reason fixed width is a miserable /FAIL/ at web design, and don’t let the PSD jockey who call their goof assed non-viable artsy drawings tell you anything different, unless you want to piss all over accessibility.
I don’t even like 768 anymore, even though it was the accepted norm. Browser chrome seems to be a bit bigger these days, so usually I’m setting my min-width to 752 and max-width to either 1104 or 1238 depending on the page and it’s content.
Min-width and max-width are easy so long as you don’t get your hopes set on bandwidth chewing wasteful images that just get in the way of your site’s content… a typically decent declaration for an outermost wrapper being:
body {
text-align:center; /* center #pageWrapper IE 5.x */
font:normal 85%/140% arial,helvetica,sans-serif;
}
#pageWrapper {
width:95%;
min-width:752px;
max-width:1280px;
margin:0 auto;
text-align:left; /* return to normal behavior after IE 5.x fix, see BODY */
}
* html #pageWrapper { /* IE6- support */
/* first set narrowest fixed width for when scripting is disabled */
width:752px;
/* then implement fluid width using IE expressions */
width:expression(
(document.body.clientWidth>1152) ? "1104px"
: ((document.body.clientWidth>800) ? "auto" : "752px")
);
}
That’s lifted right out of the baseline screen.css I build most sites around. Said sites typically being a fraction the size of the bloated train wrecks people vomit up today, while working on everything from IE 5.5 to the latest flavor of the week browsers.
With the wide range of possible screen sizes, resolutions, ratio of resolution to size (aka dot pitch) it’s idiotic and lazy to design to a fixed width – in many ways I find fluid easier to deal with code-wise as you DON’T have to calculate perfect widths on everything.
As I like to say, let padding and margin do their jobs so you don’t have to declare ANY widths on your content column elements. Just as not every element needs a class or ID on it (much like George Carlin’s joke about "not every ejaculation deserves a name) people go just as crazy setting widths on things that typically don’t need that declaration either. Three column layout you declare more than three widths, you’re probably screwing up. (outer container and two fixed columns).
But again, layouts are only as complex as you make them – and JHVH people like to take simple layouts and make them needlessly complex. Even MORE pathetic when it’s made more complex in the name of making it “simpler”… Which seems to be the current trend in web development – selling needlessly complex, convoluted and bloated code as if it somehow makes things better, easier or simpler.
Sorry, I’ll get off the soapbox and stop ranting before I start pissing on the idiocy of CSS frameworks, Javascript libraries and the train wreck known as HTML 5.
Bzzzt! 748px is too wide for A4 paper with 1cm margins left and right (on my setup anyway).
It’s good practice to make a separate print stylesheet anyway, because there will usually be quite a number of things you will want to change to optimise it for printing in order to make best use of whatever size paper the user has.
Stevie kind-of said my immediate reaction to your post – My version of it was more along the lines of “What the devil are you sending PX in your print stylesheet for?!?” (Ok, it actually had profanity in my initial reaction)
There’s a reason we have the MEDIA attribute. Of course I’d LOVE if they actually treated PX as PX for print instead of arbitrarily scaling it up a factor of 30 to 100 – most people’s pages rendering 2.6" to 3" wide at 300dpi… much less the micro-dot effect on a 1200dpi printer.
Bottom line anything in my SCREEN.CSS which I send with media=“screen, projection, tv” I do NOT want being printed.