What is responsive design?

You may have heard of the phrase “responsive design” before. If you haven’t then this article is for you. The phrase is appearing more and more in Request for Proposal (RFPs) documents and website briefs that we receive here at Coast and I’m sure that frequency will only increase as 2012 progresses.

So what is responsive design?

In essence, responsive design is where a website will adjust to the user’s current viewing method to provide the best experience possible.

In order to do this the website will take into account;

• the user’s device – such as desktop, tablet or mobile device
• the screen size – large or small
• and even screen orientation – landscape or portrait

How does it do it?

Here’s the techy(ish) bit. To do this wizardry the site needs 3 elements to make it responsive. According to Ethan Marcotte who coined the phrase “responsive web design,” these are:

1. A flexible or fluid grid
2. Responsive images
3. Media queries

The design and development team knit together these 3 elements to make the magic happen and when it does, it will look and work something like this:

The example shown above is Lancaster University’s site as seen on 3 different platforms or screen sizes. http://www.lancs.ac.uk/  

It shows how the navigation structure and grid layout change depending on the viewing size and device and how the images scale to fit in each case.
Personally I think it’s a great example of responsive design – it looks good and works well.

What does it mean for your business?

The utopia here is one single website that serves all users, irrespective of device or platform, providing the best experience whilst you, the website owner has only a single platform to administrate. Halleluiah, I hear you cry!
Implementing responsive design into your web strategy can allow you to rationalise multiple platform sites and streamline and simplify your offering into one solution. The Holy Grail being improved website performance as a result of the changes.

What’s the catch?

There isn’t one! Not for the website owner anyway.
The biggest catch comes for web designers and developers. Responsive design poses a new direction and challenge to conquer, but such challenges are not uncommon given the fact the web is continuously evolving at pace.
Due to its increased complexity to deliver, and therefore increased time required, you may see an increase in development cost but what do you get in return? 3 sites for the price of one (figuratively speaking) and a direct reduction in administrative time and cost.

If you are interested in finding out more about responsive design, then these resources may be of interest to you:

• 50 examples of responsive design
• Responsive design in 3 steps
• Responsive Web Design by Ethan Marcotte 

If you think your website would benefit from responsive design and want to know more get in touch with us today.