Choose your resolution
The old rules for supporting screen resolutions were simple. Monitors were basically all the same shape and new ones just got a little bigger... so all you really had to do was support the standard resolution of new monitors, plus one resolution "back". Easy!
But these days the rules aren't so simple. Desktop monitors are generally bigger, but they come in a variety of sizes and ratios; and users don't always maximise their browser windows anyway. People are browsing on tiny mobile phones that weren't really designed for anything longer than a text message. Devices like the iPhone, Nintendo Wii and Asus Eee PC are new and shiny, yet their resolution is retro.
All of these displays are new. We don't have a situation where the major differences are divided between new and old, nor is there a linear increase in size as new displays come out.
To really see what this means, let's compare a selection of new device resolutions side by side:
(Statistics from TheCounter.com November 2008 resolution data)
|Nokia n95||240×320 (can be portrait or landscape)||Nokia n95|
|Nintendo DS||256×192 (dual screen; total viewable 256 x 384 across both). Not an especially common device for web browsing, but it is out there.||Wikipedia - DS|
|Sony PSP||480×272 (16:9 ratio)||Wikipedia - PSP|
|Apple iPhone||480×320 (can be portrait or landscape)||Apple - iPhone specs|
|Nintendo Wii||608×456 (pictured); or 1024×500 on 16:9 ratio TVs; may vary depending on TV/settings.||Web design guide for Opera Browser on Wii & update|
|Eee PC||7 inch - 800×480; or 8.9 and 10 inch 1024x600||Wikipedia - Eee PC|
|Average monitor||1024×768 is still the most popular browser window size at 45% share; and 1280×1024 is second at 31%.||The Counter global stats, November 2008|
|20 inch monitor||1600×1200||Average specs found on hardware sites.|
|22 inch widescreen||1680×1050|
So what difference does it all make? Didn't fluid layouts solve all our problems? Well, unfortunately, no they didn't.
bigger and... broken?!
There's nothing like a real-life demonstration to illustrate how much your monitor can change your browsing experience.
A few months ago I finally upgraded to a 22 inch widescreen LCD from my trusty old 17 inch Sony Trinitron CRT (which lasted ten years). At work I use twin 1280×1024 LCDs, so widescreen is a new frontier for me. I still occasionally feel like I'm watching tennis.
One reason I lingered at 1024×768 was the reality check - amazingly it's still the most popular screen resolution out there. The share is falling, but having dropped just 5% in the past year (from 50% to 45%), it's not going anywhere just yet.
So we keep supporting 1024×768 and I had generally thought that larger monitors wouldn't have any problems. But when I switched over, I was surprised to discover that many sites which work nicely at 1024×768 effectively "break" at 1680×1050.
what's bad at high resolution?
- Fixed width + left-aligned sites
- 100% width + fluid layout
- Tiny text
The single biggest annoyance for me is sites that are left-aligned and fixed-width. That means they're way off to the side on a widescreen monitor, so I'm either looking off to one side or I have to start messing around resizing my browser.
Fluid layouts don't solve everything, since line lengths can get completely out of control. Would you set a line length of 19 inches in print? Not for body copy, I'm sure. But that's basically what happens on my screen at 100% width - and it's incredibly hard to read.
The other major issue at higher resolution is text size - it's just too damn small! I'm forever zooming the page or even disabling styles completely. Designers, please, set larger text!
what's ok at high resolution?
- Elastic layouts
- Fixed width + center aligned
Elastic layouts do fare quite well, so long as they have intelligent minimum and maximum widths set up to preserve line length. Some go too far and end up being as bad as a fully fluid layout, but the good ones subtly adjust to use some more space. Bonus points for bumping up the text size for very wide screens (and I can only think of one here: props to nickcowie.com).
Fixed width, center-aligned sites are great, since they put the content front and centre and keep line lengths readable. At smaller resolutions it looks basically the same as left-aligned sites, so centre-aligned design adds a nice experience for people viewing at wide resolutions without causing any trouble on smaller screens.
so how do you choose a resolution?
With all this in mind, how do you decide on a base resolution to support? Even if everybody browsed with maximised windows it's not a straight call. You end up having to choose a middle ground - no resolution is perfect for every last screen.
Besides that, what does it even mean to "support" a resolution these days? So let's start by defining what we mean by "supporting a resolution".
define support levels
I'm suggesting a graded support system, the same way most of us treat browsers:
- Direct support
- A resolution where the user can view the default rendering of the site without horizontal scrolling, loading alternative stylesheets or some other form of modification. The design does not have excessive whitespace. Something that works at both 1024×768 and 1280×1024 would mean direct support for both.
- Oversize support
- A resolution where the design works even if it has a large amount of whitespace, eg. a fixed width, centred design.
- Cut down support
- A resolution where the primary content is on screen without scrolling, but the user scrolls to see secondary content (eg. having your main content area fit at 800px wide, but the sidebar etc requires scrolling).
- Alternative support
- A resolution supported via an alternative stylesheet, resolution detection, alternate template, device detection or some other modification from the default.
- No support
- You leave it to the user (or their device) to sort it out if they are using that resolution.
I'm sure we all have something like this in our heads anyway, but it's better to be precise and definite - particularly when the boss asks you to explain why the site was cut off on his Wii.
use your own stats to make decisions
Nobody's statistics are as relevant as your own, so you should always pay attention to them. Look to global statistics for trends, then apply those trends to your current state.
When I redesigned this blog I found that about 5.8% of visits were at 800×600, 18.6% on 1024×768, 23.5% on 1280×1024. The other 52.1% were at various large and widescreen resolutions above 1280px wide.
I set the minimum cutoff point for direct support at 1024×768 (minimum width 950px). At 800×600 you see the main content and middle column, but have to scroll for the third column.
Then I decided to use oversize support for large screens, capping max width at 1200px.
There's only 250px play between the min and max width; so the line length doesn't change by too much. I could just as easily have set a fixed width, but I prefer to let the design breathe a little.
I currently don't have extra stylesheets for mobiles and other small screen devices. Some random testing shows the site seems to hold up ok anyway. Essentially I'm leaving them in the "no support" category (I might be more interested if mobiles supported the handheld media type).
So basically the process I suggest for choosing a resolution is this:
- Look at global stats for trends
- Look at your own stats for current numbers
- Consider what the trends mean for your stats
- Allocate major resolution market shares to support categories (create a support matrix)
- Build to meet the requirements of your support matrix
- Build your default site to suit the min and max widths of your Direct Support resolutions
- Support slightly-smaller resolutions with Cut Down Support
- Support massive resolutions with Oversize Support
- Where there's a need, build niche stylesheets or templates for Alternative Support resolutions
- Periodically review your support matrix
That's a very formal way to describe the process, of course. Really what it boils down to is making some conscious decisions; and considering what you want to happen at all the potential resolutions out there.
There are a lot devices out there with a crazy array of resolutions. The good news is you don't have to support every last resolution directly.
There's no imperative to fill up the entire screen at massive resolutions; and it's not the end of the world if someone needs to scroll a lot on a tiny-screened device.
Statistically speaking, the majority of people are still using a reasonably standard size monitor to view your content. Widescreen monitors just mean there's more real estate than you actually need to present your content.
So, create a coherent, legible design and don't be scared of whitespace. A good design sitting in the middle of a big space is a better experience than a clever-but-unreadable fluid design.
Of course, next thing you know someone will bring out some new device that changes the whole situation...