Best website width?

[dingbat]

Thought it best to post this here since all the web designers seem to hover here.

Simple question, it's likely to have been asked before but I couldn't find it.

What is the best website width to use these days? As an extremely amateur web designer I've always made my websites 760 wide for an 800x600 resolution. But considering PCs are so cheap now and many of the old CRT screens are in recycling centres, I was thinking working to a 1024 x 768 screen resolution audience would be safe. However, with all the massive sales of mini-notebooks recently is this a wise move?

Thoughts?

 

[Dwebs-Ltd]

Thought it best to post this here since all the web designers seem to hover here.

Simple question, it's likely to have been asked before but I couldn't find it.

What is the best website width to use these days? As an extremely amateur web designer I've always made my websites 760 wide for an 800x600 resolution. But considering PCs are so cheap now and many of the old CRT screens are in recycling centres, I was thinking working to a 1024 x 768 screen resolution audience would be safe. However, with all the massive sales of mini-notebooks recently is this a wise move?

Thoughts?

You should work on 1024x768 the vast majority of screens have that resolution or higher. Always double check your design on a higher resolution both on normal and wide screen.

If your design allows it you could do a fluid layout so it fills the screen area no matter the resolution but its not always simple and is reliant on good design.

 

[mobyme]

We tend to use 960; remember lots of people browse without fully opening their browser.

 

[U9Design]

I always make sites suitable for 800x600. There are still a lot of people who use this resolution.

 

[awebapart.com]

This subject has been discussed on quite a few threads here in the past:

Web design and screen sizes
Web design problems
Standard screen resolutions
Website - should I increase from 800x600 to 1024x768?

and we have a web design width article on our site:

Web design width and web screen size

Whilst most of these threads and articles talk about web design widths in general for any website, brochure site or ecommerce site, rather than just for ecommerce sites, they might have some useful information and views.

I was thinking working to a 1024 x 768 screen resolution audience would be safe. However, with all the massive sales of mini-notebooks recently is this a wise move?

1024 width is fairly safe nowadays especially if you have an ecommerce site with a lot of information. With the net books and mini notebooks, it isn't so much the width you have to be careful with, but the height, since there may be more screens with 600 height (1024x600).

 

[fisicx]

I always make sites suitable for 800x600. There are still a lot of people who use this resolution.

Really? I see less than 2% using 800px. The majority are 1024 and above but there is quite a rise in those using mobile devices so may be it's time to break out the handeld.css.

 

[designsbysteve]

960 is the optimum size just now. No point designing for 800x600 as so very few screens have that resolution these days.

 

[Recover My Image]

Best size for sites I think are 1024x768, that is what I make them

 

[gibby]

I don't think there is a set answer of what is best.
In the past few months we have had a few designers touting for biz and some tell us full screen is best but others have been telling us 80% is the current fashion.

Personally I don't like wasted space with empty side bars but its really down to you or you client. Look at the sites you do like.

not all web designers think like our customers, many of them like exciting sites, nice graphics, flash etc. We find customers prefer simple sites, easy to use etc.

G

 

[Jeff FV]

Take a look at this site:

http://www.w3schools.com/browsers/browsers_display.asp

It gives statistics as to what size resolution people are using.

Elswhere on the site you can find out what percentage are using IE (and which versions) Firfox etc.

Jeff

 

[phillipsinternet]

Firstly to answer your question, the maximum screen size to build to is 1003px as this will fit all browsers at 1024x768 (or x600 for netbooks).

So I always design for 1000px wide as this almost always works nicely. I never go lower than 960px wide.

RE screen size stats (and browser usage), take W3Schools stats with a massive pinch of salt - the site is almost exclusively used by techies who are often a couple of years ahead of everyone else technology wise.

The best insight will come from installing Google analytics (it's free!) on your site (or a friends) and seeing what sizes your visitors use. If after a month or two you find that a significant number use 800x600 then you can adjust your site (or vice versa).

Hope this helps.

 

[movietub]

800x600 is a good choice. I agree with another posters comment that 1024 is the most popular resolution but a significant number of people (mostly out of stupidity!) have their desktops set to 800x600.

But really the perfect answer is make the site resize to the page. Yes its a little more difficult - and certainly easier to go wrong... But you only need to design this once so may as well read up a little and do it the best you possibly can.

This will also help out people who view the site on small form factor netbooks etc. A small but very fast growing group.

www.warehouse-aquatics.co.uk stretchy site!

 

[Dwebs-Ltd]

But really the perfect answer is make the site resize to the page. Yes its a little more difficult - and certainly easier to go wrong... But you only need to design this once so may as well read up a little and do it the best you possibly can.

This will also help out people who view the site on small form factor netbooks etc. A small but very fast growing group.

www.warehouse-aquatics.co.uk stretchy site!

Liquid depends on the design of the site. If the graphical design doesn't accommodate the liquid style its impossible to code it to be liquid.

 

[movietub]

Liquid depends on the design of the site. If the graphical design doesn't accommodate the liquid style its impossible to code it to be liquid.

This is true in some cases but many people would say their site does not lend itself to liquid structure when in fact it is possible.

It's also fair to say that as this site hasn't been built yet now is a good time to influence design desire by what is most practical in the final product.

Many things are worth great consdieration when designing a site - but ahead of all else its a good idea if everyone can actually view it in the absoute easiest and best way possible. As a fan of widescreens its also quite gratifying when a website makes use of my paid for screen real estate. And gratification is also a good thing to have in a potential customer.

And I do sometimes feel sites only 800 wide look a little scrappy on very big screens.

 

[Dwebs-Ltd]

This is true in some cases but many people would say their site does not lend itself to liquid structure when in fact it is possible.

It's also fair to say that as this site hasn't been built yet now is a good time to influence design desire by what is most practical in the final product.

Totally agree

 

[That Guy]

If you make for 800 x 600 then you know you are safe. Partially Sighted tend to use lower resolutions

 

[stevemac]

I have to say I much prefer fluid/liquid type websites.

Most people these days use widescreen monitors & all the people that I speak to don't like whitespace down each side of the screen. It looks ugly & I have to say rather amateur.

If the design doesn't lend itself to a fluid layout - change the design!

 

[movietub]

If you make for 800 x 600 then you know you are safe. Partially Sighted tend to use lower resolutions

Safe - but a little lazy. Go liquid!

The simple fact is that half of tomorrows computer users will be buying tiny screens, the other half want huge widescreens.

And if its possible to make a website mould to the users screen why would anyone see that as anything other than thoughtful design?

 

[awebapart.com]

1024 width is fairly safe nowadays especially if you have an ecommerce site with a lot of information. With the net books and mini notebooks, it isn't so much the width you have to be careful with, but the height, since there may be more screens with 600 height (1024x600).

Looking at Dell's latest netbook spec for the Dell Inspiron Mini 10v netbook, Dell have gone for even less height (576 height) with a screen of 1024x576.

 

[i234i]

I always have any websites i get designed to re-size and suit all browsers (or as many as possible!) - Hate it when you go on some sites and they are huge or too small!

Think it gives a bad impression really!

 

[movietub]

800x600 is oldschool, 960 is what you need. In modern times 960 is most popular width Try B2bmadeeasy.com.

How can anyone say such a thing??

Surely its somewhat irrelevant what the most common resolution is. If you go for the lowest likely it will display on all screens. If you go for the most common it will display on only around 50% of screens properly.

There can only be two answers to the original question.

800 x 600 which is as low as near enough any internet generation PC will be set at.

OR

build a liquid template and get the best of both worlds.

A site of any fixed resolution higer than 800 wide will only display full width on less browsers - despite 960 being the most common setting overall.

 

[movietub]

Increasingly we live in a world where PDA's pcocket and Mini pc's, laptops are the norm. So while desktop screens are getting bigger, desktop usage is reducing

And those that are using the desktop are going for bigger and wider screens! It is true to say that websites these days need to look good at their tiniest and at their biggest.

So go liquid (or fluid, elastic, stretchy - all the same thing). And be done with it. And any design that doesnt suit a liquid template probably isnt as valuable as having the liquid template itself.

Just remember its not just the template that needs to resize, also the content needs to slide up to make the most use of the horizontal space.

I can strongly reccomend some of the dummies range of books as good intro to website design.

 

[movietub]

LOL. I learnt webdesign before there was a Dummies book on it!

I think I learnt:

80% of everything I have ever needed from playing with frontpage (and once I had learnt what I needed to do I immediatley realsied frontpage was useless at nearly all of it)

5% from reverse engineering other sites... (I know - but sometimes you see something clever...)

5% from forums, q&a etc

and the last 10% from a dream weaver CS3 ebook. Which taught me to do nothing new, but did point out there were tools in dream weaver I never knew about which made life easier!

Having looked through a few dummies books I would recommend them to anyone as a starting point without being to stuffy.

 

[emailblaster]

1024 is defo the way to go - hardly anyone uses 800 x 600 nowadays. A fluid layout is well worthwhile but it really does impose limits on the type of design you can use.

 

[movietub]

1024 is defo the way to go - hardly anyone uses 800 x 600 nowadays. A fluid layout is well worthwhile but it really does impose limits on the type of design you can use.

Am I missing something here? People keep basing the ideal width on the most popular screen resolution.

But surely you want the website to appear on the maximum number of screens overall? So should choose the lowest common denominator?

I fail to see the logic in going for a particular resolution just because it the most popular!

 

[stevemac]

Fixed width websites belong with the dinosours.

They may have looked good some years ago but they look absolutely awful on modern widescreen monitors.

 

[movietub]

Fixed width websites belong with the dinosours.

They may have looked good some years ago but they look absolutely awful on modern widescreen monitors.

Completely agree. Show me a website that can't be made fluid and I'll find a way. There are very, very, few exceptions to that.

 

[emailblaster]

It is all about what the average viewer 'expects' to see, if most modern sites are 1024, then give the viewer a format that they are familiar with and expect to see. People's attention spans are very short and the slightest 'quirk' to your site and they will be on to the next one.

At the end of the day a good well designed, well constructed site will work whether it is a fixed pixel size or a fluid design.

Is there such a thing as a definite right or wrong answer though???

 

[movietub]

It is all about what the average viewer 'expects' to see, if most modern sites are 1024, then give the viewer a format that they are familiar with and expect to see. People's attention spans are very short and the slightest 'quirk' to your site and they will be on to the next one.

At the end of the day a good well designed, well constructed site will work whether it is a fixed pixel size or a fluid design.

Is there such a thing as a definite right or wrong answer though???

What do people expect though? If the site is fixed width, the same viewer would get an 'expected' view on one size screen and an 'unexpected' view on another.

With fluid design they get both. Why would you, as a web designer, want to champion an option which only looks great to some people when another option exists which moulds to everyone?

I also strongly disagree that a well constructed fixed site will work as well as a fluid one. A significant number of viewers are still on 800x600, and when I use these peoples computers it is incredibly frustrating having to scroll left-right as well as vertically.

 

[movietub]

So many other things to consider. with fluid designs.. onmore complex sites you also need to consider:

Working arround fixed width images
Assessability
How the site looks when viewd RTL
How things collapse and concertina into each other ar the extreeme sizings (v large, very small

These things should be considered and then solved. A website only needs to be designed once. If it takes 10 times as long to build and is only 25% more popular as a result then it was still time well spent.

When I changed to fluid I used opaque png 1 pixel widthblockers to stop the page sizing down below 800px to avoid any silly crunching. This also helps pda and mini screen devices from attempting to pixel resize when they should in fact render a zoomed out view of the entire page width from the desktop version.

In the same way this forum looks good on any size screen - its the best way, and be honest, you wouldn't want this site to be fixed width would you?

 

[movietub]

Dont get me wrong - I am not anti fluid designs, they are just not the one size fits all (excuse the pun) answer that everyone is looking for or actually needs

But what benefit does fixed offer over fluid? Fluid can do everything fixed can (with a little effort) but fixed cannot do everything fluid can.

And for me settling for an easy option is a failing I would never want my business to suffer.

 

[movietub]

And if we want to split hairs, this isnt a fluid width site. It has a minimum width, which expands out from there. If you shrink the window, eventually you have to scroll. Its a comprimise, like all the other soloutions

Depends on your definitions I guess.

But it resizes well down below 800 before requiring horizontal scrolling. Since 800x600 was the minimum resolution you would get on a PC when they first started shipping 'internet ready' its as low as it is ever worth going.

Essentially no matter what size screen you view this site on it fills it. Thats better than having to scroll on a small screen or having acres of wasted space on an expensive widescreen.

 

[stevemac]

I'm sure you all know this already but when a visitor reaches your website, their computer tells your website exactly which browser it's using, the exact screen resolution, operating system, etc.

On the last site that I built (4 years ago), I added a little code which looked at the visitor's screen resolution & then applied the relevant CSS stylesheet. This was not a fluid design but having 2 seperate stylesheets meant that the site looked good in both 800x600 & 1024x768. The site had a specific target audience & these 2 resolutions covered virtually all visitors.

My point is that by using CSS for the site layout & a little imagination, a website can look just as good in almost any resolution - provided that the code is written properly.

I stand by my earlier statement - fixed width sites belong with the dinosours!

 

[movietub]

I stand by my earlier statement - fixed width sites belong with the dinosours!

Lazy dinosaurs?

 

[movietub]

Where fluid designs fall over no mater how much massaging you do:

• For sites containing mixed content that wont re-size, or it isnt economical in bandwidth terms to re-size e.g. Flash & movie files
• For sites where the designer isnt in control of the content - Some CMS/blog/database driven sites - This is because you cant garuntee that the users adding content will be as contientios as a designer at ensuring the correct ammount of info is added to ensure a balanced page
• For sites like this with content like banner ads - these are very important. - nad on this site for example - the ads dissapear, or are right out of the way depending on the screen width. There are 2 consequenses for this - the person paying for the ad doesnt see good value, and the person being paied per click, doesnt achieve the desired turnover
• For sites serving external content - again - you can fix things on your own site, it is much harder to format external content to fit the mould 100% of the time

This topic needs a fresh thread starting!

I believe there are ways of solving all the above issues, although I do accept that there is a cost in the form of design time. However websites make money by performing well and this benefit should outlast development costs and can in most cases exceed extra costs of adding new content in a suitable layout etc. So in short I believe in most cases it does come down to either ignorance or laziness. Or possibly short sightedness.

I am not 100% sure how most people define the differences between fluid/liquid/elastic. I tend to refer to them as one and simply follow the best practice of creating some fixed width areas and some which will resize. Like wise banners can become vertical banners which I see are becoming more the norm. Also flash content can in many cases be oversized so it appears to stretch out with the page resize, whearas in fact more just becomes visible.

There are certain designs which would be sacrificed to do this, but in most cases the original design brings less benefit than getting the exta content to appear in the visible area of the page.

I think website designers should think more like architects. Yes a building has to foremost be well laid out and functional. But with extra effort a great architect can make it interesting, fun and unique without sacrificing any of the usability. So in web design I don't like to side-step difficult areas or make a 'sensible sacrifice' because there is nearly always a way.

I'm building a site at the moment with semi transparent 'glass' areas which slide over one without using png or transparent layers - because older browsers would display them as ugly grey blocks. In the end I managed to do this by using a a fixed position background and a second fixed position background (with a frosted glass effect applied in photoshop) in a cell within which the content areas resides. The result is a page border which slides over the main page background looking like a piece of frosted glass.

How many designers would have scrapped the glass feature when the client said it HAD to look good on browsers of a certain age? And I'm not even a web designer by profession. More of a hobby that occasionally pays quite well.

 

[bdw]

One thing that has not been considered is that when reading text people find it much easier to do so with smaller widths or columns. That is why newspapers and magazines use columns and that is why this has been done almost since print media was invented. Would you like to try to read a broadsheet newspaper with no columns and lines about 600mm across?

Have a look at the post above and try to read it full screen without moving your head. It's not easy is it? It is also too easy to lose your place when lines are too long. This is where fluid widths fall down.

 

[stevemac]

Would you like to try to read a broadsheet newspaper with no columns and lines about 600mm across?
This is where fluid widths fall down.

This post just highlights the lack of thought that goes in to coding/designing many websites.

New concept - web page with more than 1 column.

New concept - CSS box model layout & correct use of absolute, relative & float positioning.

Oh - and there's the z-index too

 

[movietub]

One thing that has not been considered is that when reading text people find it much easier to do so with smaller widths or columns. That is why newspapers and magazines use columns and that is why this has been done almost since print media was invented. Would you like to try to read a broadsheet newspaper with no columns and lines about 600mm across?

Have a look at the post above and try to read it full screen without moving your head. It's not easy is it? It is also too easy to lose your place when lines are too long. This is where fluid widths fall down.

But where there is a will there is a way!

http://themaninblue.com/experiment/ResolutionLayout/

This site demos the use of js to listen for the browser window size and readjusts the page to suit.

Interestingly it is NOT presenting different versions of the site, rather the layout cell positioning is updated by js.

And of course the default layout will display a 'safe' presentation of the page if anyone has js turned off. As an expansion of this idea you could have extra columns sliding up as the page is expanded further.

So 2 columns on a netbook, 7 columns on a 24" widescreen display. Best of both worlds.

 

[movietub]

Great text demo, and it is a move in the right direction and is well thought out

Ufortunatally it doenst deal with:

• Mixed content that wont re-size, or it isnt economical in bandwidth terms to re-size e.g. Flash & movie files The example I showed could use fixed column widths and a variable number of columns. So it would be as easy to determine standard sizes for such files in column as on a fixed width site. Flash effects that are repeated animations can also me oversized without generating a proportionately larger file to load. For instance a raindrop effect across the top of the page could be used and appear to resize - wheras in fact just more becomes visible.
• Situations where the designer isnt in control of the content - Some CMS/blog/database driven sites - This is because you cant garuntee that the users adding content will be as contientios as a designer at ensuring the correct ammount of info is added to ensure a balanced page Again the columns and any other content areas can be a fixed size and simply change in configuration.
• Content like banner ads - these are very important. - on this site for example - the ads dissapear, or are right out of the way depending on the screen width. There are 2 consequenses for this - the person paying for the ad doesnt see good value, and the person being paied per click, doesnt achieve the desired turnover Vertical banner ads are the way forward. People noticed a long time ago that fixed width banners started to look a little stupid on a widescreen monitor. But once again I refer you to the practice of fixed width columns changing in number. The wider the screen the more ads are displayed. The chances of a given ad being display X number of times are calculable from the % of different screen resolutions that use the site.
• External content - again - you can fix things on your own site, it is much harder to format external content to fit the mould 100% of the time See all above!

At the end of the day appraches such as the site in the example break the former boundries of design not by offering a different approach - but by being more advanced and intelligent.

We can all accept the fact that not one site layout will work from 30" to 2.5". But using js we can make the layout itself smart enough to adapt. Because it adapts rather than stretches the issues you state above are no longer a problem.

In the same way a program running on your desktop is not confused by different resolutions or resizing niether should a webpage. Ultimately designing a modern dynamic website should be seen as bigger a development as a new piece of desktop software. Facebook uses JS to such an extent is effectively a piece of standalone software which monitors almost every instruction the browser recieves. Hence the back button still works without disrupting the chat functions etc.

Clever!

 

[brownie]

Nothing wrong with fixed width sites if done properly, one of the most visited websites in the UK is fixed width and I've heard very few complaints about its design.

www.bbc.co.uk