Responsive Web Design

There has been a massive amount of buzz generated around “responsive design” (RD) and how it’s the future of web design.

by Hagen - June 2014

The term ‘responsive design’ has been a buzzword in the digital sphere since 2011. So what exactly does it mean, and what are the pros and cons? Let’s start with a brief definition: A responsive site means that, no matter what device one is viewing the site on (desktop browser, mobile phone, iPad), the content will always display in an optimised manner. So, for example, if you see a 15 column grid of articles on your large desktop screen, you might only see five columns on your iPad and one column on your mobile phone. The site basically adjusts to the resolution it's being viewed on.

A mobile site on the other hand, is typically a site that has been built and optimised for mobile devices specifically - a completely new design, usually on a different URL.

When all is said and done:

The end user couldn't care less whether a site is responsive or not, they care about their experience when interacting with the site

Consequently, some of the key factors affecting mobile usability are:

  • Is the layout intuitive and the design slick?
  • Can I easily find what I'm looking for?
  • Is the content as comprehensive on mobile as on the desktop version, and if not, can I click to view the full site with all content?
  • Does the site load quickly?

So how does one make the choice whether to go for a responsive site or a separate mobile site?

If a user primarily interacts with a site based on its content, then responsive is a good option (e.g. news sites). The content will just scale down and adjust to fit the resolution of whatever device you are using to view it. Given the advances in responsive frameworks, even more complex sites like e-commerce websites usually lend themselves well to being built responsively. However, if a site or application is very complex, a better user experience might be achieved if the mobile version of the site is conceptualised from the ground up. Take mobile sites for banks* as an example. They need to present a wide range of complex functionality in a user friendly manner. This typically means that the design is conceptualised from scratch for a smaller screen and the absence of a mouse (no tooltips, small links aren't easily selectable).

Having said all of that and having built a number of mobile and responsive sites over the years, our conclusion is that:

When at all in doubt – go the responsive route!

The benefits of responsive design are numerous and include:

  • The site is easier to maintain (one code base)
  • There are less issues with search engines (makes for easier SEO)
  • Users get all the served content and not a stripped down version of the site (which mobile sites often are)
  • It's usually more cost effective to build a responsive site than a desktop site AND a mobile site

What has further swayed us to prefer responsive sites over mobile sites is the technology available in terms of responsive front end frameworks and the fact that less people are concerned about having their site optimised for archaic browsers such as IE8.

In conclusion, there is no doubt that in this day and age, having a mobile optimised site is a necessity. How one goes about achieving this is very much case dependent, but when in doubt – go responsive!

* While FNB has built their site responsively, the jury is still very much out whether this was the right decision.