Being Responsive

We often get asked “can you make it responsive?”. Well the answer would be yes, but what does that really mean? Is there more to it than that?

Responsive web design (as defined on Wikipedia) is: “a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.”

From a user point of view (which is where we always come from), an optimised experience is about much more than making sure the content fits the size of screen being used. Experience has to take into account the context of use as well - not just what, but where and how as well.

Many of the responsive sites we come across only ‘reflow’ the content based on the device resolution or viewport size. The aim is to surface the important subject matter whilst hiding the less important content.

So your site is responsive, but...

Well actually, this pure screen resolution based approach isn’t all that great:

Many of the “responsive” sites we come across are only responsive in the sense that they make sure the important content will fit on the screen correctly. But what about the content that isn’t displayed on the screen? In many cases this shadow-content still gets downloaded by the browser, only to be discarded or hidden at the last minute when the screen size is detected.

That’s fine if you’re at home using your speedy home wifi, but the sites that work purely like this aren’t responsive to the context of use; which is an important factor when thinking about portable devices. Connection speed (and potential loss of connection), data-usage and network data caps all play a part here (a customer isn’t going to appreciate you sucking up all their data allowance for content that they don’t get to see!).

We’re not saying that all these sites are doing it wrong, just that they need to consider where all that extra content goes. If it’s downloaded by the user but not shown to them, it probably shouldn’t be there in the first place.

Something else that’s becoming more apparent: TVs are getting smarter.

A lot of consumer TVs now come with a web browser as standard. As technology advances at such a great pace, we are now at the point where many smart phone screens actually have a higher resolution than our TVs (I’d be willing to bet that there are more HD phones out there than HD televisions).

With that in mind, If we were to base our responsive sites purely on screen resolution simply assuming a smartphone was being used to access them, we would be doing the user an injustice.

For example; let’s highlight some of the major differences: mobile smartphones are usually around 30-50cm away from our eyes and we interact with them using touch; whereas a standard 32” TV would probably be around 2-3m away from our eyes and we interact with that using physical buttons on a remote.

Luke Wroblewski writes on his blog, that we shouldn’t rely purely on screen resolution detection. He talks about how the future of wearable tech, like Google’s Glass will complicate this approach and highlights how important it is that we don’t assume the context; instead, we must try to decipher it.

Context aware

Here’s an alternative: some of the applications we’ve created have completely separate computer and mobile sites, where the mobile version is a branch off the computer site with content and workflows shortened and optimised to provide a very task-oriented experience. The focus is on what the customer will want to do when they use that device and where they are likely to be using it. Recently we took this approach with Remember The Date and their mobile site. It was the best way to allow customers to sign-up and purchase cards on-the-go without having to wait for high-resolution graphics and extra content to download.

This hybrid approach is probably something you’ll want to consider to get the best results. That’s what we do on the Razor site. We prefer to call it context aware.

As the lines blur between screen sizes and resolutions on desktop / laptop computers, smartphones and tablets, and smart TVs; we can no longer rely on the traditional responsive detection methods which are based purely on screen resolution. We can use things like server-side device detection to recognise the type of device and connection speeds, and only send the necessary content to the browser.

Using the context aware approach we can ensure that the content that is downloaded is always appropriate and the site is displayed in the most usable and appealing way.