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.
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.
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.
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 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?
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.
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.
Building a responsive website doesn’t happen by accident or as an afterthought: it starts at the UX and Design phase.
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.
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)
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