If you’re not doing Responsive Web Design, you’re doing it wrong

The world's gone mobile, are you being left behind?

Not that long ago building a successful online presence meant ensuring that your website worked correctly in all the major desktop browsers. Fast forward to today and the PC is dead, 61% of the UK population owns a smartphone, and Gartner is predicting that almost half a billion tablet devices will ship in 2013 and 2014 alone.

The fact that mobile is a huge and growing part of the market will come as no surprise to anyone reading this, yet many companies still haven't addressed mobile in a meaningful and forward thinking manner.

Having a mobile friendly website is no longer just important, it’s critical.
Forbes Ecommerce Marketing Checklist for 2013

Responsive Web Design is becoming the accepted answer to the mobile question, so what is it, why should you care and what’s wrong with every other option?

How to do it wrong

Option 1 – Don’t have a plan

Still a surprisingly popular option and one that we have all no doubt had to deal with. Constantly zooming in and out, pop-ups that don’t resize when you zoom, menus that depend on mouseover, plugins that don’t work on mobile – we’ve all been there.

Given that 74% of mobile users say they’re more likely to return to a mobile friendly site (and 67% say they’d be more likely to buy a site’s product or service), not having a plan isn’t really an option.

Option 2 - I’ve got an app

There is nothing wrong with native apps. There are use cases for which a native app is going to be the correct choice over a web app, just as there are times when a desktop app is the correct choice over a website. But whether you have a native app or not, is really of little bearing on whether you need a mobile friendly site.

You physically can’t link to content within your app, so your customers' first interaction with your brand is, more often than not, going to be your website, not your app.

82% of shoppers use search engines for browsing product information instead of going directly to an app (or site), and a link to an app simply doesn’t appear in the search results. Worse still, prompting users to download your app if they do arrive at your site on a mobile device will hurt your SEO.

Option 3 – The mobile site (aka the “m.site”)

When mobile first became a significant share of online trade, we saw the rise of the “m.site”, so called as websites would typically present a separate mobile optimised site on a subdomain such as http://m.site.com. If you visited the main site (aka the “desktop site”) from a mobile device you’d be redirected to the m.site.

At first, it might appear that there are some compelling reasons to choose a mobile site. Designing your site specifically for mobile certainly isn’t a bad idea, and making sure you’re keeping your asset payload low is always a good idea. But there are problems.

Redirecting your customers' request from your desktop site to your mobile site is tricky. If you take the easy way out and simply redirect all mobile traffic to the homepage of your mobile site, regardless of where they entered, you have two problems. You’ve just disrupted the flow of anyone who came to your site via a social network or email link, with good will, and will likely see a huge bounce rate on your mobile homepage. Worse still, Google now punishes this sort of behavior, so you can expect to start falling down the search results which, given 59% of mobile users only look at the first page of results, also isn’t great news.

It is the the duty of a Webmaster to allocate URIs which you will be able to stand by in 2 years, in 20 years, in 200 years. This needs thought, and organization, and commitment.
Sir Tim Berners-Lee Inventor of the World Wide Web

Regardless of how well you manage your URL spaghetti, you can’t avoid redirection latency. 47% of people expect a web page to load in two seconds or less (40% will abandon if it takes more than three seconds). All that work that’s been done to reduce page load times and increase speed on mobile connections is undone by the need to redirect, which on a 3G connection could easily take up to 2 secs.

The need to redirect is really a byproduct of the obvious problem: you need different URLs to represent the same content.

Besides being fundamentally at odds with how the internet was designed, you’re also splitting the link value of every single link on your site, both in terms of basic SEO but also social sharing. You can’t control the links people share, so if they’re on your mobile site that’s the link they’re sharing regardless of the device their friends will use to view it.

Finally, it’s just plain short sighted and a pile of legacy waiting to trip you up. Does anyone really believe the market is set and the list of devices will slow down? What URL will you use for smart TVs? For Google Glass?

Responsive (and maybe Adaptive) Web Design

What is Responsive Web Design?

The term Responsive Web Design was coined by Ethan Marcotte in his A List Apart article back in May 2010. In it he described how by combining fluid grids, flexible images, and media queries we are able to create websites that seamlessly reflow and adapt to provide an optimal viewing experience regardless of the device being used.

Today, 2013 is being coined “the year of responsive design” and is considered by Forbes the most important thing you should be prioritising. But what is it exactly?

Rather than develop and maintain multiple device optimised websites, you develop a single website that can work, look good and be usable on all devices in order to provide the best user experience. The key to achieving this goal is to think about how your design operates at different widths and adjust how the components on your page are laid out as that width increases or decreases.

At a high level this means defining breakpoints in your design where the content and components will reflow. Typically you’d set these breakpoints to broadly align with a set of common devices (desktop, tablet and mobile) to help facilitate design and test.

A good responsive website will present the same flow of information on all devices, freeing authors to concentrate on the hierarchy of their content. So long as that hierarchy is maintained, the same content will make sense and feel correct regardless of the device being used to consume it.

The obvious advantage of a responsive website is that you have a single website, a single set of analytics and a single set of URLs that work and look good regardless of the device your customer is using.

Responsive Web Design isn’t just about making your site look good on an iPhone; it’s about future proofing so that your product will adapt to as-yet-unknown form factors and screen resolutions. A few years ago there were perhaps a handful of target resolutions we could design for. Every now and again someone would bring out a new device that introduced a new screen resolution, and everyone would groan at the thought of having to adapt designs to cater for it. Today, a new resolution doesn’t make the headlines; we’ve lost count of the number of device resolutions out there.

Case Studies: The value of Responsive Web Design

Responsive Web Design can be seen in all facets of the web today: from media to the government, the restaurant industry to technology, and within retail as well. The largest brands know that presenting a respectable presence on the web means presenting a responsive website.

Time.com General Manager, Craig Ettinger, revealed that their pages per visit increased 23% following their move to a responsive site.

As the use of mobiles and tablets continues to grow rapidly, so does the range of devices and screen sizes on which people are reading us. Our own mobile traffic has grown an incredible 63% year on year.
— Tanya Cordrey Chief Digital Officer, Guardian

As Starbucks continued to see an increase in mobile traffic, they realised that a desktop site performs poorly on a mobile device and decided to move to responsive in 2012.

Surf clothing brand O’Neill saw a huge jump in conversion, transactions and revenue in the 3 weeks after the launch of their responsive website. In comparison, the 3 weeks' prior Android conversion was up over 400%.

What is Adaptive Web Design?

Whilst everyone getting the same content is an obvious plus, the fact that everyone gets the same set of assets (HTML, images, CSS and JavaScript) can be a problem. Mobile devices have come a long way but are still nowhere near as powerful as a typical laptop or desktop computer and are typically accessing your content over slower mobile networks.

In cases where further optimisation is required, or the functionality required on desktop vs. mobile is significantly different, Adaptive Web Design can be employed.

Adaptive Web Design basically means: detecting the device (and its capabilities) accessing the site, and delivering a different set of assets and experience. Typically this is done by identifying the browser making each request and responding with content deemed more suitable for the identified device.

The crudest example of an adaptive approach is a redirect to an m.site. Accessing http://www.bbc.co.uk on a mobile device, redirects to http://m.bbc.co.uk for example.

Other examples are subtler. Access http://www.theguardian.com on a desktop and again on a mobile device, and you might be fooled into thinking it was just a responsive website, but if we analyse the payload in each case we can see a different story:

Clearly, accessing The Guardian on a mobile device results in far fewer requests for content and a much smaller page size. Both will contribute to a better, faster experience for a mobile user.

Tripadvisor pulls the same trick, but in doing so also highlights a downfall of Adaptive approach:

On a mobile device the request count drops to just 8, but the payload is still 1.2 MB - how? Two of those requests are for images that are ~500 KB each. All that effort those clever engineers put into providing the ability to optimise for mobile has been undone by a careless content manager.

Tripadvisor's faux pas aside, these two examples prove that high traffic sites can employ adaptive techniques without needing to resort to polluting the web with m.sites.

Whether adaptive rendering will continue to be a necessary approach is as yet unclear. Certainly grouping devices into broad categories is becoming increasingly unclear - is a phablet a phone or a tablet? As HTML becomes more semantic, reducing the overall document bloat, mobile network speeds continue to increase and the W3C continue to work on standards such as responsive images, there is likely to be less need to differ the initial payload in years to come.

What we can say with certainty however is that even with an adaptive approach, the need for responsive remains. In the three examples of adaptive rendering above, all three still employ responsive techniques on the mobile payload. Why? Because they know that even though they can broadly group a set of devices into the “mobile” category, there is already enough device variability out there that you still need responsive techniques, even when delivering mobile optimised content.

3 steps to Responsive

A successful RWD implementation is far from a purely technical exercise. It requires careful user experience and design consideration to achieve the business goals and work closely with the tech team to ensure that what’s being proposed works from a UX perspective but is also technically achievable.

Design

Building a responsive website doesn’t happen by accident or as an afterthought: it starts at the UX and Design phase.

Having real content makes a huge difference. Understanding the hierarchy of information is the key to delivering effective responsive design. The days of empty square boxes representing content are well and truly behind us. It’s imperative that the teams works as one: designers, copywriters and developers iteratively working together. The main difference with designing for responsive is the need for very good typography. Typography, as a system, addresses content hierarchy no matter where that part of content appears. You can’t rely solely on position to create hierarchy with responsive web design anymore.
— Sari Griffiths, Design Director, Red Badger

Build

Responsive techniques leverage exclusively client-side techniques in HTML5, CSS and JavaScript so can be adopted regardless of your backend infrastructure or constraints.

Working closely with design, we need to consider source order and the flow of content in the page so that you don’t tie yourself in knots trying to rearrange large chunks of the page. Modern devices allow us to produce very clean source code aligning to the latest HTML specifications. Unfortunately, providing support for older browsers and devices sometimes means muddying the water a little, but understanding where that line should be drawn helps you achieve the best of both worlds. Never forget you’re delivering the same content to both desktop and mobile, who may be on slower connections. Keeping a check on your site speed and asset payload early and often will save you from having wasted a lot of time down the road.
— Stephen Fulljames, User Interface Developer, Red Badger

Test

Whilst mobile networks are getting faster and mobile devices more powerful, the mobile world remains incredibly fragmented, and part of your responsive strategy is to decide the spectrum of that fragmentation you’re going to consciously support.

Providing a simplistic experience may get you the broadest spectrum of support, but smartphone users are becoming increasingly used to rich user experiences and may quickly move on if the price paid for broad support is to under utilise their device’s capabilities. Generally speaking, if we plan well for devices we know we want to work well, we’ll cover off a large proportion of the unknown devices too. You have to understand the market that is most important to your offering and then plan accordingly.
— Samera Butt, Test Manager, Red Badger

What are you waiting for?

If you want to find out more about what Red Badger can offer, take a look at our Reponsive Web Design fact sheet. (PDF 1.1MB)

DOWNLOAD

If you are driving sales transactions, pushing content or focused on improving customer service through the online experience right now, and you're not taking Responsive Web Design into consideration, you’re doing it wrong, snubbing a large and rapidly increasing share of your users, and missing out on potential market share and revenue.

Responsive Web Design is the answer to both dealing with today's proliferation of device screen resolutions and tomorrow's as-yet-unknown form factors. The world of internet connected devices is only moving in one direction, and investment spent today that doesn’t address that is wasted.

7th October 2013 David Wynne