How wide should you go?

TUESDAY, DECEMBER 11, 2007

One of the first things to decide when designing a website is how wide you're going to make it. When using a fixed width (as opposed to a fluid layout) we need to decide exactly how many pixels we're going to make it. Unfortunately, like most web design techniques, it's not an exact science therefore we utter the all too familiar words of "developing for the majority". We begin...

Firstly, let's take a look at some popular fixed width websites to see what they are doing. We've broken this down by theme since the theme will affect the desired width. For example, news related websites tend to require more space since they need to get more information on the page. On the other hand, a typical company website has less information to convey and does not require such a wide page.

We've chosen the latest crop of websites to show how cutting-edge websites are being designed. Given the rate of change within the industry there would be no use in giving examples of websites designed even 2 years ago.

News
BBC (www.bbc.co.uk): 770 pixels
The Guardian (www.guardian.co.uk): 940 pixels

Social Networking
YouTube (www.youtube.com): 855 pixels
Facebook (www.facebook.com): 780 pixels

Technology
Microsoft (www.microsoft.co.uk): 934 pixels
Apple (www.apple.com): 980 pixels

General Sites
British Airways (www.britishairways.com): 760 pixels
Ferrari (www.ferrari.co.uk): 950 pixels

Now, let's take a look at some stats - what screen resolutions are our visitors using?

The latest stats from W3C (World Wide Web Consortium) from January 2007 show the following screen resolution figures:

Higher: 26%
1024x768: 54%
800x600: 14%
640x480: 0%
Unknown: 6%

It's clear that the majority (80%) of Internet users are currently using 1024x768 and above. However, a large minority are still using 800x600 – causing somewhat of a dilemma. Should I design for the 80% at the expense of compromising the browsing experience of the 14%, or, keep the 14% happy and fail to make the most out of the space provided by the 80%?

Once we have taken into account the scroll-bar and other possible side-bars we can discount around 30 pixels from the page width, giving us around a minimum of 770 pixels to play with.

It's worth noting that 14% of the world's Internet population is around 164 million users. The latest stats show over 1.1 billion Internet users worldwide. And it's growing...

So, how wide should you go?

There's been a significant shift over the past year or so with more websites pushing the width to 1024x768. More and more Internet users are becoming 'web savvy' and are increasing their resolutions accordingly. Your target audience plays a big part in your choice of design. The latest social networking sites are primarily targeted at 16-30 year olds, which are far more likely to be running a larger screen resolution.

Every designer will have their own opinion (and it is an opinion) on the page width dilemma. When we are confronted with a new design project we ask ourselves the following questions:

"Is there lots of content which needs to be displayed on a page OR is the target audience 16-30? If so, then consider designing for 1024x768, otherwise, go for 800x600."

Of course, it is entirely possible to create a website which caters for both. Using CSS to control the width of the page (and page elements) it is possible to have different versions depending on the screen resolution. Remember to keep it simple though since we don't want to go down the route of past years when we had different websites for the multitude of browsers and screen resolutions!

We're seeing more and more users on higher screen resolutions so it won't be too long before the minimum resolution will be somewhere around 980 pixels. Until then, we must take the 800x600 users seriously.

Posted Dec 11, 2007 02:40 PM by Andy Crathorne | Permalink | Send to a Friend

Bookmark with:
Delicious Digg reddit Facebook StumbleUpon

Comments (15)

Gav wrote:
Great article, I'll be checking for updates regularly.

Regarding screen resolutions, I seem to remember there was some controversy when alistapart.com changed to a fixed width 1024x768 resolution. Looking at the W3C stats, it seems that resoltion is dominant now.

I think the price of widescreen TFT monitors is making a big difference, as you can now get a 22" monitor for £170 which supports a native resolution of 1680 x 1050.

cheers
gav
Posted on 24-Dec-07 at 2:56 pm | Permalink

Devon Website Design wrote:
We have been designing websites for 1024x768 for several years now. To keep our site as easy as possible to use for people with 800x600 resolution we try to keep our navgation towards the top left of the screen.
Posted on 06-Jan-08 at 1:29 pm | Permalink

Andy wrote:
Hi

Simple fix to keep all happy - use the percentage markup instead of fixed pixel width. Then it makes little or no difference if they are at 800x600, 1024x768 or higher or even lower (taking into account that those on a lower resolution will also highly possibly be using an older type browser).

use a fixed container again set with a percentage (99% is best so as not to overflow) and then your elements are blocked out with the container.

result? Cross browser and full resolution compatibility. You just gotta love CSS - awesome abilities when utilised correctly of course
Posted on 06-Jan-08 at 2:52 pm | Permalink

bigbluealien wrote:
The perfect design will resize for any resolution (within reason), it may take a long time to get right but there's no reason your site shouldn't look perfect in any of the common resolutions.
Posted on 06-Jan-08 at 8:26 pm | Permalink

Jake wrote:
Really a great article for designers.. As for me, I guess the best size to use is 1024x768. Few people browse the internet on a 800x600 resolution. But still, it would depend on the site you are designing.
Posted on 10-Jan-08 at 1:12 pm | Permalink

web design company wrote:
Greath! Thanks
Posted on 25-Jan-08 at 12:55 pm | Permalink

Web Design Company wrote:
Great! Thanks
Posted on 27-Jan-08 at 11:38 pm | Permalink

christopher mcilroy wrote:
I tend to use 800 so the majority can see this site as it should be!

Chris
Posted on 01-Feb-08 at 7:58 pm | Permalink

Web Designer Group wrote:
Great tips. thanks. I think the most suitable resulution is 900 or above, bcoz, the fact, more and more users are increasing their screen resolution.
Posted on 14-Feb-08 at 6:27 am | Permalink

Cowhide Rug wrote:
Nice article!

I still choosing a ratio 4:3 and CRT monitors...hahaha, old skool

Posted on 06-Mar-08 at 1:56 pm | Permalink

Jason wrote:
It's good to see that, finally people are becoming smarter and are converting to 1024.
Posted on 11-Mar-08 at 11:36 am | Permalink

New Zealand Web Design wrote:
Totally over 900 px would be ideal, i would limit it to 960px still simply because 1024 x 768 supports that nicely!
Posted on 02-Apr-08 at 9:06 am | Permalink

Tauranga web design wrote:
Great post, I agree with a above posts! with people moving to 1024 as a minimum now, 950 - 960 is the max, but also probably the minimum.
Posted on 02-Apr-08 at 9:10 am | Permalink

Sonali wrote:
Nice post. For me, it's 1024x768.
Posted on 03-Jul-08 at 9:45 am | Permalink

Sleek wrote:
Interesting and useful post.
Posted on 03-Jul-08 at 9:48 am | Permalink

Have something to say?

Have some interesting comments or thoughts on this blog? Perhaps you have some questions? Maybe you want to share your knowledge? Either way, write it below.

Please note that all comments and URLs are subject to approval and may be amended to suit editorial style and subject matter. Website addresses will only be published after approval.