A (very) brief history of Responsive Web Design
Responsive Web Design (RWD) is a term coined by Ethan Marcotte for a technique he invented in 2010 that has rightly been hailed as the most important thing to happen to web design for many years.
RWD means that a website will work on many different devices; from a small screen phone to a smart TV, and everything in between, including the printed page, screen readers that read out what is on the monitor for blind and visually impaired people, text-only browsers, and anything else that can be used to access the web.
It does this by building on a solid base, then re-arranging and resizing parts of the page so they fit in any medium and can be viewed on smaller screens without zooming, panning and two-way scrolling.
With RWD there is no iPhone site, no iPad site, no Android site, no Blackberry site and no desktop site — there is one single website that works everywhere.
Ironically the very first website is responsive and works on any modern device. RWD is unbreaking the web built between then and now that doesn’t work well on the technology we have today. RWD is making the web accessible to everyone again, exactly what Tim Berners-Lee intended.
More prosaically, RWD will improve your bottom line in a number of ways.
A non-responsive website does cost less than a responsive one, there’s no denying that — everything substandard costs less than a premium offering.
To rephrase a well known question:
CFO: What happens if we invest in RWD and people don’t visit on mobile?
CEO: What happens if we don’t and they do?
And they will. Use of traditional desktops and laptops has plummeted since the first iPhone came out, and in some parts of the world mobile internet usage is much higher than desktop and laptop internet usage.
So assuming we have to do something to cater for the huge rise in devices of all sizes, there are several ways RWD is more cost effective than the alternatives.
Separate mobile site
A popular option to cater for small screens is a separate mobile site — something like m.mysite.com or mysite.mobi. There are a number of problems this presents that inevitably have extra costs associated with overcoming them:
- Two separate sites need to be designed, built and tested. Three if the desktop design is not suitable for TV screens, more if the mobile version is only suitable for a subset of mobile devices e.g. iPhones.
- If someone on a small screen clicks a link to a page designed for desktop viewing, there needs to be a mechanism to redirect them to the corresponding page on the mobile site, and vice-versa.
- In order to detect visitors from mobile devices, a database of all available devices has to be purchased on licence and maintained.
- Devices are categorised based on a piece of data called a UA (User Agent) string. Many cheaper devices send a UA-string that disguises them as something completely different.
- There will be two sets of analytics to gather information from and possibly two content management flows to keep the site’s content up to date.
RWD overcomes these problem naturally, without any extra cost. RWD device agnostic, has a unified content management system, every page is at the same address on every device, and there is only one set of analytics data.
A mobile app
Another option many people explore is a mobile app, usually an iPhone app. Apps are costly to develop, and unless it’s ok to exclude 71% of mobile users there will need to be separate apps for iPads, Android phones, Android tablets, Blackberry, and Windows phones.
Once an app is found (they don’t show up on Google search unless people specifically search for apps), installed (two-thirds aren’t), and used more than once (26% aren’t), there may be some value there. But all these problems and costs aren’t associated with websites.
If you’re doing it right you have clear, measurable objectives for your website (not just “I need a website”). Whether it’s leads, sales or information dissemination, RWD has been shown to improve a website’s performance in these key areas.
Let’s look at some figures.
Time Magazine went responsive in 2012 and has seen pages per visit, time spent on site, and unique visitors up, while bounce rate (the percentage of visitors who look at one page then leave) dropped by 26% on mobile.
Think Tank Photo‘s responsive site saw mobile transactions increase 96% with page views up by 224%. A PDF case study is at http://www.blastam.com/assets/pdf/blast-thinktankphoto-responsive-casestudy.pdf.
As more case studies are being published it’s becoming apparent that RWD increases the effectiveness of websites in achieving their goals.
As I said in the introduction, RWD makes the web accessible to as many people as possible. RWD means you don’t have to make an effort to cover all bases — your products, services and content are widely available throughout the world on all devices.
Current analytics will probably show that only a few users access your site on Windows Phones and that Android users don’t spend a lot of time and money, so a separate site or app for those users would take a long time (possibly never) to return the investment.
Even if they only make up 1 or 2 percent of turnover, that’s 1 or 2 percent that RWD gives you back at no extra cost. Not only that, RWD means those users will have a better experience on your site and will likely use the site more often and spend more money as a result.
Google prefers one location for every bit of content and have publicly stated that RWD is how they want websites delivered to mobiles.
With separate mobile sites there are separate URLs. Google then has to decide which one to rank in which scenario, and any link value built up by one may not be associated with the other. What can then happen is content ranks well on desktop search and poorly on mobile search.
RWD gives us one page – one URL – for each piece of content on your site. Google will always know that is the canonical URL and that is the one that needs to rank, no matter if the search is from a phone, a tablet, a laptop, a desktop or a TV.
It’s not an insurmountable problem with separate sites, but again, it costs money to fix.
Responsive Web Design is not a passing fad. It’s in keeping with the spirit of the web and the ideals of the web, therefore is totally in tune with how the web works and is evolving. It is modern web design.
RWD will save you money, it will get your offer to as many people as possible, it will increase the effectiveness of your website, and it will improve your SEO.
Large and small organisations are adopting it and seeing the benefits in terms of revenue and cost effectiveness that none of the alternatives or old methods can provide.
If you don’t already have a responsive site it’s time you did.