Why should your website be responsive?

Many of us hear the term “responsive design” very often these days. I’ve heard people asking what it is, or people trying to define it in their own words. Most of them do have, by now, the right idea about what responsive web design means: the design that allows web pages to stretch and re-size gracefully, according to the screen of the device they are displayed on.

But most of the people I’ve spoken to don’t really seem to understand yet why responsive design is good, or why they should care about implementing it on their websites.

I strongly believe that it is now very important for everyone who owns a website or plans to get one built to make sure that it will be responsive. In this article I will try to explain as plainly as possible the reasons why I think so.

1. Firstly, although it’s a fairly new approach (first mentioned as such in 2010, by Ethan Marcotte, in his article published in A List Apart – http://alistapart.com/article/responsive-web-design), the responsive web design had an amazing impact on the way websites behave online today and on the benefits they can bring to a business. Responsive websites can generate cumulated traffic from desktops + tablets + mobile phones.

2. Moreover, a responsive website ensures a great user experience, because the users don’t need to re-size the pages in order to be able to read the information, the design is not compromised any more on smaller devices such as mobile phones, and the loading time is fast. This improved user experience means that responsive websites will gain a competitive advantage in the eyes of the audience, against the non-responsive ones. The business will gain customers’ trust because the owners had them in mind when they designed a user-friendly website.

3. As a consequence, search engines prefer responsive websites as well, because, obviously, those who run them (the search engines) know about the great positive impact the responsive websites have on the user experience, and will therefore “push” them ahead of the non-responsive websites.

We’ve tried to illustrate the main idea in the graphic bellow:

Fig. 1 – The importance of responsive web design

Some semi-technical explanations:

There are multiple ways of optimising a website for the mobile devices:

1. You can have 2 websites (with 2 URLs, e.g. www.example.com and www.m.example.com), one for desktop and the other one for mobile devices.
2. The second option is to have different HTML file and CSS style sheets for the same URL, one version for desktops and the other one for the mobile devices.
3. The preferred option lately is to have one single URL for your website, and the same HTML files and CSS style sheets for all screen sizes. Your website will stretch and re-size depending on the device used to access the page. A popular way to achieve this is by using Twitter Bootstrap, a fairly new technology that is implemented in large number of new WordPress themes as well.

Note: I’ve noticed that the dropdown list for the navigation menu, used in the responsive websites (option three above) confuses some of the very traditional users, but this is, in my opinion, a “trend” that will be easily and quickly assimilated, and even the more traditional or less experienced user will have to get used to it (and appreciate it, eventually).

I have provided an example of a responsive website below. These images are screen shots of www.camdenworld.co.uk, resized according to the screen size used. These images might not be clear enough to showcase my point, but you can try the website yourself in your browser, by shrinking and re-sizing the window – horizontally – as you like, and observe better what happens:

Fig. 2 – Showcase – Camden World website (clicking on the image will take you to the website homepage)