We use cookies to improve our services and provide a better experience. By continuing to use this site, you agree with our Cookies Policy.

Understanding Responsive Web Design

hashtag_big
November 3, 2014
| Articles

Responsive Web Design (RWD) has been around for a few years now and describes a site that delivers content based on the size of the screen that requests it. The site looks and feels the same as it would on a desktop screen, but often is pared down in order to maintain good user experience (UX).

 

When RWD first hit the scene, it was seen to be the answer to the mobile revolution. Creating sites just for mobile for many businesses was beyond their reach financially; with RWD though, just one site had to be designed and developed rather than two. For sites such as e-commerce, this was seen to be a huge advantage as these are often expensive to develop and maintain.

 

What Are the Alternatives to RWD?

As mentioned above, you can of course opt to spend the cash on a full, standalone mobile site, or you could use adaptive design. RWD uses HTML5, CSS3, media queries, the @media rule and fluid grids that use percentages in order to provide a fluid foundation which changes to adapt to the size of the device it’s delivered to.

 

Adaptive web design (AWD) uses progressive enhancement to create a layered environment which depends on a set of predefined layout sizes alongside CSS and JavaScript. AWD tailors itself to the target device, rather than the more fluid responsive approach. The main difference in the two approaches are that RWD tends to be more code heavy, whilst AWD takes a more layered approach.

 

Another distinction that means little to the non-developer/designer is that RWD is client side whilst AWD is server side.

 

Huh?

 

Client side means that the entire page is delivered to the browser on the target device (the client) and the browser does the work of changing how the page will display based on the size of the screen. Server side means that the host server detects device attributes before delivering the right sized version of the site to the device.

 

Responsive is now far more popular than adaptive design, but in the early days was thought to contribute to slowing down site performance. This was in fact more to do with the skill of the developer than anything else; a responsive site can use media queries, responsive images and more to ensure that the full desktop site isn’t loaded into a mobile browser.

 

Perhaps one reason that RWD has become so popular is the sheer volume of frameworks available and that there are now so many responsive, pre-made themes to choose from on WordPress. This means that even those who are not particularly experienced at web design can have a responsive site which they have gained just by installing a theme purchased for as little as $50. WordPress is the most popular platform on the web and it’s thought that as many as 74.6 million (as of February this year) sites globally use it. I’m not referring to the free version of WordPress that you can access at wordpress.com as a blogger, but also to the free hosted WordPress which you can often install with one click through hosting companies.

 

Perhaps another reason that RWD has become so widely used is due to Google recommending it as the preferred design technique for mobile, too.

 

Is Responsive Design Good for SEO?

 

Yes, although site speed can affect it slightly if it’s not properly designed. However, not only does Google recommend it, but also favours sites that are optimized for mobile when presenting search results. If you have one site, with one URL (rather than a mobile and desktop URL) then Google effectively has half the work to do when it comes to crawling and indexing them.

 

“In general, I wouldn’t worry about a site that is using responsive design losing SEO benefits because by definition you’ve got the same URL,” Google’s head of search Matt Cutts said. “So in theory, if you do a mobile version of the site, if you don’t handle that well and you don’t do the rel=canonical and all those sorts of things, then you might, in theory, divide the PageRank between those two pages. But if you have responsive web design then everything is handled from one URL, so the PageRank doesn’t get divided, everything works fine.”

 

UX is More Important Than Ever

 

Modern websites demand great UX as users become increasingly sophisticated in what they demand from the browsing experience. A site that doesn’t provide good UX will quickly lose business as conversions will definitely suffer. Good UX is composed of a lot of separate elements, which include:

  • Quick load times;
  • Little pinching and scrolling;
  • Good padding around clickable areas so that it doesn’t encroach on other areas/buttons;
  • Clear text that’s well laid out and easy to read;
  • Great navigation signals that direct the user around the site logically, and much more.

 

Responsive web design, when done well, can provide a great experience especially as it tends to maintain content and branding across all platforms. Of course, sometimes it’s necessary to pare down the content for mobile, but it should still deliver the same experience.

 

Consider this, according to Kissmetrics, “one second delay in load time can result in a 7% reduction in conversions” so if an e-commerce site was making $100,000 per day that would equate to $2.5m in lost revenue a year – that’s a lot of money.

 

So it’s important to get it right if you’re creating a site using RWD and ensure that it loads quickly.

 

Responsive web design is, for the most part, an excellent and recommended choice for anyone that wants a commercial website. Even if you can afford to have a stand-alone mobile site developed, it’s still not the best idea as you have to use more than one URL and mobile sites often rely on a lot of pinching and scrolling that lessen the visitor experience.

By Kerry Butters
Categories: Articles
No Comments Leave a Comment
Leave a Comment

Archive