Responsive Web Design - What's it all about?

Most new websites built in this era are "responsive". Today's blog post seeks to explore exactly what Responsive Web Design (RWD) is, and why I believe it is important and beneficial.

Firstly, the world's favourite website (Wikipedia), defines "Responsive Web Design" as:

"...a Web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from mobile phones to desktop computer monitors)."

A responsive website will adapt its layout according to the viewing devices display size/resolution. This means every device from a 50" plasma TV to a 55mm Blackberry smartphone will render the same website differently, for optimal performance and display.

It used to be, and for many, still is the case that if you wanted your website to be mobile-friendly , you had a separate website built which the visitor would be automatically redirected to if the on-site JavaScript detected that the visitor was using a smaller type of device. This meant creating an array of all identifiable "smaller” devices, and keeping that array up-to-date as new devices hit the market.

There are some issues with having a separate mobile site:

1. If your array isn't up-to-date, then visitors using new unrecognised devices wouldn't be automatically redirected to your mobile site; resulting potentially in a quick exit. Another potential customer lost! Admittedly, most websites that have a separate mobile site do tend to place a link to their mobile site for such instances. However, if it isn't prominent, it isn't going to get clicked.
2. If your website doesn't have an admin/management panel for updating your website's content, you are going to find yourself doing everything twice whenever an update is required, or a new page adding. I can barely imagine the frustration involved in having to prepare and save all your images in Photoshop twice. I suppose there are clever ways around having duplicate content, such as using Server Side Includes (SSI) for the content of each page. However, my guess is that this often ISN'T the case.
3. Lastly, having duplicate content on your website is not good for your Google ranking. Think about it you have four paragraphs of text on your "About Us” page, and then you have exactly the same four paragraphs of text on the same page on your mobile-friendly site. Google penalises duplicate content, even within the same domain name. If your regular website and mobile-friendly website have different URLs for each page, then Google will index everything twice. The only way around this is to add rel="nofollow” to any links pointing to the mobile-friendly site, and to block search engines from visiting your mobile friendly site pages in the robots.txt file.

Now imagine having one super site that caters for all devices. You only have to upload/enter your text & image content once and you don't have to worry about duplicate content. You also don't have to worry about keeping up with the latest miniature devices. It is all possible with responsive coding. A site designed with responsive coding will cause the layout of the website to adapt itself to the viewing environment using fluid, proportion-based grids, flexible images and CSS3 media queries (an extension of the @media rule).

The "fluid grid” concept calls for the sizing of elements on the page to be displayed in relative units such as percentages, instead of absolute units such as pixels or points.
Images become flexible as their sizes are also commanded as relative units, thus preventing them from displaying outside of their containing elements.

Media queries permit your website's page to utilise different CSS style rules based on the characteristics of the device visiting your site; most frequently, the width of the browser.
Server-side components (RESS) in conjunction with client-side components can produce quicker-loading websites for access over mobile networks and deliver richer functionality/usability. This avoids many of the pitfalls of device-side-only solutions.

It is now possible to validate and test RWD websites using mobile emulators, mobile site validators and simultaneous testing tools such as Adobe Edge Inspect. The Mozilla Firefox browser and Google Chrome console offer RWD viewport resizing tools, as well as some other third parties.

Bespoke RWD obviously comes with a price due to the sheer amount of time spent refining each individual element and creating several CSS style rules. However, more and more of our customers are requesting it. Higson Media have already converted two non-responsive websites into RWD recently and we have built many more from scratch.

So is it worth doing?

In short, yes. If you look at your website visitor statistics via Google Analytics or any other online stats software, you will see that more and more people are using mobile devices such as smartphones, tablets, Kindles and iPods to access your website. In a few years, RWD will be standard. More and more devices are now being built with web browsers & internet functionality. What's the bet that Sat Nav's will be next? Or perhaps the dashboard in your car!

Click here to contact us for a quote on converting your existing website into RWD.