Articles and Tutorials > Designing for different screen resolutions

A designer's nightmare (in 2009, before responsive design became the order of the day)

A page is not a page

Real pages are of fixed sizes. Consider the magazine spread to the left. The pages have measurable dimensions. A competent print designer can be pretty sure exactly where each of his pictures and text blocks and headers will end up, how big the margins will be, which word in a particular column will end up next to the margin. And so on, and so on.

It's not like that with a Web “page”. People view Web pages on monitors with terrifyingly different screen resolutions: different sizes, and different shapes.

Are the differences really terrifying?

Let me give you some idea of the range.

For getting on for eighteen months, on my own personal site, I have been recording the screen resolutions used by visitors to the home page. (It's not that easy a job, actually. It was when I was trying to work out how to do this that I first came across AJAX, just before it took off.)

It starts OK. 55% of visitors have been using monitors set to a resolution of 1024 pixels by 768. That's a majority, right? Just design for screens of that size.

There is a grain of truth in this. Pages must look good at that resolution, since it's the most common. BUT 45% of visitors are viewing Web pages in screens set to a different resolution. That's far too significant a number to be ignored.

It gets worse

12.5% of visitors looked at my home page on lower resolution screens. And 32.5%—just about a third—looked at it in higher resolutions. Is it possible to cope with both? Let's say we cut pages down so that they look all right at 800 by 600. (I did have one visitor still using 640 by 480, who dropped in on the 26th February this year, but I don't feel too much guilt at ignoring him/her.) Then what about the 87.5% who now get second best? You can't treat a huge majority of visitors in such a shoddy way—unless you're the Royal Mail (see below). If my figures are representative, then nearly 90% of their visitors see a ‘page’ tucked into the top left corner of their screen.

And we still haven't considered the shape of the rendered page. 640*480, 800*600, 1024*768, 1280*960—it does exist—and even 1600*1200 (just 5 visitors so far): the ratios are the same, since they are all multiples of 4 by 3. Open up your calculator, if you want to check…

But what do I do about 1280*1024 (10% of my visitors, and the coming standard)? Let alone the new wide-screen resolutions: 1152*864 (just over 5%), 1280*800 (nearly 10%), and so on. Not to mention (wait for it) 1280*768, 1344*840, 1400*900, 1400*1050, 1536*960, 1680*1050, 1920*1200, 2048*768 (I promise), and 2560*1600—resolutions represented in every case by at least five visitors, and in some cases substantially more. (And mine is a small personal site, only visited by people looking for someone called Michael Scannell.)

I want to wake up!

Unfortunately, this is a waking nightmare. How on earth are designers supposed to work when the screens upon which their “pages” appear vary so radically in size and shape?

Home Page | Hosting Plans | Services | Questions? | Contact Us