Responsive Design: What is it and do I need it?

Posted by on Nov 6, 2014 in Design

The Challenge of Mobile Business

The statistics are staggering: there are currently 4.3 billion people using a mobile phone. It is forecast that this figure will increase to 5.1 billion by 2017* It is fair to assume that amongst those users, many are your existing or potential customers. So are they seeing your website? Is your website mobile-friendly? The traditional approach has been to build a different website for mobile use. But it is becoming virtually impossible to allow for the immense range of mobile devices and operating systems that are on the market and building and testing multiple websites is time-consuming, costly and let’s face it, you will always be playing catch-up. It just doesn’t work anymore. What about my mobile app I hear you shout? Apps are brilliant, they are fast, powerful and deliver a targeted and specific user experience. But they are expensive to design and maintain and have to be developed for each platform they used on. Apps require the user to download them, and if your app doesn’t deliver, is too slow, or has negative ratings, that same user is likely to discontinue using it.

The challenge seemed to be for businesses to find a cost-effective and measurably efficient way of communicating with their ever-demanding mobile customer base and for web developers to deliver a fluid, future-proof solution.

The Solution of Responsive Design

Responsive web design is brilliantly simple in its philosophy: it is a design approach aimed at creating a single website that can be optimally viewed on any device, one site for every screen, a website that responds intuitively to its environment.

Like so many great web design concepts, responsive design was developed from a real-world idea, the notion of responsive architectural design, or the idea that a room or physical space is not re-built each time for different users but rather it adapts itself based on the number of people in it or what it is being used for at any one time. A simple example of this is climate control systems that adjust a room’s temperature.

User-Centric Design

Responsive design is a design and development approach that responds to different user requirements and behaviour based on screen size and platform. A responsive web site will re-organize itself automatically in response to the device being viewed on. So if an iphone user switches from portrait to landscape view, or moves from laptop to ipad, the website will automatically change to allow for screen resolution, image size, text legibility etc.  It avoids the user having to scroll in and out to read portions of text on mobile devices and instead allows for alternative layouts perhaps reducing the amount of content presented to ensure fast page loads or delivering  a simpler navigation rather than wrapped-around navigational headers. Images and logos can be smaller rather than squashed or cropped and page elements can be hidden.  It is a technology based on user preferences delivering a consistently great user experience across ever-increasing devices, platforms and operating systems.

A responsive website should:

  • be easy to read and fast to load
  • have a simple straight-forward navigation
  • be accessible across a range of devices

How Does it Work?

Impressively simply with some incredible technical genius; a responsive website is one website, one set of HTML code delivered from the server but different CSS rules are applied depending on the device being used. It is the CSS that changes how a page is rendered on different devices and it is this component that is the key to responsive design. The most common CSS rule that changes is the width of the browser making the website flexible and responsive to the exact size of the screen it is being viewed on. Flexible grids and images (as opposed to fixed width) are used to enable an adaptable layout and this is done by designing in percentages rather than pixels which are absolute.

What are the Benefits of Responsive Design

A responsive website is by far a more cost-effective alternative to mobile apps or the development of multiple websites which quickly become out-dated or insufficient in meeting customer demands. A responsive website:

  • Adapts to the changing consumer landscape
  • Offers a more streamlined experience, increased speed and functionality
  • Enables users to engage with your brand differently on different devices
  • Generates a more positive user experience
  • Delivers a better performing website with increased traffic and revenue
  • Offers improved accessibility as works well for users with motor and visual impairments
  • Is easy for search engines to read and index. It avoids accidentally duplicating content in a mobile and non-mobile website, which search engines don’t like.
  • Uses forward-thinking technology

So do you need it? Probably yes, the bottom line is if your website is not mobile-friendly you are running the risk of losing your customers and ultimately revenue.