Usability Articles - Human Computer Interaction and Interface Design

Sunday, 10 June 2007

Screen Resolution

When designing a web page or software, a very important consideration is the screen resolution to which your solution will work with. As at 7th December 2006, typical screen resolutions vary between 800x600 to 1280x1024 but may be as large as 1600x1200 or even 2048x1536. The problem is that you are torn between designing an application that makes use of both the large, expensive monitors' space as well as fitting into the smaller space without having to scroll to see the important information nor effecting the layout. There is no correct answer but there are a number of guidelines you can follow to help to in the right direction.

Screen resolution: Design heuristics

The following is a number of heuristics that you can add to your book of design principles, to aid in the design of resolution friendly web pages (or software).

• Optimise for resolutions between 800x600 to 1280x1024. The site should look its best at 1024x768 (midpoint), but still perform well at the nearer intervals. Of course, if your audience is specific, say a government department that all use widescreen LCD's, then obviously optimise for them.
• Try to avoid using fixed widths for page borders (max-width and min-width elements may be a great way to avoid this and are to be released in CSS3. Browsers such as Mozilla already support these elements)
• Use a liquid-layout; a liquid layout is a layout that stretches and compacts when a user resizes the browser window. This means that your page can adapt to different resolutions.

Considerations

• Place the key information at the start of your application. Not only will users not have to scroll around to find what they want, they will straight away place importance on it. This is not just a resolution friendly tip, but a very general heuristic.
• Write text in columns around 4-5 inches wide as this is the preferred reading width.