If you own an ecommerce shop, I am certain that you overheard the word "responsive" quite a few times in the last months. If you made the jump and asked the person who was speaking about it, you can skip this introduction and go directly to the first chapter, otherwise the following lines are here to guide you.
The notion of responsiveness is a direct outcome of the lifestyle changes of most of us. Indeed we tend to spend more and more time on mobile phones and tablets and less than before on our desktops (except if you work in a digital agency!). However, the web as we know it has been designed for large screens and solid internet connection; the content was then not adapted to the smartphones. During the second half of the 2000's, and thanks to the development of data plans, websites started to propose a specific version of their content for nomad users. It was the start of the mobile versions. To do-so, publishers of content had to create a whole new website designed for smaller screens. They were usually easily recognizable because of the "m" prefix in the url (for instance m.thedigitalcube.com). These versions had several advantages and, among them, the small consuption of data for mobile phone users.
The last years of the 2000's saw the democratization of the smartphones, in parallel with more attractive data plans - cheaper, faster, more bandwith: Internet was now ready for a change. It all occurred in 2011 with the introduction of CSS3 new feature: media queries. Such functionality became a W3C recommendation in June 2012.
To keep things simple, media queries allow a developer to specify a width from which the page will load new rules. It then creates a smooth transition without having to load the page again. And that's all responsive design is about.
An outlook on mobile versions
When they were introduced, mobile versions had two big advantages over desktop versions. The first one is obvious, mobile versions proposed a specific content, easy to read on mobile phone, without having to ask the end-user to do any configuration of his/her device. Mobile versions had the advantage to be fully customized with mobile phone features which were really different from the desktop functionalities. The second key innovation was the loading time, way faster than having to load the desktop version since the mobile version is a totally different page.
But mobile versions are not only full of advantages and they present certain drawbacks which could explain why they did not meet a wide success. First of all, if the website is not running under a CMS then any modification on a page will have to be done twice. Moreover, their impact on SEO is uncertain since it would lead to a duplicate content for a page. Although this behavior can be overcome through canonical metatags, Google still recommends to work with responsive versions.
Why has a new rule been created?
However this solution is not fully perfect. Even if they are not displayed on the page, some elements will still be loaded, making the page heavier. Additionally, the content is not always well optimized for mobile devices and gives the feeling we are using a low-cost version of the website. The opposite also tends to happen: A website will look like a large mobile version as developers and designers did not put enough creativity into really customizing each website.
Mobile versions have clearly created the basis of a new vision of internet, not only limited to large screen and desktops/laptops. Of course they could have been more successful and widely used, however they made the transition to responsive websites faster and softer. The huge expansion of mobile browsing called for a simpler, cheaper and more flexible rule and responsive websites were here for that. It appears clear that now you should priviledge responsive design over mobile versions. Even if it is a bit less optimized regarding loading time on mobile devices, responsive designs win the battle for their great flexibility, SEO attractivity and simplicity of updates. However, always keep in mind that the content has to be customized to the platform. If the desktop version of your website looks like a large mobile version then you might lose users and/or increase your bounce rate. Providing an accessible content is good, providing an accessible and customized content is best.