Responsive design – what it is & how it works

Marketers, digital designers and developers are all struggling to keep pace with the rapidly changing digital landscape and the evolving expectations and behaviours of consumers. New devices bring new challenges in designing experiences which span many devices and platforms.

In a world where the variety of internet connected devices is rapidly increasing a design technique called ‘responsive design’ offers designers and developers a forward-looking approach that, done well, provides a great user experience for users across devices.
 

Responsive design and how it works

Responsive design is a way of designing and building flexible websites which respond to the limitations of each platform. So, instead of having to design multiple websites for every device and platform, you create one website which automatically adapts to the device in use.

It works by using the same underlying HTML content on the page, then adjusting the CSS layout when the screen size changes. A responsive website may look different on a phone to how it looks on a tablet, but the content is static and therefore the same. Think about it like a chameleon changing its colours; it may look different depending on the environment, but it’s still the same animal underneath.

The Boston Globe website is a great example of responsive design in practice. Open it on different devices or simply resize your browser window and you can see how the layout and content adjust.
 

The benefits
This approach has two main benefits:

• Responsive websites work on all devices, even ones that don’t exist yet, so when a new device like the Kindle Fire comes out, you don’t need to change anything on your website to support it.
• It forces you to serve the same or similar content to every device and therefore creates a more consistent and richer user experience. Many mobile websites fail to address user needs because they wrongly assume the user’s intent. Mobile sites with a small subset of functionality can be useful in some situations, but often fall short in others.

The best way to build a responsive website is to start with the mobile layout, a technique often called ‘mobile first’. This encourages you to focus on a few pieces of core content and functionality, rather than having the luxury of a large screen to play with. Deciding what’s most important can be a difficult process, but the end result is a more focused product.
 

The drawbacks

• While it’s rapidly maturing, responsive design is still a new technique and that novelty has its costs. Technical workarounds are required to adjust content such as images for different screen sizes and the workflow for building a responsive site has yet to be fully established.
• It is also more time consuming to conceptualise and design a site in many different layouts at once. Greater care is required to ensure that the site and its content works well on every screen size. It is easy to forget that you’re not just designing for the desktop.

Looking forward
Responsive design will take time to mature, but it is clearly a technique which will become widespread. While a separate mobile site will remain the best option for some websites, the majority can benefit from a responsive design.
 

Further reading

• Responsive Web Design – the article that started it all
• Responsive Web Design – the book
• Multi-Device Web Design: An Evolution – a comprehensive summary of the subject
• “Mobile” versus “Small Screen” – about separating context from intent

05/03/12 Agueci said:

Great post Phil, This actually make me think about how little effort is done for buiding webistes that are more usable at lower screen size/resolutions. Even without using responsive design techniqhes, simply making sure that main navigation menus are usable on touchscreens, using generous spacing between clickable links and avoiding to clutter pages with content that requires plugins would make mobile browsing much less painful.