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
[image src=”http://webdepend.co.uk/wp-content/uploads/2013/01/webdepend-1024-wide-1024×493.png” responsive=”true” lightbox=”true”]
[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
Links to blog posts on responsive design
Econsultancy have loads of blog posts on responsive design, here are my favourites:
Or simply go to www.econsultancy.com and search for ‘responsive design’.