Designing websites can be a complicated business. Unlike print design, where end users all see the same final product regardless, web users all see a design slightly differently. When designing for the web we have to accommodate different operating systems, different browsers, and perhaps the biggest variable, different screens.

Screens come in various shapes and sizes, the have different aspect ratios, display colours slightly differently and display at different resolutions. Screen resolution is defined as the number of pixels that a screen can display in each dimension. For example a screen that has a resolution of 800×600 can display 800 pixels across and 600 pixels vertically. To give you some indication of this sizing – the box that contains this article is 667 pixels wide. It is screen resolution that web designers have to consider most when planning a web site.

Accorrding to W3C (WorldWideWeb Consortium – the body that specifies standards for the internet), 20% of web users have a screen resolution of 1024×768 pixels, 76% have a larger screen resolution, 3% are unknown and only 1% have a smaller screen resolution (this doesn’t include iphones et al that obviously have a smaller resolution again) therefore we treat 1024×768 as the standard minimum screen size to design to.

There are various techniques we use to accommodate screen resolution. As a rule it is unacceptable to have horizontal scrolling on a web page. To accommodate this we can either limit the width of our design to ensure that it will fit on a screen. For example will make a wrapper that is 960 pixels wide and the content, including sidebars will fit inside this, leaving a visible background area. Another option is to specify the width of our designs using percentages so that what the user sees is relative to their screen resolution. While this sounds like a great idea to accommodate smaller screens, the problem is that users with larger screens end up with text all the way across the screen and the design is left feeling really sparse.

Accommodating for differences in vertical resolution can be a bit trickier but as a rule we make sure important information and key navigation are visible to the smallest screens. There is a metaphor in web design known as ‘above the fold’ which is a term borrowed from newspaper design where the most grabbing headlines are printed on the top half of the front page so that when newspapers are folded and lying in a stack, readers will still be able to see these headlines. In web design the fold is anything a user will have to scroll down to see. While this is a good guideline to follow, it is also true that web users have learnt to scroll and designs where too much is crammed into the top section can look crowded and unusable. A good post detailing this concept can be read here.

To illustrate how different users may view a site we have put together some screenshots of the twenty4 website taken at different screen resolutions.

And one last note – if vertical space is often a problem for you when browsing the web you could try:

• hiding toolbars at the top of you screen: view>>toolbars in firefox or right-click the toolbar in IE
• Try browsing in full screen mode – press f11 in firefox or IE
• try using google’s chrome browser which has minimal toolbars to maximise space

Liked this Post? Share it with your friends!

Or read some more from the Client Information Series!

• Writing effective content for your site.
• The importance of relational tree diagrams in planning your website
• What is a content management system or CMS?
• Designing for different screen resolutions
• All about browsers (and why we hate Internet Explorer)
• What is Search Engine Optimisation or SEO and why is it important?
• An introduction to HTML and CSS snd other coding languages.
• How to take a screen capture.