[ back to index of articles ]

Designing sites for 1024×768

For a long time websites have been designed to display at full width on a monitor with the screen resolution set to 800x600, but now things have moved on...

......................................................................................................

Just a few years ago, using a 1024x768 pixel screen resolution was reserved strictly for IT bods and designers. Many users didn't know it was possible to change resolutions and were often working on 15" CRT monitors (17" if lucky). Bigger monitors were prohibitively expensive.

According to W3C, in 2002 just 44% of web users had their screens set to 1024x768 and above, while 56% were using 800x600 or below.

Fast forward to 2008 where the price of a 22" TFT monitor has dropped to under £200, the same price as a 17" monitor would have cost in 2002, and the number of people with screen settings of 1024x768 or above has risen to 80%.

What does this mean for designers?

For a long time websites have been designed to display at full width on a monitor with the screen resolution set to 800x600. Designers would often mock up screens at a 770px or 750px.

But now an increasing number of designers are creating sites for screen resolutions of 1024x768 and above – look at yahoo.com or the Guardian home page.

We've just been working on a redesign where we decided to move from a 770 layout to one designed for 1024x768 users. At first this seemed like a simple task: more space = easier to fit content in.

But after a couple of months wire-framing and testing, we realised that it's more of a challenge than we envisaged.

Should you design for 1024x768?

If you're thinking about moving to a wider layout for your site, there are a couple of things to consider.

1. Your users / audience

Check you site stats to find out about your users. If your audience is a tech-savvy crowd, you should be fine to go for a wider layout, but if your audience includes families and users outside the 1st world, you’ll still encounter lots of 800x600 users.

In our case we were designing a site for the BBC intranet which meant we knew 97% of our audience were using 1024x768 or above.

2. Have you got a use for the extra space?

Just because the space is available, doesn't mean you should use it. There's no point in filling up the screen with superfluous graphics and stock photos. Is it really easier for the user to have the info on one screen rather than scrolling to find it? Remember that users are used to vertical scrolling, but not horizontal scrolling.

How could you use the extra width?

Assuming you're working with a traditional three column based layout, there are a couple of options to consider.

1. Expand an existing layout to fill given space

A bit like holding a magnifying glass over your page, you could just expand your existing design to fit the extra width. For a standard three column layout, this could mean stretching the width of your columns by approximately 20%, but there are issues with this approach:

• If your navigation is in the left column, it could become wider than necessary and look clumsy
• If your navigation is in the right column, it will become invisible to 20% of users
• Your central column could become too wide for easy reading of text. Try to keep text columns between 52-78 characters (including spaces), to keep it legible.
• Your right hand column could disappear from 800x600 screens, so the design looks complete without the right column, meaning the user never scrolls horizontally and misses content

2. Build an extension

Another approach is to use the extra space for a fourth column which includes extra content. This is the approach favoured by The Guardian who use their extra column for advertising and non-essential links. Then the site still looks complete for 800x600 users.

How to accommodate 800x600 users?

There are still many 800x600 users out there, so you need to make a decision as to how to best ensure your site works for them.:

1. Working with a fixed layout

If you're working with a fixed layout, design for a width of 960 to allow for browser furniture and users browsing without a maximised browser.

You need to indicate to 800x600 users that there's content to the right of the page. So if you are designing for 960, you could make the right column slightly over 200 pixels wide, which will bring its left edge to 760 so 800x600 users see the edge of the column and are aware of the extra content.

Alternatively you could use visual cues i.e. graphical elements or page furniture that clearly extends into the right column.

The Daily Telegraph site has a fixed layout and uses location of the search at the top to indicate to 800x600 users that the site continues to the right.

Yahoo gives users a choice of two fixed layouts which is a pretty user-friendly although.

2. Fluid or elastic layout

A fluid or elastic layout then is another friendly way to accommodate 800x600 users: your design will re-size to their browser, and they don’t have to think about it. Although this can mean a loss of control over the page layout for the site designer.

3. Dynamic resolution dependent layout

Using javascript it's possible to detect the browser width and select a style sheet for the page layout accordingly. This is the neatest solution. For example, content that appears in a right hand column for 1024x768 users can be moved below the main content in the central column for 800x600 users.

A full explanation of this approach is on particletree.com

If you're working on a site that has one main template this can work well, but if your site has a few different templates, it could get tricky deciding which content can move and where it should go.

This approach also means extra design and development time, as each page needs designing and building in two styles.

Summary

More and more sites are being optimised for 1024x768. If you're considering making this move, you need to think carefully about your users, your content and the way you structure your pages.

Tips for designing for 1024x768

1. Think about your users, look at your stats
2. Think about your content – how will you use the extra space, do you really need to use the extra width?
3. If you do, design for 960 to allow space for browser furniture
4. Don't try to squeeze in too much content, use the space to let your design breathe
5. Consider a dynamic resolution dependent layout
6. Consider a fluid or elastic layout
7. Consider a fixed layout but use visual cues to make sure you don't hide content from 800x600 users
8. Consider giving users control over how the site displays
9. Don't let text columns become wider than 78 characters including spaces
10. Look at other sites designed for 1024x768, (list below)
11. Test your designs with users
12. More content above the fold means visual hierarchy becomes even more important
13. Remember where the fold is
14. If it's not working, don't be afraid to revert to a 770 design, there are still many sites where this layout will be the most appropriate

Sample page layout PSD file

The below PSD file gives you some possible layouts that you might find useful as-is or to adapt as a basis for your designs. The file has the different layouts grouped as layer sets, so you can hide or show as you wish. Each layer set is designed to view individually, with the others hidden:

1. Sample Page Layouts PSD file
2. Or if you don't use Photoshop, here are the layouts as gifs, (compressed using winrar), to use in any graphics package

Further reading

1. Jakob Nielsen on browser width
2. Cameron Moll: "960 is good because it's easily divisable"
3. Mark Boulton on designing with a grid system
4. A list apart, elastic design
5. Fixed fluid or Elastic
6. Dynamic resolution dependent layout
7. Browser Stats on W3schools

Good examples of sites now designed for 1024x768

1. bbc.co.uk
2. news.bbc.co.uk
3. yahoo.com
4. guardianunlimited.co.uk
5. telegraph.co.uk
6. alistapart.com
7. thinkvitamin.com
8. coudal.com
9. boxesandarrows.com
10. and many many more...

To brush up your web skills, browse our portfolio of new media courses, covering Flash, HTML, CSS, Javascript, Photoshop and more.

This article was written by Sam Menter at BBC Training & Development.