What is responsive web design and do I need it?


Kieran Bell

Analytics and Data Science

If there’s one word that has dominated web design for the last couple of years, it has to be responsive.

Heralded as the next step in digital design, responsive frameworks were first introduced in 2010 as a revolutionary new way of constructing websites. A design methodology that, in simple terms, presents your shiny new site beautifully across desktop, tablet and mobile devices. Maximizing the impact of graphic design, positioning and layouts, which means your content can be easily viewed, enjoyed and shared on any one of the digital devices that are now regular features in our homes, on the move or at work.

Such is the exposure and market demand for this new build technique, that one of the first questions clients will ask is: “What is responsive web design?” That’s a fine question – especially if said client is about to have a new site designed. Often, clients have read articles and had conversations about the subject. However, “Do I really need it?” is a much better question to ask!

What is responsive web design?

Responsive design

Well, you’ll be pleased to know that the principle is fairly straight forward – Responsive design uses HTML, CSS and Javascript to [initially] determine the size of a users screen.

Next, the elements and content of that page are positioned in such a way, that the user is delivered the best possible experience for the device on which they are viewing the website. The aim, of course, is to generate brand credibility, increase traffic and improve conversions.

So in theory, a brilliant set of design principles, providing a great deal of solutions. This is a design principle that means all your hard work, graphic design, conversion focused layouts and creative media are delivered perfectly, to all devices. Ipso facto, an immersive, effective and visually engaging website is there for the taking. It even means you don’t need to design and build a separate mobile website. And if that’s not enough – tablets are given their own optimised layouts for both portrait and landscape views!

Should all sites be responsive?

Well, the short answer, is – perhaps surprisingly – no.

As with all things web, it’s a case of considering the content, not to mention the primary function of the site itself. Ask yourself the obvious questions. For example: How can we best present our copy, images and media to users?

Sure, the answer to this question may include a responsive template – but the delivery of content and how this enhances user experience is (and always has been) the way to design your site. On-trend techniques will most likely be used, but don’t let that cloud your judgement to the fundamentals of design – or get in the way of the sites primary aim: conversions in one form or another.

As an example, if you’re a B2B company, can you remove sidebar elements and hide calls to action? Or could this make the site harder to navigate and less likely to convert your traffic?

Another consideration could be your level of media content. If you’re hosting loads of video, would responding this content down add to the user experience? Or could it in fact diminish it?

For these two examples, there are loads of potential solutions – maybe responsive, maybe not. The important point is that responsive techniques should be used to enhance the design and improve the user experience – not be the sole driving force of a sites design principle.

There is also a common misconception that responsive gives you a mobile site, removing the need to build a mobile specific site. Whilst this is kind of true, I would look at it this way; responsive aims to optimise site layouts for any screen size, to deliver the most engaging view possible. By definition then, a mobile user will have an optimised view. Certainly the irritation of pinching and zooming as well trying to click small links (invariably clicking the wrong link over and over again!) is removed and navigation is vastly improved.

Overall then, the responsive mobile view will present a much improved experience, and in many cases, this will provide the solution. However, a responsive template doesn’t by default, replace the need for a mobile specific site. Once again, it’s all about content delivery and user experience, so make sure these factors are fully considered before you make your mobile site decision.

Web designers who have allowed the responsive explosion to distract them from their core skills (that is to design for the brief) should remember a few basics: always ensure designs are the best digital solution to help clients achieve their aim (by virtue of the brief) and not to be a digital solution that is chosen simply because it is the newest thing out there.

Alas, enough of the negative. There are many great things about responsive design and I am an avid fan of it. I just think its important to reinforce the fact, that traditional design principles should not be overlooked by technological advances without good reason. Used right, responsive design can add significant value to a website (in terms of design) and will continue to get better and better. Utilising both HTML 5 and CSS 3, it has meant that brands, companies and individuals can create engaging, creative and visually exciting websites that work and look as intended, across the massive range of tech we use to get our daily digital fix.

SEO and responsive designWhere does SEO fit into responsive?

Google does recommend websites are built using a responsive design approach and consider this design principle to be beneficial in terms of SEO. Here’s a brief overview as to why:

Firstly responsive design means only one URL, making it easy for your users to interact with the page, for admins to maintain functionally / add content for all devices, as well as enable Googles algorithms to assign the indexing properties to your content with greater efficiency.

Add to this non-duplicated content, no canonical URL issues, and no redirect problems and its plain to see why Google would articulate the advantages of responsive design and why designers should, where possible, implement a responsive design approach.

So with Google now adding significant momentum to the responsive revolution, it seems fairly clear cut – responsive wins hands down, doesnt it? Well, as you may have suspected, there is a cautionary note to consider. Let’s not forget that Google has merely recommended that a responsive design principle be used. Here’s Googles statement on the subject:

  • “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.
  • “If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.”

Excuse the pun, but the keyword in Googles statement is undoubtedly recommend. In essence this means that user experience remains the number one consideration for web designs. Whilst Google would prefer that you use responsive, they insist that you deliver as best possible, if your users suffer as a result of your design and build principles, then so will your SEO – no matter how contemporary your build technique may be.

In summary, don’t think about responsive as a way to design for multiple devices, think of it as a way to design for multiple screen resolutions.

And don’t look at responsive as a separate entity to other web design principles you already have in your quiver. Instead, view it as more ammunition in the designers armoury. That way, when you’re working through your next brief and generating concepts, you can use combinations of responsive templates/elements when the job requires it, not because it was agreed in your first meeting that a site would, or indeed would not be, responsive.