topic title

You need to ensure your site looks as good as possible on different screen resolutions. Once again, you just don't know what screen size will be used to view your pages.

In the first place this is because monitors come in different sizes. If you're viewing this page from a computer cluster at Leeds University, you are probably looking at it at a resolution of 1024 x 768 pixels. That means, there are 1024 pixels across the screen, and 768 from top to bottom. But other resolutions are available. Some large monitors go as high as 1280 x 1024. Other smaller, or older ones, are as small as 640 x 480. (It is also the case that many monitors are supplied with this resolution as default, and a lot of inexperienced users simply aren't aware that they can change the resolution of their screen via the Control Panel.)

That's problematic enough, but it gets worse. Have a good look at the screen you're sat in front of right now. Even if it is a 1024 x 768 screen, do you have all 786,432 of those pixels available to you? Nope... the table below is a general approximation of what you actually do have as "live", available space:

Different browsers also use different proportions of this space. Users may also choose to view the Web in "full screen mode" (in IE, press F11). Finally, users may of course resize the window. The upshot of all this is that you simply have no idea what size of page is going to best suit any given reader. (Anyone who has a copy of Niederst's Web Design in a Nutshell might like to look at chapter 2 for more detail.)

Nightmare, right? Especially for those people used to print design, where they can simply create a template and then run off hundreds of copies that will all look exactly the same. Well - not really, and this is probably the prime situation in which (should you have experience of it) you have to ditch some of the assumptions that you were able to make in print design. In the lectures you should have seen a copy of a brilliantly-designed printed page that would be an absolute nightmare to produce on the Web. That's not a sign that it was in fact a badly-designed page: it's simply a different medium. Unfortunately, as more and more print designers start working in the Web medium, they've brought certain assumptions along with them, and web design is worse for it. Please allow me to explain.

Personally I think any page that has to request of its readers, "please use IE 6.0 or higher to view this page, oh, and while you're at it, adjust your browser to 1024 x 768 and load Flash 6.0 or it'll look terrible" (OK, I'm paraphrasing, but some "professional" sites out there are almost as rude) is, simply, a bad page. You should be making the technical requirements of web browsing as "transparent" as possible: it should be your responsibility as a designer to accommodate the reader, not the other way around. Using a computer is scary enough for many people, so if you start making incomprehensible (to them) demands, they'll go to another site that is easier to use, and rightly so.

There are three main ways in which you can allow for a variety of screen resolutions. In the first place, try and avoid absolute widths - that is, table cells defined as a certain number of pixels wide, rather than as a percentage of the browser window. (See the page on table attributes for the distinction.) And don't include very wide images (or other objects such as horizontal rules). In this latter case, anything over about 600 pixels is dubious, because many old monitors still run with a width of 640 pixels, so you are starting to push against the limits of the screen. If a page overflows to the side, you will get the big no-no that is the double scroll bar; that is, one at the side and one at the bottom simultaneously. This makes pages difficult to read.

I've done my best on this site to make it entirely relative. If you resize this browser window, for instance, within reason you can see that the whole table layout, and the "diagram" table above, can still be viewed in their entirety even if the window is narrower. OK, the diagram above then slightly loses its point (as the proportions change), but sometimes you just have to accept that.

Don't specify text size too rigorously either. As described on the page about how text is handled, keep text size as free as possible, so users can make it larger or smaller at their own convenience. The main way to "fix" text is via style sheet controls (see the section on the full list of style sheet properties). Unfortunately this is becoming more prevalent. But reading text from a monitor screen is already enough of a strain on the eyes, particularly as one ages (you'll be over 45 yourself one of these days, you know). Add to this a tiny, 8-point font size which can't be adjusted, and long paragraphs that stretch all the way across the screen, and it becomes almost literally painful, and once again: people will go somewhere else.

Why annoy anyone at all with your page? Make it relative - make it flexible - make it accessible - make it better.

Back to the top

Back to the menu for lesson 6