Responsive web design: a case study

Have you looked at your site recently using a mobile phone, tablet or netbook? Is it all a bit ugly, hard to read, or just completely broken?

If your site has been around for any length of time it was probably designed for a screen size of 1024×768 pixels, or even something a bit bigger. Maybe it looks 'OK' on a tablet, but squish it down to a 320×480 pixel screen used by many mobile devices and you probably can't read it that easily.

Now look at your site on a 27-inch widescreen monitor or one of those gigantic high definition televisions. Not so good eh?

To clarify: Yes, I sometimes view the web on a 47-inch LCD TV, don't you?

Becoming responsive

Responsive web design means building websites (and apps, etc) so that they respond to whatever device the user is viewing them on. It's not just a buzzword. It's a discipline, a new way of thinking about design; it also delivers the type of experience your site's users will be increasingly looking for.

Using responsive design goes some way to delivering a better experience for people with mobile phones and tablets. It's hard to get consistent stats about the state of the device market in New Zealand, and user behaviour will vary widely from site to site and between different segments of your user community. If you've got web analytics connected to your site, use that data to help you decide which sites or pages you have that need the most love, and what could wait for a while.

Three parts to creating a responsive design

It doesn't matter if you're starting with a brand-new site or adapting the design of an existing site, your design won't be 'responsive' unless it uses:

1. a flexible or fluid grid layout
2. CSS media queries
3. scalable images and multimedia.

Each of these topics will feature in later posts. Individually the concepts aren't difficult to master, but depending on the size and complexity of your site, some fine-tuning of your design will be needed. You may even discover that the templates used for creating content need some tweaks to make implementing the responsive features easier.

Case study – www.royalcommission.govt.nz

In order to illustrate some of the principles and techniques of responsive web design, I'll walk you through the Royal Commission site we built at the Department of Internal Affairs in 2011. This site isn't perfect. It's just an example.

What's special about the Royal Commission site? Well, the site is just a one-page website that enables users to find information about each Royal Commission that is currently underway in New Zealand, or recent Commissions that may still be of interest. Each Royal Commission is independent and all their content is published on separate unique websites. Because the website is effectively just a landing page, it was the perfect opportunity for us to try out a few responsive web design techniques.

The basic design grid

This is the basic site layout when viewed at a resolution of 1024px wide. Each part of the layout is segmented in its own 'block' and the most important content — the current inquiries — feature 'above the fold'. Take a look at the live site to see the grid in action.

Large-screen layout

This example shows what the site looks like on a 27-inch wide screen monitor. There's room for improvement. It's still completely usable, but there's a lot of wasted space. There's also enough content that users need to scroll to see anything other than the thumbnail links to the various Commission websites.

To make it better, you could bring the lower section of the page up beside the thumbnails as an aside and reformat the footer into a narrower self-contained box instead of a banner that went the full width of the screen.

[Note to self: That’s something I can work on!]

Tablet layout

This is the layout on a tablet. It has a maximum width of 768px. The basic design or layout hasn't really changed. Everything is just a bit more compact.

This site doesn't have any sidebars like a lot of websites have. If it did, at this size I'd probably have moved them in beneath the main content of the page.

This has implications for how you order blocks of content in your template, and you'll also need to work out the CSS rules required to move everything around. Avoid nesting content blocks inside each other if you can.

If you're not sure how to do this, there are templates available that can help you get started with the right structure. I'll list some of my favourites at the end of this post. These generally work better when you're starting on a new design, but take a look at the resources — they might just give you an idea of how to change your site's existing template to make responsive design work for your current design.

Mobile layout

The basic layout of the landing page adapted really well to the much narrower layout available on a mobile device.

In portrait mode there are only 320 pixels to play with, so the images had to be scaled down to fit.

We're displaying the same images to all users regardless of what device or screen size they are using. There's no elegant way currently available to change images easily and consistently, so each thumbnail has been compressed to make the file size as small as possible.

The basic CSS rules we used

Tablets in portrait mode

@media only screen and (max-width: 768px) { /* rules for iPad in portrait orientation */ }

Here we reset the widths of the some blocks to automatic, making them go full width according to the available space. We also adjusted the width of each of the images and dropped the font size of some of the heading levels back a bit, in some cases by as much as 10px smaller.

Download the css file to see the actual rules

Smart phones

@media screen and (max-device-width: 480px) { /* rules for smart phones in either portrait or landscape orientation */ }

This implemented a similar set of tweaks. We adjusted image sizes further, but we also added two additional rules:

• All blocks that had a float assigned were set back to float:none – this meant that all the layout blocks in the grid now stack one of top of each other and flow vertically
• The font size of the title in the header was cut in half – doing this the text still displayed correctly on the page, without dominating the available space the mobile device could display without scrolling

Download the css file to see the actual rules.

'Great idea, but do I have to?'

No, you don't have to do responsive web design, but very soon your users will start to expect it. And as an added bonus, it will help you comply with the NZ Government Web Standards.

This doesn't mean though that you have to pull apart your existing sites and redo the designs. Completely retrofitting an existing design might end up being a complicated and time-consuming task.

A partial retrofit is not ideal either, but it's a step in the right direction. You could try out some of the techniques, get a better understanding of how your overall design might need to change, and your users will definitely benefit.

Implementing media queries might be a good starting point. If you've got a new site or a redesign project coming up soon, now's the time to start planning.

More information

Suggested reading

• Responsive Web Design by Ethan Marcotte, 25 May 2010
• 50 fantastic tools for responsive web design by Denise Jacobs and Peter Gasston, 24 April 2012
• The case for responsive web content: it’s all about the users by Christiaan Lustig, 6 July 2012
• Bye, Bye Waterfall: 5 Steps to Implement Responsive Web Design by Travis Sheppard, 10 May 2012

Tools and templates for your toolkit

• Responsive Design Testing
• The 1140px CSS Grid System

In later posts I'll talk about some of the specific techniques you can use for things like scalable images and embedded video in content pages.

So tell me, have you been using responsive web design? What techniques have you used? Got any favourite tools in your web design toolkit?