What is Responsive Design?

If your business website looks like a shambles on mobile devices then you're shooting yourself in the foot. Australians are more likely to reach for their smartphone than their PC when they're ready to search for information or shop online. If you want a slice of the action then it's important to build your website from the ground up with mobile devices in mind.

The goal of providing the optimal user experience to everyone who visits your website gave rise to the concept of Responsive Design. The idea is to reconfigure the pages on the fly to ensure they're attractive and functional regardless of which device your visitor is using. 

These days Responsive Design is widely regarded as web design best practice. You could think of it as an extension of web accessibility – with the goal of making sure that your site is available to as many people as possible. 

This is the first in a series of articles explaining Get Started's approach to Responsive Design. Here we'll explain what we mean when we say "Responsive Design". Then we'll go on to talk about the benefits, cost factors, elements of good design, common misconceptions and finally the future of Responsive Design.

Responding to your every need

While this idea of universal optimisation sounds pretty straightforward, actually defining the "responsive" aspect of Responsive Design is tricky. 

Websites can respond to your needs in different ways, and there are different techniques used behind the scenes. We've come a long way from the days of "best viewed in Internet Explorer at 640x480 pixels". 

Some people will tell you that simply abandoning a fixed page width in favour of "100% width" is enough to make your website responsive. You may have resized the page to fill the available screen, but that doesn't necessarily mean you've made the website any easier to use on smaller device. You're not doing enough to improve the user experience, which is the key driver of Responsive Design. 

Proponents of true Responsive Design agree that it generally involves redesigning the page for different devices, rather than merely squishing the desktop website onto a smaller screen. Effective Responsive Design involves making the most of the available screen real estate by using flexible grid layouts which can remove columns, resize elements, reshape images, simplify navigation and prioritise the content most likely to appeal to visitors depending on the device they're using and even their current location. 

At this point you're not just responding to the specifications of the end device, you're also changing the overall experience to respond to the needs of the end user. User experience is king under the Responsive Design model.

Where does the magic happen?

At this point you can divide the proponents of Responsive Design into two main camps, even though they're both trying to achieve basically the same result.

Some people believe that the responsive magic should happen at the server level, by studying the end device and then delivering an optimised webpage. We're going to call this approach Server-Side Responsive, although it can go by other names. It tends to favour "adaptive design" templates specifically designed for different devices, targeting a handful of common devices or sometimes calling on online libraries of device specifications.

Other people believe that websites should reconfigure themselves in the browser on the end device, to best respond to their environment. This approach means that the server only offers a single page design which can respond to support all end devices. We're going to call this approach Responsive Web Design, a term coined by web designer Ethan Marcotte in 2010. It's the approach favoured by Get Started when we talk about the idea of Responsive Design, but our focus is always to put the needs of the end user before any particular technical philosophy.

Responsive Web Design doesn't rely on server-side templates so it isn't thwarted if it encounters a previously unseen end device or screen resolution. It's built on the three main principles of a fluid grid layout, flexible images and the ability to download different content – using style sheet media queries – to best suit the end device.

There's even a third camp known as Responsive with Server-Side components (RESS) which aims to combine the best of both Server-Side Responsive and Responsive Web Design.

Focus on the user experience

Responsive Design is a broad church and there's no need for these main camps to be at war. There are debates as to which particular web design techniques deserve to be classified as Responsive Web Design, but to get bogged down arguing about the technical aspects of Responsive Design is to miss the point. The point is to provide a great user experience in every environment.

Some Responsive Design proponents abide by the motto "Mobile first". This involves designing pages which are optimised for small screens and then scale up for larger devices, rather than the scale down approach of old. This new mobile-focus approach ensures that handheld devices aren't bogged down by desktop-friendly requirements. Other designers abide by the motto "Content first", a similar concept which insists that pages load quickly on all devices and that decorative design never gets in the way of usability.

The idea of Responsive Design emerged from the quest to provide the best user experience possible. Does your website adapt to screen sizes and device capabilities? Does it perform well on any device? Does it respond to meet your visitors' specific needs? These questions lie at the heart of defining Responsive Design.