Web Design for Different Screen Sizes

When you design for print media you work with graphics and text and arrange them in a way that is both pleasing to the eye and conveys your message. With the web you have to do the same but there's a whole lot more to it.

With print, the publication has a fixed size. With web design, the size of the page can vary. Imagine trying to paint a picture when your canvas keeps changing size. Users view web pages through different devices and different software with different screen resolutions. Most web pages are still viewed on a computer screen but these days can equally be viewed on mobile phones, PDAs, web books, even games consoles. In terms of software, the main web browsers are Microsoft Internet Explorer and Mozilla Firefox but there is a whole host of others. You may have heard of Chrome, Safari, Opera and beyond that mobile devices use their own. Each web browser is a program designed to interpret and display web page code (HTML) but they all interpret it slightly differently so when writing the code you have to be sure it will display as you want it to. As well as conventional web browsers there are also specialised screen readers which read the text on a web page aloud for those with visual impairments. This is where accessible design comes into play. As if that wasn't enough to contend with, individual users also have different screen resolutions, some viewing the same content on a screen resolution 4 times larger than others.

Areas of the screen can be stretched or squashed to fit with the screen size and, rather than being given fixed heights and widths, are given maximum and minimum dimensions within which they can move.

So, when you look at a web page, you need to realise that what you see will probably not be exactly the same as what others see. The content should be the same but the layout will vary.

As people buy newer computers with larger monitors and higher resolutions websites need to be redesigned. The majority of users in the UK use a Windows PC with Internet Explorer 7 and a screen resolution of 1024x768 pixels. Three years ago the typical UK user would have been using Internet Explorer version 6 with a screen resolution of only 800x600 pixels. If you haven't redesigned your website in the last 3 years it's time it was optimised for the new generation of visitors.