Question

Back in the day, 800 x 600 was the screen resolution to design for – and maybe 640 x 480. Then along came 1024 x 768, etc, etc, etc.

But then it gets worse: now we have not only different resolutions but also different aspect ratios.

What strategies do people use to accommodate today’s ever-expanding range of screen sizes and aspect ratios?

(BTW – I was only thinking about laptop / desktop hardware, but of course there’s smart-phones and tablets to consider too.)

Answer 1

I know this would be a somewhat controversial opinion, but I’d say it anyway: Don’t

Don’t design for multiple screen sizes or aspect ratios. There are of course a few exceptions: Heavy web applications like webmail clients can definitely do with more screen real estate, and are probably flexible enough to accommodate a large range of screen sizes anyway. Mobile versions of said website, with a more flexible design to accommodate the incredible spectrum of mobile screen sizes can help too for sites with high mobile volumes. However, if you stick to the so called ‘desktop web’, then I think we can say that 95% of the time there are more important things to care about than screen sizes, resolution and aspect ratio.

First off, lets tackle the easy one. I don’t really understand why you would care so much for aspect ratio – it isn’t like we care that much for the ‘below the fold’ nonsense anymore, do we? The web is a vertical medium – scrolling will always have a place in websites. Having everything above the magical 600px line is just stupid.

Next, screen resolution/size: Again, I find it difficult to defend.

Users with large screens do not usually maximize their browser windows, because they find that most website do not take advantage of them. While the web adjust to the user, the user also adjust to the web. Although you could argue that this is a chicken and egg problem, the fact remains that website are usually designed for the lowest common denominator. I’m not defending this position, but rather, pointing it out as the current prevailing trend in the industry.

There are certain things that simply won’t work with resolution that are too high or too low. There is, for example, a small range of widths that allow people to read comfortably on screen. Any longer and the amount of movement for the eye to the next line would be annoying. Too low and the text would appear cramped. The fact that the web was designed to be resolution neutral means that paradoxically not many provisions has been made for those who wish to build fluid layouts. min-height and max-height would help, of course, but the wider the range, the more difficulties you will face. Things like orphaned elements, displaced images, backgrounds that run out, etc. are unavoidable for truly flexible sites built with today’s technology.

So my opinion is that the simplest method for dealing with multiple resolutions is to ignore it altogether – with today’s technology there are not many options anyway – and design for the lowest common denominator.