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 1024×768 pixels or 1280×1024. There were some outliers, mainly at 800×600. 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 1440×900. 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 1680×1050, and go all the way up to 2560×1600. 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 480×320, the iPhone 4 is 960×640, Motorola’s Droid2 is 854×480, and HTC’s HD7 is 800×480. For tablets, the iPad is 1024×768, the Samsung Galaxy Tab is 1024×600, and the Motorola Xoom is 1280×800. 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 1280×1024.”

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

1280×1024: 14.02%
1280×800: 12.87%
1440×900: 10.62%
1680×1050 10.17%
1024×768: 8.26%
1920×1200: 7.19%
1920×1080: 7.00%
1366×768: 6.86%
1600×900: 2.33%
320×480: 2.03%

Does this match your experience?