Responsive Web Design

08/12/2011 12:20 PM / by / no comments

What is Responsive Web Design?

Responsive Web Design is the process of designing a website so that it responds to the medium that it is being viewed on. For example, a responsive design will look different when viewed on the smaller screen of a mobile device to how it would on a normal desktop computer.

There is more variation than ever in the screen sizes of devices used to view websites because of the huge rise in the use of mobile browsers. According to the UK Mobile Internet Usage Statistics, at the beginning of 2009 the percentage of web traffic that came from mobile devices was 0.02% but this has since increased to almost 10% and this trend isn’t likely to stop any time soon. These statistics dictate that good Web Design should take into account the experience of users on smaller devices.

Additionally, websites on devices such as iPhones and iPads can be viewed in both landscape and portrait so, on top of screen size, the orientation of a device can also affect the user experience.

The Elements of Responsive Web Design

So how can websites be developed so that they are flexible enough to look good regardless of the device they are viewed on? The answer is with CSS3 @media queries.

With the @media query the properties of the device being used to view a website can be inspected and the styles applied to the website can be adapted depending on the width of the screen. In the example below the enclosed CSS properties would only be applied to devices with screen sizes between 700 and 900 pixels.

@media only screen and (min-width: 700px) and (max-width: 900px) { }

Using the method above a set of separate layouts can be created for a website to optimise it’s appearance across different devices.

Designing a Responsive Website

The process of designing a responsive website begins with first coding the full size or normal layout of the website. This will be used when screen size isn’t an issue or in browsers that don’t support CSS media queries.

Next a set of child layouts are created for the most common screen sizes and device types that will access the website – for example mobile phones and tablets. CSS media queries are then used to decide which of these child layouts are served depending on the type of device that is accessing the website.

Flexible Images

A responsive web design is only flexible to a point if the images served are the same regardless of the device displaying the website. It is therefore important to ensure that images are responsive.

A quick and easy way to achieve this is by setting the maximum with of images to 100%. This will mean that regardless of the width of the layout, an image can never be wider than it. The CSS to do this is:

img {
     max-width:100%;
}

Whilst this does work, the result for users on mobile devices could be unnecessarily downloading large images that will be significantly scaled down before being displayed. If you decide that this would be an issue, CSS Wizardry has a solution that displays separate images rather than resizing.

Example of Responsive Web Design

The example of responsive web design below is from the WWF Earth Hour website and shows three different layouts that will be served depending on the screen size of the device accessing the website.

CSS frameworks

This all seems like a lot of additional development work but thankfully there are a lot of frameworks that can help speed the process up.

My personal favourite and the framework that I’d recommend is the Less Framework, which is now at version 4. The framework is grid-based and includes media queries for the most common screen sizes and also gives consideration to portrait/landscape orientation on mobile and tablet devices.

For WordPress developers there are also several starter themes/frameworks that have a flexible grid system built in. The theme I use most often is Whiteboard. It’s also worth saying that the 2011 theme that comes along with a new WordPress installation is also responsive.

Further reading

Less Framework – Information and download for the Less Framework

30 Creative Examples of Responsive Web Design – A few more examples of Responsive Web Design

WordPress Theme Frameworks – A list of 20 WordPress Theme Frameworks, some of which include flexible layouts

Fluid Images – More information on flexible images in Responsive Web Design

 

No Comments

    Leave a Comment

     

    — required *

    — required *