Width of website

[simonm]

Hi

Any thoughts on width of website / webpage where a fixed width is to be used. I've looked for an existing thread but this doesn't seem to being discussed?

Generally I have aimed for 'fixed' page widths assuming an 800 by 600 screen, but that screen size was old hat some years ago now (well at least two).

With all sorts of screen widths and definitions out there but 1024 by 768 representing over 50% that might be the new 800 by 600. However, the overall screen width becomes less relevant, more important being the size that people prefer in their active window - that might still be 800 by 600?

Also, has anybody got a really excellent example of CSS drop down menus where the button to be clicked can have a background image and the drop down has a shadow?

All the best

Simon

[Dubbya]

These days, the vast majority of your users will have monitors capable of 1024x768 or better.

Here's a link to another thread where I've provided more info on max/min page widths and current trends. Web site with...

Dynamic Drive has a ton of CSS menus you can use. They've provided a bunch of styles to choose from, so you should be able to find one that'll do what you need it to do.

Dynamic Drive CSS Library- Practical CSS codes and examples

(They've also got CSS layout templates)

[tomcatuk]

Rightly or wrongly, I've given up on 800x600. There just seems to end up being huge quantities of design compromises as a direct result of catering for what is now a tiny percentage of web users. It's enough of a headache getting FF & IE to agree on how to render HTML as it is for me

[tomcatuk]

Incidently, my favourite place for CSS based menus.

[DaveSawers]

I much prefer fluid widths to fixed widths. Gives the user flexibility to set the browser window size they want whilst still working for the occasional dinosaur visitor.

[Webnauts]

Originally Posted by tomcatuk

Incidently, my favourite place for CSS based menus.

Have you tried with Firefox to resize that page +3 times? I first check the sites their selves before I look at their tips.

[nottheusual1]

906 pixels wide seems to be a very popular fixed-width number among our design crew.

Has been since 1024x768 or higher is over 80% of the market (roughly August of last year).

[Webnauts]

Originally Posted by nottheusual1

906 pixels wide seems to be a very popular fixed-width number among our design crew.

Has been since 1024x768 or higher is over 80% of the market (roughly August of last year).

This methology is fully out of date.

[Graf1771]

I tend to design my sites around the 980px width - sometimes only 940px if the design works like that.

Only about 5% of web users at home have displays only capable of viewing at 800x600. Although that might be rising again soon as more and more people start to use their Nintendo Wiis to surf (800x600 resolution on tvs).

The big problem over the next year or two is whether your site can be rendered on even smaller screens - PDAs, Mobile Phones, Nintendo DS, PSP etc.

As 3G mobile phones become more popular and services like T-mobile's Web'n'Walk (permanent internet access) you're going to find a high percentage of people checking emails, reading news sites, going through RSS feeds and other online tasks from their phones.

I already test my sites where possible on small-screen rendering (Firefox developer tools has a handy test) but it can still mean the occasional second CSS stylesheet to make things work fully!

[simonm]

Thanks all for the comments, of course there is the need to think of very small screens, I hadn't really thought of that though I might be inclined to go for an area of the website focusing on design specifically for hand-helds.

The Wii and other TV type browsers, I hadn't thought of that and could be important as the web site I am working on is aimed largely at the domestic market - though most access remains during work time.

The bbc website remains 800 x 600 ...

[DaveSawers]

Originally Posted by simonm

The bbc website remains 800 x 600 ...

That design is quite a few years old and I think you'll find it's about to change radically. The BBC are about to put adverts on the site for non UK viewers which will require a redesign.

[wige]

Every six months or so, Valve (the company that publishes Half-Life and CounterStrike, and runs Steam, one of the largest game content distribution systems) runs a survey of the hardware used by the vast majority of their customers. The results in this survey are somewhat slanted since most respondents are gamers, but the last survey showed 2% of over a million respondents were using a resolution of 800x600. Adjusting for the audience, this would indicate at least 5% of the general internet population is using this resolution. Many web site analytics applications show similar numbers around the web. The resolution is dying, but it is still in use enough to not be ignored.

By the way, the valve survey results can be accessed at Valve Survey Summary

[nottheusual1]

I love these guys - great browser numbers and really excellent tutorials on everything Web:

Browser Display Statistics

[Dubbya]

Originally Posted by wige

The results in this survey are somewhat slanted since most respondents are gamers, but the last survey showed 2% of over a million respondents were using a resolution of 800x600. Adjusting for the audience, this would indicate at least 5% of the general internet population is using this resolution.[/url]

Bear in mind that the biggest reason that gamers would choose 800x600 is to reduce lag while playing online at higher resolutions.

This in no way suggests that they leave their monitor set at 800x600 if they're not actively playing. You simply can't assume gamers surf the web at 800x600.

I'd tend to rely more on the data on the W3schools site where they're measuring users while they surf websites.

[weegillis]

Regardless of screen size, it is still prudent to hold the width of your main content to under 800 pixels, and some might even suggest as narrow as 600 pixels, which still nicely fits two columns of text. This closely matches a sheet of ordinary A5 paper (~8-1/2 x 11) with margins.

Every user has different preferences though we may be hard pressed to find any that have a fondness for the horizontal scroll bar. Fluid layout helps to some degree, as long as the developer places constraints on the main content size so that it doesn't slip off the screen for narrow width viewers. What some sites do to help curtail the horizontal scroll is to use javascript to collapse outlying content.

We should not assume that one size fits all when it comes to choosing whether to go with fluid or fixed. It really does boil down to intended audience and the purpose of the content. If your audience is largely made up of 'dinosaurs and troglodytes' then their special needs will be a major consideration. Fixed width still does have a place in the scheme of things, albeit perhaps a thin sliver in terms of the global pie.

[muziekpedia]

Subscribe for 1024x768 or better

[WDC]

I design my website accordign to 800x600

[tombstoneweb]

Since most of my wesites involve old west history and cater to the over 40 crowd, I design in 800X600.

[wige]

Originally Posted by Dubbya

Bear in mind that the biggest reason that gamers would choose 800x600 is to reduce lag while playing online at higher resolutions.

This in no way suggests that they leave their monitor set at 800x600 if they're not actively playing. You simply can't assume gamers surf the web at 800x600.

I'd tend to rely more on the data on the W3schools site where they're measuring users while they surf websites.

Actually, this survey data is taken from "inside" the computer rather than from an external web site, and calculated when the computer is at the Steam interface, typically after a reboot, and not when a game is running. Unlike the W3C statistics, this information is not dependent on Javascript, and because it is run as a "trusted" application, the data it reports is more likely to be accurate.

They have just run a new survey, starting on November 13, and this new survey shows a smaller percentage of users at 800x600. The new percentage is under 1.5%. They also added a category indicating monitor size. I think this is determined by looking at new variables reported by monitors. It shows that 9% of users have a 15" monitor, which is the size that typically defaulted to 800x600. (17" was 1028, etc.) This may indicate that people are raising their resolutions to view web and other content that is getting wider and wider.

[fahadp]

If you are taking about trend then look at hotmail and yahoo or gmail. These all are designed to be best viewed at 1024x768. Also new ajax and json based websites prefer this resolution. But it all depends on your target audiance.

[!aatm]

Here is a tutorial about css menus:
CSS Menu Tutorial - Horizontal and Vertical CSS Menus

Maybe it's helpful.

[jScott_Harris]

I have seen some sites they try to accommodate both styles at once pretty effectively. You can either set your body to have margins all the way around, or create a table/div or whatever at a width percentage less the 100%. Something like 80%, and you will get a similar look to a fixed width site, with the flexibility of fluid site.