Entity view (Content)

Responsive Design for the End User

By rwild
Mar. 5, 2016

We're now at the point where we're finding, at least from the UK outpost of Appnovation, that a client is not additionally requesting a responsive design aspect to their project deliverable, rather it has become another normal NFR. We are no longer able to pitch ourselves in that unique band of solution providers that say we specialise in making your product responsive to device demands.

A competent front end developer will now be able to handle this request in the same way we would ask them to use image sprites to reduce http requests and so on. But the question I ask, now that responsive is the norm, do we really understand what responsive actually means to our end users? They are the most important piece of any project success, afterall.

Device Responsive

Let's start by considering the definition of responsive as taken from Wikipedia..

"Responsive web design (RWD) 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 mobile phones to desktop computer monitors)."

Cool, so that makes sense. In essence, we adjust the way we display our content depending on the device or screen resolution. This is the very traditional and modern approach to tackling the challenge of the ever-increasing variety of devices and displays. It means we don’t need to care about what the users requirement for visiting our product is, we are serving them the same content regardless. This is ‘Device Responsive’.

But there is a problem with this: serving the same content across all devices doesn’t actually work, even with the best intentions (designers, front end engineers, and a logical AI in place) the user experience may actually need to change per device, and probably should.

User Responsive

One consideration that is always overlooked is that it's not uncommon for an individual to own multiple devices, and it's the users choice of what device they are using to navigate the product. If the device of choice is a smartphone, there’s a high chance they are out and about, seeking immediate information. In this scenerio, the quest for information is different; it is a compelling desire for information, not an opportunity for the product to tease and entice a user around the site in the way the desktop site might well do. Therefore, the content we serve should ideally be tailored to suit that device in that scenario.

We can perhaps even start to utilize some of the technology available in some of these devices to give a greater user experience; hooking into locational services, for example, is great for on-the-go devices if it helps the content or information on the site.

This goes into the ‘User Device Responsive’ category, and may come across a little old fashioned as the immediate technical solution is to offer a completly different site (m.whatever.com springs to mind) but it's not actually a bad practice, and in actual fact gives the user the information they probably wanted in the first place in a more efficient way. This makes one massive assumption of course: that you know your audience. But if you don’t know that, then you have far bigger problems.

Network Responsive – the next gen responsive

The third and final angle to look at this from is more into the future. So far we know the product has to change depending on the device, and we agree that the content needs to suit that device against user expectations and needs. We know serving and hiding content is bad for data consumption, alas some typical device responsive approaches.

To date we are only starting to explore that last point, data consumption for devices on the move, or the bravest assumption I have made in this post that smartphone users are generally out and about – wifi hotspots are now very much common place in public areas, and smartphones are, of course, still used on home and office networks which offer fast and reliable speeds.

I recall a period of my life where I sat on train for over 4 hours a day on my commute to work in and out of London - prime smartphone time - but the frustration was either the complete lack of mobile signal or really poor speeds when there was a signal, yet the information I wanted to consume was the same. The nice photo for the news article I was reading became quite insignificant in the grand scheme of things when the content took an eternity to load. There are a few scripts surfacing around the web that send a small image to the device, check the time taken to download and then toggle the rest of content from there, limiting image requests or other non-mission-critical content - but it's not an elegant solution and adds more overhead in its current capacity. Response times for requests are probably the best candidate to explore network speeds on a device, but currently the only stable and sure fire way to control this content is to let the user toggle the amount of data they wish to receive, so perhaps we should consider content in terms of low, medium, and high bandwidth options too.

I believe the future of responsive design lives in a combination of device responsive, user responsive, and network responsive. Harnessing the best features of each approach: content the user wants, exploits the device capabilities, and is within the limits of the connection speed.

It's never been easier and less costly than now to go mobile, and responsive website design makes all that possible. Contact us today and request a quote for getting your website to work seamlessly on any device's screen. Creating a new site or getting ready to take on a redesign of your current site? Our responsive web designers can make your website look, feel and function next to perfect on any device it encounters!

Looking for more on responsive design? Go in depth with our Webinar: Taking Drupal Cross-platform