Responsive experiences

One of the first things I do when I go to a new website is resize the window. Why? If you’re on a desktop computer, re-size this webpage; notice how it rearranges the content to fit the new screen width. If you’re on a mobile phone, notice how the content is beautifully styled just for your device.

This is called responsive web design. The concept is to create an internet that works great on all devices. Often, this means first creating a mobile experience — because it is the least capable device — and adding features for larger screens.

Now, this works beautifully with text, and that’s what most of the internet is. But when it comes to anything more — for example, data visualization, which is what I do — we quickly run into issues. There are many surface-level challenges that arise:

1. Layout: There’s more planning required to get everything to fit logically at every screen width.

2. Interaction: Hover? Doesn’t exist on touch devices. Swipe? Not with your mouse.

3. One thing, two thing: At some point, you find yourself making two different things — a mobile version and a desktop version.

Now those are only surface-level problems because they can be solved. There are easy ways to create webpages that flow beautifully from one viewport to another; there are libraries to always have device-optimized interaction; and there are workflows that allow you to create a single page that works well on all devices. However, those initial problems hint at a more fundamental question: What is it that we do when we create a webpage?

It’s not about Point A to B

I have no doubt that we can deliver data from Point A to Point B, and do it beautifully and efficiently on all devices. E-mail and Twitter got there first, but in the next year we should see most reputable websites switch to responsive design, making mobile browsing almost as nice — if not better — than desktop browsing. And with responsive design, technologists could come out with entirely new screen-based devices, and we won’t have to re-build the internet to make it work smoothly. In short, the problem isn’t about whether the we get bits from one person to another.

But we don’t just deliver data; we create experiences. As a kid, I saw “Lion King” in theaters and during that stampede scene, my heart pounded as the bass in the theater rumbled my seat. On VHS, not so much.

While they may deliver the same information, they are not the same thing.

The experience, deconstructed

So what happens when we deliver content, on the user’s end?

  1. The user holds their physical device. It can be anywhere from 0.2 lbs to 10lbs. The screen can be anywhere from 30 inches to 4 inches. The smaller devices are more likely to be used in short spurts.

  2. The user observes a collection of pixels on the screen, which can be extremely dense or not so dense.

  3. The user touches the screen or a touchpad or she reaches for a mouse and clicks.

  4. The screen reacts at various speeds, depending on the device.

From a purely physical standpoint, the user can have fundamentally different experiences depending on the device — the medium. But we don’t think of it that way because we’ve become so entrenches in our use of screens that the signal that makes it through to our brains is the content. The devices have become extensions of ourselves, as Marshall McLuhan says. And by delivering content that should ‘work’ on all these screens, we’re assuming that the medium of ‘screens’ is all the same thing for humans. It is not.

The physical digital

It makes sense for text-based sites, like news organizations, to transition to responsive design. That content provides an experience similar to taking a shower under a pipet: You can barely feel if its warm or cold. All you need to care about is getting the content there. But a slightly deeper experience, like the data visualizations we make, is like taking a shower under a faucet. The water immerses you just enough for you to figure out whether the temperature is appropriate. You know when you’re not getting the right experience.

For me, that’s because I’m trying to appease several different physical experiences. We can satisfy users of some devices, but fail to create a good experience for others.

Right now, we’re worried about delivering pixels to the user in a way that fits the screen. But I propose that we should be thinking about how to deliver a specific physical experience using a screen. We shouldn’t think that digital products make our interaction with them any less physical.