[ back to index of articles ]
Designing sites for 1024×768
For a long time it's been the norm to design websites that will display at full width on a monitor with the screen resolution set to 800x600, but things are now moving on...
......................................................................................................
Just a few years ago, using a 1024 x 768 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 be designing for 1024x768?
If you're thinking about moving to a wider layout of your site, there are a couple of things to consider.
1. Your users / audience
If your audience is a tech-savvy crowd, you should be fine, but if your audience includes families and users outside the 1st world, you’ll still encounter lots of 800x600. In our case we were designing a site for an intranet which meant we knew 97% of our audience were using 1024x768 or above.
Check you site stats to find out about your users, if you don't have any stats, install Google Analytics, actually if you have stats already, still install Google Analytics, and use that instead.
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 scroll to find it? Bear in mind that users are used to vertical scrolling, but not horizontal scrolling.
If you decide to go for 1024x768, how could you use the extra width?
Assuming you're working with a traditional column based layout, there are a couple of options to consider.
1. Expand an existing layout to fill given space
A bit like a magnifying glass, 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 approx 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 should you 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. Fixed layout
If you are 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 have some graphical elements or page furniture that clearly extends into the right column.
The 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 I’d imagine that 99.9% of users aren’t interested in this level of customisation. Maybe they came up with this option when they couldn’t decide which layout to use…
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.
However, some designers don't like building fluid or elastic sites, because of the loss of control over the page layout.
3. Dynamic resolution dependent layout
Using a 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 this blog
If you're working on a site that has one main template this can work well, but if you're site has a few different templates, it can become tricky deciding which content can move and where it should go.
This approach also means extra design time, and extra development time, as each page needs designing and building in two styles.
Summary
In the coming year, more and more sites will be 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.
Fifteen tips for designing for 1024x768
- Think about your users, look at your stats
- Think about your content – how will you use the extra space?
- Do you really need to the extra width?
- If you do, design for 960 to allow space for browser furniture
- Don't try to squeeze in too much content, use the space to let your design breathe
- Consider a dynamic resolution dependent layout
- Consider a fluid or elastic layout
- Consider a fixed layout but don't hide content from 800x600 users
- Consider letting giving users control over how the site displays
- Don't let text columns become wider than 78 characters including spaces
- Look at other sites designed for 1024x768, see list below
- Test your designs with users
- More content above the fold means the visual hierarchy becomes even more important
- Remember where the fold is
- 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
This 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: sample_page_layouts_1024.psd
If you don't use Photoshop, here are the layouts as gifs, to use in any graphics program.
Want to read more?
These are some articles I found useful when researching our project:
A few sites designed for 1024x768:
| 
