Why ‘Responsive’ is a Poor Benchmark of User Experience

Poor Ux Hero
Back to all articles
Article Shopify Guide Download Start a project

‘Responsive web design’ (RWD) used to be a good indicator of modern, standards-compliant web design.

But, nowadays ‘responsive web design’ is pretty much just ‘web design’ - all sites are responsive (or should be) which means we've lost the simplistic, good-and-bad distinction that the term responsive once provided.

Most agencies will have been using responsive principles for many years now, at BAO every website we've made since 2010 has been responsive. But, while we may expect all modern websites to be responsive, that in itself encompasses a massive range and variety in the quality of mobile experiences - one that can no longer be summed up with a simplistic ‘is’ or ‘is not’ responsive.

In this responsive-is-standard era of web, perhaps there needs to be more focus on the way responsive is actually implemented and a recognition that a catch-all “this site is responsive” actually encompass everything from the most basic stacking of content to a carefully considered and crafted experience optimised for every viewport, device and input type. The gulf between these two approaches is huge.

Many clients still ask us if their new website will be responsive. In our opinion a website isn't really a finished website if it doesn't work on any device. When 30-40% of web traffic is on mobiles devices it's hard to describe responsiveness as an optional extra. Instead clients should be trying to understand the effort and level of detail a potential web designer will put into making their website.

What is good RWD?

In theory 'responsive' means the site should work on any device, no matter the screen-size. But this provides no guarantee of the quality of the user experience on the device, only that it will work.

The majority of responsive sites simply have a desktop version which might have a more complex layout and will switch to a mobile version at a fixed break-point. Normally this means little more than all the content on the site stacked into a simple 1 column layout with the header or navigation switching to some sort of hamburger-icon based slide-in navigation.

This normally works fine on a very small screen, but on a tablet or small laptop the experience can be somewhat lacking.

Good RWD goes far beyond this. Content should break gradually, perhaps at as many as 5-6 breakpoints, as the content requires to always be optimal for any given device. The orientation of the device and if its touchscreen enables should all have an effect on the resulting site layout.

More importantly, the actual design and arrangement of elements should be considered for the device, not just whatever is the easiest to develop. This might mean altering white-space or the total rearrangement of page elements.

Good RWD is hard, ‘responsive’ is easy.

It's important to understand that really good responsive design is very hard to achieve, not least because of how many devices and input types need to be considered today. For example, consider the case of designing for touch-screens.

There are a range of things that have to be considered when designing for touch. Click targets need to be larger, hover effects can't be relied upon, the reach of the users hands should be considered, along with many other subtle changes.

Before the iPad, touch was pretty much synonymous with mobile. It was easy to say that if the device's screen was small enough, it was a touch device.

But today, things are a lot more complex, and it's only going to get more so. Now we have tablets that have screens that are larger than netbooks. We have laptops with touch screens and tablets with keyboards, and tablets which sometimes have keyboards but sometimes don't. There are smart watches, and smart TV's with web browsers and then there are mice, multi-touch track-pads, styluses and fingers.

Take a simple case: a button which expands on hover to provide more information. On mobile clearly it's best if we show that information without a hover effect, which is easy enough. But what about on a 12in tablet which may or may not have an attached keyboard? Or even a 15in laptop with a touch screen? Often which is the more appropriate comes down to how that device is being used at that moment.

Simple catch-alls based on screen size just aren't good enough anymore and it is clear that we now have a seemingly infinite range of screen sizes, from the smallest of smart-watches right up to the browser on a TV, all of which can have a wide range of input devices.

"To design immersive and interactive websites that look great on every device we need to go above and beyond the basics of what can be called ‘responsive design’."

Simply stacking content and adding a hamburger icon might cut it for the simplest of mobile sites, but it won't work everywhere and in many cases it's a very lacking experience. But it is very easy to do and meets the requirement of being responsive, so is the most common form of responsive design currently found on the web.

Clearly making these kinds of responsive design decisions is complex and has to be founded in testing and experience. Development presents many problems too, as the technology is in a constant catch-up and boundaries are always being pushed so it's easy to end up writing highly device-specific cases that will inevitably become a mess to manage and alienate other devices. There are hundreds of devices that fall out side of the top 5, 10 or even 50 most used devices.

How to identify good RWD.

Cost and experience remain good indicators of the quality of a responsive website design. Designing and testing on so many devices is time consuming, which inevitably results in a higher price.

Fortunately, the best indicator is an easy one - when searching for a design agency look at their previous work or their very own website on a tablet or mobile device and have a look at how good the experience is. Is it optimised for touch? Do elements flow and re-size in a way which makes the site a pleasure to use, despite the smaller screen?

Your budget and their price comes back into play here. Just because they are capable of delivering good RWD doesn't mean they are planning on investing that extra time on your project - perhaps your budget is too low. A good way to check is to try and have a frank discussion with them about what could be achieved with more budget.

Good RWD is just as important as ‘Responsive’ used to be.

For both designers and developers it's also a continuous learning curve due to the fast paced world of technology with new devices and technologies being released regularly throughout the year.

As non-desktop web traffic continues to grow and we continue to switch our internet habits from desktop to tablets, phones and other devices, good RWD will only become even more important than it is today.

At BAO it's something that we have always tried to stay at the forefront of, as we strongly believe it is in areas such as this that we can really go above and beyond to deliver for our clients.

How good is the tablet or mobile experience on your website?