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)
| Device | Resolution (pixels) | Notes/Source |
|---|---|---|
| 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).
the process
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.
conclusion
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...
Labels: mobile device, screen resolution, widescreen
I don't have a problem with fluid layouts at 1920x1200 - I can always change the size of my browser window to get a comfortable line length.
I have noticed that since using this monitor I rarely have any windows full screen.
I still think that people are making too wide. Add tothis that I just don't like reading lines that wide! Newspapers have been columns for how long now?
I'd like to see research to identify just how far people look around the screen ... my suspicion is that they have tunnel vision most of the time.
800 pixels wide seems a good compromise to me and hey, people may actually learn to un-maximize their screens and take advantage of their multi-tasking operating systems. Or is it only us Unix heads who prefer this?
;-)
@patrick: I'd rather save people the hassle of resizing... :)
Personally I generally don't bother resizing my entire browser window just for one tab. In general I keep everything maximised as I don't like the visual clutter of un-maximised windows - I like to focus on the chosen app (that's probably the core reason I don't particularly get along with MacOS). Apparently MS's research shows Windows users have just one visible window 60% of the time so my approach seems common. MacOS users are probably the opposite, although even a sample of a tech savvy, mac-heavy crowd showed 20% of them maximised windows.
@obakesan: From the small amount of data I've found so far, window maximisation is skewed by OS - Windows users mostly do, MacOS users mostly don't; but neither habit has an overwhelming majority.
I'd be keen to see more research/stats on all of this, of course... but I'm not finding much out there that isn't a sample like 'the eight people in our office...' ;)
Nice one, read the article on 240x320 screen :)
Nice article Ben, formalises something that we should be or are doing. It's interesting that the old design rules from when 640 to 800 px was king still apply.
Love this article, Ben! Even the initial diagram is great- a good tool to show clients!
"Fixed width, center-aligned sites are great"
Did you have to say that? I don't care how much justification you had for it, it is sooo frustrating seeing code samples deliberately mangled to fit into a tiny center column, when there is no need.
The thing with basing a design decision on stats about screen sizes: it is meaningless. The user may or not have a maximised window, something you mention. But more importantly: the user may have (or not) one or more additional toolbars installed. And, the user may have (or not) a sidebar open (I'm always surprised how wide it is at some of my clients - typical iExplorer/WindowsXP, most have that bookmarks sidebar open).
In short, screen size doesn't tell you much about the available space within the browser window.
@anonymous: It sounds like the problem there is sites not properly handling code samples, regardless of any other design choices. In my experience code samples tend to run much wider than normal body copy no matter how wide you set your columns, so I use overflow:scroll on code examples as a compromise between copy and code.
@philippe: While it's true that there are many potential variables, at the end of the day you still have to build your site based on something. If you ignore the statistics, how do you choose a width?
The way I'd suggest treating the toolbar scenario: they've made a choice which subsequently places them in lower resolution category. Chances are if you support a resolution down using cut down support, the user with the toolbar will be ok.
Hopefully in future stats packages will routinely report viewport as well as screen resolution, much the same way as they currently report both hits and visits. But in the meantime we have to work with the data we do have.
One factor you missed is pixel density, those high end laptops have more than twice the number of pixels per cm or inch than the old CRTs. So what looked great on a 17" 1024x768 looks quite different on a 1920x1200 15.4" widescreen LCD.
So when updating a site for "modern conditions" you need to increase your font size, so people can actually read your text.
Very interesting article!
I know what you mean about left aligned sites, it drives me insane when i have to critically review a site which is left aligned and only 768 in width!
Before ranting about fluid layouts and small font sizes, you might want to fix your own web site. Helvetica is not readable on Windows systems with default screen settings.
@Ben: It's hardly a rant. Anyway, despite your tone you do have a point. I didn't actually see the Helvetica issue during testing (renders just fine on all machines I've tested with), but now I know about it I've swapped the font order around. Cheers for that.
Sorry if that sounded harsh - wasnt my intention. Regards
Respectfully...It's about time that designers along with browser makers, monitor builders, etc. come to some kind of consensus on this and a million other issues. Good grief man! Here's a novel concept: Design to a specific standard and then let users conform instead of endlessly chasing our tails trying to please every user all the time on every kind of equipment! I don't know about you but I have work to do. It's time for someone else to start working with us. (The designers) This is insanity! DUH? Think about it!
@Anonymous what standard would that be, just asking, as I don't think there is one!