3

Responsive Web Design: An introduction

Posted by in Design, Discussion, Web Design on March 2, 2011

What is responsive web design?

The term originated back in May last year on A List Apart as a way of describing a web design that automatically adjusts itself depending on a variety of factors such as screen resolution or the device used to view the site. Previously to accommodate these variables individual web pages would need be created. However now with a combination of different technologies such as Media Queries it is possible to serve up one web page which will alter itself and move design elements around depending on the available space.

How is this possible?

It is possible through the use of CSS3 Media Queries. For those who are new to stylesheets I would suggest reading W3schools articles here.

What is a media query?

Since CSS 2 designers have been able to utilise device awareness using media types, for example if you have ever created a print specific style sheet for your website then you will have an understanding of how this works.

With the introduction of CSS3 this functionality has been improved by adding media queries which enable certain variables to be checked such as width and height. This then allows you to specify a certain stylesheets for particular screen resolutions.

Visual Examples

Here are some visual examples of how each of the following sites is adjusting itself depending on the size of the browser window:

Think Vitamin

3200 tigers

Websites using Responsive Web Design

Below are some more examples of how websites built with responsive web design in mind respond to varying browser widths. You can try this yourself by opening the sites and resizing your browser to see the way the page dynamically moves elements around the canvas depending on the size of the browser window:

Teixido

Little Pea

Stephen Caver

Browser Support

Unfortunately as with any relatively new web design technology some browsers aren’t supported. In particular IE8 and older, which means this won’t work on the largest stakeholder in the browser market.

However there are ways around this with some of the scripts below:

Resolution Specific Stylesheets using jQuery
jQuery Media Queries

Conclusions

As this is quite a broad topic to cover we will be posting follow up articles discussing the benefits and drawbacks of responsive design in the near future. In a nutshell though a lot of designers are already making use of the technologies and are seeing some benefits for clients who want to be at the cutting edge or who want to target mobile devices.

However in real world terms for most clients who just want a basic website that works right out of the box on a limited budget, it’s fair to say that responsive web design just doesn’t make sense from their point of view at this moment in time.

What do you think about responsive web design? Is it worth the time and effort or does it just add extra complexities to web design?

Update: A follow up to this article can be found here:
Is responsive web design the best approach for business?