Check out my new project, Practical Service Design!
User Experience at Hello Erik

Viewport and Screen Resolution

Posted July 3, 2011

 

Preface: I am not suggesting that you abandon best practices and trying to easily include as many edge and near-edge cases that you can. I am just trying to point out a line of diminishing returns, and eventually you’re optimizing your sites width and usability for the grandma at the library kiosk on a Pentium 150mhz running a 13″ CRT at 800×600 in IE6 and Windows 98 Special Edition.

So I’ve recently been developing the UI for a browser-based application. It is for internal use only, so my user group is set to the company employees that use it.

I wanted to gather some usage statistics on the most common screen resolution used in our company. Well, there was nothing in the app as far as analytics goes, so I had no data to retrieve.

Instead, I just did some soft-science and watched what people were doing, and walked around the office noting the screen resolution of a sample of users, and how they interacted with this browser based app.

Come to find out, I could go wider than the “safe” 960px and still be safe with my user base. But what I also found out was that if someone didn’t have their browser maximized and the right side of the app was cut off, they simply just maximize their browser or drag the corner until the app fits.

90% of people can see the entire width of my site. 95% can see the width of the content and half the menu. 98% can see the content. To reach 98% of visitors being able to see the entire width of your site, it would need to be no bigger than 750 pixels. There is no sane web developer or stakeholder that would build anything to be able to work within 750 pixels. It’s just not possible while maintaining any modern usability.

98% – 750 Pixels Wide

This is by no means a scientific study, but I took a few popular websites and ran them through the Google Browser size experiment, and then drew a red line at the “98% – 750 pixels wide” mark.

Overstock.com

Overstock.com easily fits in the 90% range, but their site does not crush down to fit within the 98% range. The 750px line cleaves clean through part of their main carousel, and completely obliterates their right hand content.

Amazon.com

Same as Overstock.com, Amazon.com doesn’t come close to the 98% range. The red line cuts right through their main banner, the right hand content, and a good 20-25% of their masthead and nav.

CNN.com

CNN.com doesn’t make the cut. Almost their entire right side of content is cleaved clean away, along with a good 25% of their top navigation and information.

Wikipedia.org

Wikipedia uses a fairly fluid design, and they actually make the cut! Look at all that content smashed down to fit in the 750px width, creating huge, tall, unreadable columns. But, they are making their site browsable to all those people who have their IE6 maximized on their 15″ CRT monitor running at 800×600.

SmashingMagazine.com

Oh dear, it appears that the 750 pixel read line decapitates Smashing Magazine. The right hand content is total scorched earth, and so are all their social networking buttons and top navigation. The kinds of web content and design, only to be brought down by browser viewport sizing!

So what, now what?

I am finding myself thinking “this is a great min/max experiment, but how this effects actual usage is largely a small consideration.”

Many websites are abandoning the “above the fold” doctrine. People have been scrolling vertically online for almost 2 decades now, it’s as ubiquitous as 7 digit phone numbers (as opposed to 50 years ago when they were 5 or less).

The point being: every browser comes with a maximize button, and people know how to use it. Trying to determine the viewport size for every case, and edge-case, is an academic endeavor. If you have time to optimize your site for every possible viewport and resolution, you clearly don’t have enough paying work to keep you busy.

Again – it’s great to study edge-cases and try to incorporate them, but for day to day application, I’d say to make the cutoff at 2 standard deviations, maybe even 1.5.

I’d love to know the mean and modal viewport sizes, but that’s not going to hold up development if I don’t. For now, it’s a little bit of data and a bunch of common sense.

And to keep things fair, here’s my own site. I’m comfortable with the 90% mark. Here’s my browser lab shot, and also my analytics on screen resolution (not browser viewport – I trust people to grab a corner and drag).

I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.