On Using Browser Viewports to Understand Screens

by November 3, 2013

The ever eloquent Ethan Marcotte published a reply to my article about relying too much on screen size in responsive Web design. I couldn’t be happier to see him blogging again and truthfully I kind of miss the good old days of back and forth blog posts about important Web design issues. So here we go...

Very early on in his thoughtful response, Ethan states:

“(A minor nit: where Luke refers to “screen”, I’d use “viewport”. But! Moving on.)”

As it turns out this minor nit is really the crux of of my concern. Ethan’s right. Responsive Web designs rely on an understanding of screen size as determined by the viewport of a Web browser. This one measure is often used to make many important decisions.

Decisions like determining if something is a mobile device, if it supports touch, or if it has a slow network connection. Assuming screen size gives you a definitive answer to any of these questions is simply incorrect (unsurprisingly Ethan and I agree wholeheartedly). A browser’s viewport size is just that -a measure of how much screen real estate (in relative pixels) an interface should use in order to be comfortably viewed on a specific device.

That’s why viewport is great for determining how what you put on a screen should lay out. And why, I believe, Ethan calls it the “foundation” of responsive Web design. So far, so good. But in my recent work I’ve come across a number of situations where viewport doesn’t do a good job of telling you how what you put on a screen should lay out.

As prescribed by Ethan, we build responsive designs using fluid grids, flexible media, and media queries. These implementations work great on smartphones, phablets, tablets, laptops, and desktops. But as I spelled out in my last article, they didn’t hold up for us on Google Glass or in companion mode on TVs. The Web browser viewport did not provide a good guide to how things should lay out. In fact, relying on viewport alone lead to arguably poor designs.

Polar on XBox One And Smartphone

Now I’ll be the first to admit that Google Glass and companion TV experiences are currently niche situations with limited usage. But my concern is they are harbingers of more to come. Consider nascent, but imminent screen technologies like curved displays, screen mirroring, translucent screens, and many more. As the technology powering screens shifts, how stable is our multi-device foundation if it is built on top of the browser viewport? How much about the actual “screen” experience does it really tell us?

I'm not saying screen size is not important (even foundational) to multi-device design but I have an increasing concern that our understanding of screen size (through browser viewports) may not be as stable as we think.

Quick Summary

  1. The sky is not falling. Responsive Web design built on a foundation of Web browser viewports works incredibly well in 99% of cases.
  2. Not only that but it can deliver a ton of business value as well.
  3. In a few "new" situations like Google Glass and TV browsers, the simple formula of a fluid grid, flexible images, and media queries doesn't seem to hold up. More of these situations may come up in the near future.
  4. I think it's worth calling out and talking about this so that we don't realize later on that we once again (IE-specific sites, fixed width layouts, desktop-only sites, etc.) made too many assumptions about the Web.

Side Note

In his article, Ethan points out that on the Web:

"the number of problems we can solve automatically for our users are dwindling. We can’t know reliably how much bandwidth a user might have available to them, whether they’re outside or stationary, or whether they’re mirroring their display to a wider screen—or, or, or."

On the Web, this is true. In native mobile applications, we can know all of this and more. Food for thought.