Web resolution revolution as screens get bigger, smaller

When you’re building a website or a Web application – how big is the user’s screen going to be? That used to be an easy question to answer, but now it’s getting a lot harder. And that means a lot of extra presentation-layer work for someone on your team.

When I first started building static websites, back in the Neolithic era, the typical desktop or a notebook had a screen that was 1024x768 pixels or 1280x1024. There were some outliers, mainly at 800x600. Based on that, page design was set to be somewhere around 700 pixels wide. That let everyone see everything, without worrying about horizontal scrolling.

Since then, three things that happened to change those assumptions:

1. Wide-screen displays have become more common, which means that monitors are shorter and wider. Designs have to take both dimensions into account. My 15” MacBook Pro and 13” MacBook Air, for example, are both 1440x900. This can be a problem when showing images that were formatted for a 1024-pixel-high display.

2. Huge monitors are becoming common. Modern desktops monitors (or external displays for laptops) seem to start at 1680x1050, and go all the way up to 2560x1600. A 700-pixel-wide web page is lost in all that real estate – but what behavior does your application exhibit if the browser window is widened?

3. Mobile devices are all over the map. With handsets, an Apple iPhone 3GS screen is 480x320, the iPhone 4 is 960x640, Motorola’s Droid2 is 854x480, and HTC’s HD7 is 800x480. For tablets, the iPad is 1024x768, the Samsung Galaxy Tab is 1024x600, and the Motorola Xoom is 1280x800. Most mobile browsers dynamically scale down wider pages or graphics to fit, but still, it’s good to know what you’re shooting for.

Here’s a snapshot of data taken this month from one particular source – the sdtimes.com website. It’s a “focus group of one,” and may not reflect what you get on your own website or Web applications, but it’s a data point to think about.

Craig Reino, SD Times’ Director of IT, told me that, “Resolutions are undergoing a revolution. Where there used to be a clear majority among our browsers on sdtimes.com there is now a wide range of resolutions. The most popular has only 14% and it is 1280x1024.”

Specifically, here are the top 10 screen resolutions, pulled from our web analytics:

1280x1024: 14.02%
1280x800: 12.87%
1440x900: 10.62%
1680x1050 10.17%
1024x768: 8.26%
1920x1200: 7.19%
1920x1080: 7.00%
1366x768: 6.86%
1600x900: 2.33%
320x480: 2.03%

Does this match your experience?