The Rise of Responsive Web Design

It was our hopeless addiction to social media that initially triggered a huge increase in mobile internet usage. That in turn lead to better design practices that made mobile browsing easier and more engaging.

As a result, there was then a second surge in the number of people accessing the internet via their mobile devices—and not just social media websites this time. People flocked as best practice web design standards became more acceptable.

We all came to expect that website owners would consider our mobile browsing experiences. And why not? The mobile internet segment had become a force to be reckoned with; no longer an ancillary group that could be ignored.

One particular solution for improving the mobile user experience proved invaluable above all others. I’m talking of course about responsive web design.

How Responsive Web Design started

The term ‘Responsive Web Design’ was coined by Ethan Marcotte in an article in A List Apart in 2010. The following year, websites were adopting the approach en masse, despite some opposition from others who didn’t think it would catch on (I bet they feel pretty silly now).

What Marcotte rightly noticed was that screen sizes were becoming more and more disparate. While ‘screen’ and ‘print’ had always been the two main accepted layout formats, both requiring unique design foundations, it was becoming clear that there must now be sub-divisions within the ‘screen’ format. The purpose of responsive design is therefore to deliver optimal viewing experiences for all users, irregardless of the size of their screen, by putting more focus on the very foundations required for each individual experience.

The paradigm shift in mainstream practices only started around two years ago, but it is now arguably one of the hottest design trends in the industry. With adoption like wild-fire and excellent user feedback, responsive design is arguably a ‘must-have’ for 2013 and beyond.

Here are the main reasons for its success:

1. Catering to the visitor

Instead of forcing the user to expand their screen or ‘zoom’ in order to view small text, the code behind responsive designs actually detects the screen size of the viewer’s browser. Based on this information, the proper formatting and layout is executed. If the screen size is 400 pixels wide at the most, for example, the code presents a different font size and image size (or different image altogether) than if it was 1200 pixels wide.

Any number of design elements can be changed, added or removed entirely for as many screen sizes as you want to specify layouts for – including blocks of text, images, shadows, colours… the sky is the limit.

2. Benefits to designers and developers

Coding in this manner is efficient and manageable. The coder doesn’t have to maintain multiple versions of websites. Instead, the responsive design code is in the CSS ‘stylesheet’, as opposed to the HTML ‘content’. Therefore, content can be updated and the styling rules automatically apply across all screen sizes.

Because it is all driven by CSS instead of PHP, HTML, or JavaScript it is much easier to manage. Previously, this kind of design simply wouldn’t have been realistically efficient to build or maintain.

3. Inclusion, not exclusion

Responsive websites allow all users to experience the main website, not a mobile version of the site. This means they feel included, instead of feeling as if they were sent off into a corner of the site where only the unfortunate mobile device users traveled. They may have perceived themselves to be second class citizens before now, but not anymore.

4. Big data

By centralising traffic onto a single responsive website, it becomes much easier to track usage and analyse clicks and interactions. The volume of data being generated is overwhelming and can be used to refine designs, plan strategies and even guide product development.

5. Unmitigated design freedom

By writing the responsive design elements into the CSS ‘stylesheet’, designers have been able to increase the standard width of desktop screen webpages from 960px to 1024px and above. The default desktop font size is now 16px; much bigger than before since there is no need to compromise for readability on both large and small screens anymore. Line spacing (padding) is now generally at least 30px; It may seem a bit fat and over-sized at first, but users are embracing the cleanliness of the design and the ease of information digestion.

Posted by Paul

Paul is our Head of Marketing and digital strategy specialist. A Google certified SEO expert and Member of the Chartered Institute of Marketing, he has worked on award-winning campaigns since 2003.

Could your mobile user experience be improved?

Talk to our team of design experts about responsive design today.

Get in Touch or Call 01782 710 740