Contact us on 01392 580944 or 020 8144 7455 or info@webdepend.co.uk

Responsive Web Design

The Quick Version

Responsive web design is being talked about a lot at the moment and with fairly good reason. In fact, one of the reasons we relaunched our website recently was so we could incorporate a responsive design.

This hub page sets out what responsive web design is and why it is a good thing before listing some examples of good responsive web design and areas to consider when testing responsive websites. We finish off with a few links to further reading and resources.

Definition of responsive web design

A responsive design means that the website layout will adapt to the screen size of the web browser or mobile device viewing it. If you’re viewing this page on a mobile phone, the page layout will be displayed in a single narrow column instead of the full multi-column layout.

Similarly, other elements of the page can be adapted for the screen size and capabilities of the device. Images can also be responsive, scaling in size for the different devices viewing the web page.

Using this website as an example, the main navigation changes to become a drop down list of pages rather than the full menu once the width of the browser is below a specific set width.

For tablet and smartphone users, other elements can be interacted with using a touch screen. For instance, the slider on the home page can be swiped to move between the slides, as can the slides in the projects section.

Why responsive web design is a good thing

Having a responsive web design means that you don’t need to build a separate mobile site and can utilise the same framework and content for the full range of screen sizes and devices that might access your website.

Therefore, incorporating a responsive design can possibly be a cheaper alternative to give your users a mobile friendly experience.

Responsive web design might not be the answer for every website, some sites may still be better suited to having a dedicated mobile site or even a native app if you need to tie in more closely to the capabilities of the device (for instance if you need access to the camera or have a more intensive application).

Examples of good responsive web design

WebDepend

WebDepend projects page - 320 pixels wideWebDepend projects page - 480 pixels wide

[image src=”http://webdepend.co.uk/wp-content/uploads/2013/01/webdepend-1024-wide-1024×493.png” responsive=”true” lightbox=”true”]

PC World

PC World - 320 pixels widePC World - 480 pixels wide

[image src=”http://webdepend.co.uk/wp-content/uploads/2013/01/pcworld-1024-wide-1024×493.png” responsive=”true” lightbox=”true”]

Testing responsive web design

The main thing with testing a website that has a responsive design, which I highlighted in a recent blog post, is to test it on each of the main types of devices that will access the site. At a minimum this is probably a desktop browser, a tablet and a mobile phone.

You may also wish to test on a number of different phones including iPhone, Android and Blackberry whilst your normal web browser compatibility tests should be carried on for browsers such as those that have the largest market share.

Test that the framework of the site does adapt the page layout correctly based on the browser width but also test that each responsive element does do what you expect for each type of device.

On a desktop browser, by changing the browser width you should also see the page layout changing. This means that using one of the screen resolution tools, such as this one from Matt Kersley, will allow you to set your browser width to certain sizes to check that the page layout has adapted correctly.

The testing of responsive designs does take longer than normal website testing, as there is more to test with the different page layouts and the various responsive elements that you might have.

Links to resources

Wikipedia page on responsive web design

.Net – 50 fantastic tools for responsive web design

Massive collection of resources from R/GA This Is Responsive

Onextrapixel – Really Useful Resources and Tools for Responsive Web Design

WebDesignShock – Responsive Design: 160 Useful Tools, Plugins And Resources

Webdesigner Depot – The ultimate responsive web design roundup

Responsive design testing tool

Links to blog posts on responsive design

Mashable – Why 2013 Is the Year of Responsive Web Design

Econsultancy have loads of blog posts on responsive design, here are my favourites:

10 brilliant examples of responsive design in ecommerce

11 gorgeous examples of responsive design

Are you responsive, mobile or app-based?

Or simply go to www.econsultancy.com and search for ‘responsive design’.