Skip to main content

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 1024x768 pixels, or even something a bit bigger. Maybe it looks “OK” on a tablet, but squish it down to a 320x480 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" 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 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

The homepage of the www.royalcommission.govt.nz website as displayed on a typical desktop.
Desktop-sized display

The homepage of the www.royalcommission.govt.nz website - the design grid used for layout is highlighted with different coloured boxes.
The design grid of the page

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

The homepage of the www.royalcommission.govt.nz website as displayed on a widescreen desktop.
Widescreen display

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

The homepage of the www.royalcommission.govt.nz website as displayed on a tablet device in portrait orientation.
Tablet format (portrait)

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 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 homepage of the www.royalcommission.govt.nz website as displayed on a smartphone device in portrait orientation.
Smartphone format (portrait)

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.

Disclaimer

  • We’ve used HTML 5 to mark up the Royal Commission page, and included some additional HTML markup to ensure the page was backwards compatible with some older browsers like Internet Explorer 6, 7, 8 (which can’t display HTML 5 markup correctly). You don’t need to use HTML 5 to achieve this affect, it will work just as well with other flavours of HTML.
  • We haven’t targeted specific device sizes like 320px (the rules under the 480px section are just inherited) and we’re not doing anything special for devices with high-resolution screens (yet). There are some additional attributes you can specify that will make style rules only apply to devices like iPhone 4 or the latest iPad, we will cover these in a later post.
  • The code we are using, both the HTML and the CSS could be better. The way we are resizing the images and the grid layout could also be more fluid and scale up to large size displays. It’s on our list of things to do, promise!

“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

Tools and Templates for Your Toolkit

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?

Post your comment

Comments

  1. Fraser 04/09/2012 8:37am (6 years ago)

    Neat post. Did you use a framework? We're halfway through some work using Skeleton, and have found it awesome to use so far.

  2. Nathan Wall 04/09/2012 11:32am (6 years ago)

    I decided for the Royal Commission site, since it was just a one-page website, that I could hand craft the code and get away with not using a framework. I did some research to see what common approaches there were for defining the right media query break-points, and like so many web design questions, there's more than 1 way to approach the solution. After identifying what content needed to be on the page, and doing a rough wireframe sketch, I just built the grid to suit what we needed.

    I had looked at some frameworks for other projects, Skeleton was one I've looked at recently, but haven't actually built anything with it yet. You say it's 'awesome' - in what way? Flexibility? Cutting down build time? Cross device support? I'd be keen to know too if you've found any limitations with it.

  3. Paul Stone 13/09/2012 5:13pm (6 years ago)

    Very helpful!

  4. Luke Pilkinton-Ching 25/10/2012 2:40pm (6 years ago)

    Fantastic to see that NZ Govt are starting to think down the RWD line. Interesting that <a href="http://www.computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile" rel="nofollow">Obama has ordered all US Federal sites to start making their core services mobile friendly</a>.

    Luke

RSS feed for comments on this page | RSS feed for all comments