With web users browsing the net from pretty much any and every location, and on a multitude of different devices, businesses need to figure out ways to stay with their customers every step of the way.
Web users expect that their favourite websites will, at the least, have a mobile-friendly version they can access on their smartphone or tablet.
Ideally, they’d prefer for the site to load immediately, and be easy to access regardless of the device they’re on.
So how do businesses keep up with this mobile trend?
Responsive Web Design
A responsive website adapts a to the size, resolution and orientation of the viewer’s device, whether it’s a PC, tablet, or smartphone.
Conversely, sites that aren’t responsive may be difficult to view on some devices, making them virtually unusable in certain cases. For instance, a non-responsive site viewed on a smartphone may be too small to read, and may lack some key navigational features.
The way responsive design works is this: the entire page is delivered to the device browser, and the browser determines what size and orientation it will display.
Built using ‘breakpoints’ for each size of screen, responsive design delivers pages specifically optimized for your device’s screen size. Many responsive sites use 3 breakpoints (one for mobile, one for tablets, and one for desktop), while others, like the Boston Globe, use 6:
- 1200 px
- 960 px
- 768 px
- 600 px
- 480 px
Why Use Responsive Design?
Responsive design is quickly becoming the industry standard. This is no passing fad.
1. Google recommends it.
According to Google, “webmasters [should] follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”
Perhaps one reason Google considers responsive design a ‘best practice’ is that responsive sites use one url and the same HTML no matter which device is accessing it, meaning it’s quick and easy for Google to crawl and index your pages.
Another key advantage is that a single url and shared HTML make your site easier to share and be linked to, both of which are helpful for improving user experience.
2. It’s good for SEO.
Although there is some controversy over whether or not responsive design improves search engine rankings, Google does say, ‘Focus on the user, and all else will follow’
Some have postulated (although I haven’t been able to come up with any solid evidence to back this up) that mobile-friendly sites rank more highly for mobile-related searches, and for searches performed on mobile devices.
But there is one issue that definitely can have an impact on search rankings: links.
I think we can all agree that if you don’t have a responsive site, at the least you need your regular (non-responsive) site, and a mobile-friendly site. Not only is it expensive and time-consuming to manage two separate sites, but your links are divided.
What I mean by that is this: If you have 2 separate sites, all the external links to your site are either going to be pointing to your mobile site or your regular site – likely not both. This means that instead of having one site with 1000 links, you now have two sites with 500 links each. And if you’re going to be spending your time working on building high-quality links to your site, you certainly don’t want to have to do it twice!
3. Mobile web browsing is growing by leaps and bounds.
While web users are still spending more time online on their desktops, time spent using mobile is growing at 14x the rate of desktop use.
If this trend continues, mobile use is very likely to surpass desktop use by 2015.
In case you’re not convinced, chew on these numbers: In 2009, global mobile traffic made up 1% of internet traffic, In 2010, that number climbed to 4%. By the end of 2012, it reached 13%.
In addition, a growing number of web users are only accessing the internet via their mobile device. In the US, for instance, 25% of web users are ‘mobile only‘. In some countries, like Egypt, this number is a staggering 70%.
With numbers like these, businesses who aren’t incorporating responsive design (or at least a mobile version of their site) are going to fall behind – fast.
4. Mobile use is especially on the rise for e-commerce.
With more and more mobile users turning to their mobile devices for online shopping, businesses that don’t offer mobile-friendly shopping experience are going to be missing out.
Check out these numbers:
- 66% of smartphone owners use their phone to aid in shopping.
- 64% of smartphone owners are now using their phones to shop.
- 25% of consumers engage in online shopping only with mobile.
5. Better performance.
Responsive sites tend to load faster, particularly because they don’t lose time redirecting visitors to a device-optimized site.
When businesses have both a desktop and a mobile version of their site, they usually set up a redirect from one to the other, depending on what kind of device is accessing it. This can result in slower loading times.
And this is something mobile users aren’t happy about. In fact, 58% of mobile users say they expect mobile sites to load as quickly or quicker than desktop sites.
6. Helps you keep your customers.
How many times have you browsed the web on your smartphone, and been frustrated enough to leave a site simply because it wasn’t mobile-friendly?
75% of mobile users who access your site using their mobile device want a responsive, or mobile-friendly design. If your site doesn’t display properly on their tablet or phone, they’ll leave. It’s as simple as that.
- 61% of customers who visit a mobile-unfriendly site are likely to go to a competitor’s site
- 57% of consumers will not recommend a business with a poorly designed mobile site.
- 52% of users said that a bad mobile experience made them less likely to engage with a company.
Not to mention, 67% of mobile users say that when they visit a mobile-friendly site on their mobile device they’re more likely to make a purchase.
Responsive vs. Adapative Web Design
A hot topic these days has been responsive versus adaptive web design. I’ll touch on it only briefly, as responsive web design (RWD) seems to still be the industry standard (at least for now).
Both designs have the same purpose: to make websites viewable no matter what device a user is on. Both AWD and RWD are concerned with accessibility and usability, and both seek to improve the user’s experience.
The key difference is in how they accomplish this goal.
With adaptive design, the server determines what size and format of webpage to deliver to the device. With responsive design, the entire page is delivered to the browser device and the device determines which size to use.
In any case, most businesses don’t need to be too concerned about which they’re using, so long as they’re using one!
Responsive web design should no longer be thought of as ‘an’ option for businesses, but rather as ‘the’ option. For businesses building a site from scratch, there are a multitude of inexpensive responsive frameworks available, so price doesn’t need to be a concern.
Is your website responsive? If not, what’s holding you back? Is it in your pipeline for somewhere down the road?