What is the BEST Web site Width?

[Stevie D]

The general rule as far as I know, is that a website should be viewable at a 960px width (or viewport). But as said earlier there are different ways of defining width. Percentages are best, but it's hard to design for and make it work across all devices. I always go for the 960px approach, but set this to work as a min-width, so that if a user has a wider screen, margins, padding and so on will adapt to this.

One thing to be careful of is that a 960px screen does not mean you have 960px to play with. For example, a common screen width is now 1920px. A lot of people will have two windows side-by-side, so each window is 960px wide. But that 960px has to include the browser edge/border and the scrollbar – you may only have 940px of actual screen real estate to use. So your carefully crafted site that is exactly 960px wide is now too wide, the edge disappears off the side and your reader has The Dreaded Horizontal Scrollbar.

That's why 960 is a bad width to work to.

[Ryum]

One thing to be careful of is that a 960px screen does not mean you have 960px to play with. For example, a common screen width is now 1920px. A lot of people will have two windows side-by-side, so each window is 960px wide. But that 960px has to include the browser edge/border and the scrollbar – you may only have 940px of actual screen real estate to use. So your carefully crafted site that is exactly 960px wide is now too wide, the edge disappears off the side and your reader has The Dreaded Horizontal Scrollbar.

That's why 960 is a bad width to work to.

I've never thought about that! It's an interesting way to look at it. But what does a user running two windows side by side expect from a website? I tested the "setup" myself, and discovered that most major newspapers, company websites, YouTube, Facebook and even Google had a horizontal scrollbar. The only website capable of viewing it this way is sitepoint.com (although I didn't check a lot of sites). So I would assume the "screen splitters" expects horizontal scrollbars. Now consider the number of users not splitting their screen, and the standard resolutions today. Is it worth a 20px sacrifice?

[cgCody]

There may be a lot of websites still using 960, but we can't allow ourselves to get stuck in the past because "others are doing it". 960px static sites are on their way out the door sooner or later. The site I'm currently working on is a 60em (960px at 16px base font) design, with media query break points to collapse the columns for smaller screens. I get to have my 960 cake, and smaller screens, and browsers with large text get to eat it, too.

[heatwaveo8]

Ryum, I agree with you completely. The majority of web site visiters today use a screen resolution larger than 960px wide, and 960px 'is' the official standard for many Web Development teams in the industry. Most well-known web sites use this standard or something close to it, usually not exceeding 1000px, including Apple and others. They may use CSS or JavaScript if desired to get the web site to look nicer on mobile and tablet devices, but this is under their own discretion and is generally done by a separate team in a company setting. For anyone using a smaller computer screen, such as 800x600, they are out of luck and will have to resort to zooming out to view the whole page. I don't see a smaller resolution becoming an official standard for Web Development teams anytime soon.

[StevenHu]

Well after carefully reading all your comments, and there were so many excellent ones, I finally decided to go ahead with main Table fixed width of 950 and then then inner Tables set at 100%.

Now the good thing is I generate all the page widths via Php so by changing one file all of the site was instantly set to new width.

And what do you do when you discover that 20% of your readers are using mobile devices? Wouldn't responsive web design be best?

[Ryum]

And what do you do when you discover that 20% of your readers are using mobile devices? Wouldn't responsive web design be best?

Of course a website able to fit any device is the best thing to make, but this involves putting a lot more work into it, and also restricts your options while designing the site. When you say mobile devices, does this include tablets? Some tablets, like the new iPad, supports desktops resolutions with no problems, and are mostly able to interact with through a standard web interface. I would say this leaves us with iPhone, Android and Windows Phone users on small to medium displays.

As a designer, you should do some research and analysis of the potential user group and figure out if they are typical phone users, if they are likely to visit the site and so on. You should also think about the product you're making/marketing: Is it important for this to be easily accessible on the go?

If your results/thoughts show that mobile access is indeed important, then go ahead and make it responsive. If not, I would keep it at 960px for now. Saves time and gives you 960px of space to play on

[ferrelm3]

A 960px container div is ideal if you want to use a grid with 12 or 16 columns to have a proportionate layout. 960px is the most commonly used container layout. 980px is also used by many companies and gives a slightly larger space to show your content.
If you want to have a responsive layout, that is adaptable for any display size, then a fluid (percentage based) layout ideal.
Check out CSS frameworks such as Twitters Bootstrap. They use percentages for the layout

[MrThind]

write your page based on your visitors.
for 1024x768 resolution, use a width less than 980 pixels
for 800x600 resolution, use a width less than 760 pixels
for printing, use a width less than 560 pixels

[Stevie D]

write your page based on your visitors.
for 1024x768 resolution, use a width less than 980 pixels
for 800x600 resolution, use a width less than 760 pixels
for printing, use a width less than 560 pixels

DON'T set a width for printing, and even if you do, DON'T set it in pixels. Pixels are a screen measurement and make no sense in a printed media. You can set a width in centimetres or inches, but make sure you allow plenty of space for people who have wider margins on their printers, and remember that much of the world uses A4 paper, which is narrower than US Letter. Far better to just set a width of 100% for print (if you even need to do that!) and allow the design to fill the paper precisely without having to guess at how much space you have to print on.

[designforce24]

If you are going to make a fluid width website then width=100% is great but in fixed width websites its not good as most of people are using "Wide Screens" like LCD and LED type. In this case you can use website body width=100% and website wrapper width=960px is a standard with margin:0 auto to make this centered website.

[heatwaveo8]

A 960px container div is ideal if you want to use a grid with 12 or 16 columns to have a proportionate layout. 960px is the most commonly used container layout. 980px is also used by many companies and gives a slightly larger space to show your content.
If you want to have a responsive layout, that is adaptable for any display size, then a fluid (percentage based) layout ideal.
Check out CSS frameworks such as Twitters Bootstrap. They use percentages for the layout

That's true. If I remember it right, 960px gives a little more flexibility with ratios (more numbers you can divide by) and thus gives you more options for layouts than 980px, which is the primary reason I choose to use it.

[littlemisschic]

most new computers have a widescreen display so the bigger the better as you want to be able to view it easily and make use of your screen size, however i do have my site at 95% as just a bit of white space isn't so bad and for me i think it makes my site look more professional. It has been suggested to me to make a background design for the white space but my fear is that it might look a bit like twitter or you tube and lose its professional look. Honestly Every site is differant I think you should have a play about with it and see what you like best and what works better for the look you are trying to achieve!

[John Sammers]

I think 1280×1024 because all key information visible above the fold so users can see it without scrolling, it's also easy to read read the text in various columns.

[TechnoBear]

I think 1280×1024 because all key information visible above the fold so users can see it without scrolling, it's also easy to read read the text in various columns.

Only if you have a monitor with that resolution. If you have a laptop or an old computer with a smaller monitor, you're going to end up possibly scrolling both horizontally and vertically at that resolution.

Did you read the full thread before offering your opinion? The issues of different monitor sizes and resolutions have been covered several times over the last year.

[felgall]

Your page needs to still work when displayed on mobile devices where the available width may be as little as 400.

On computers your page needs to work at 940 as anyone with a screen more than double that width will generally use the window-arrow key combinations to open their applications up side by side.