Getting into the festive spirit with a responsive web design

At the beginning of December we launched a Christmas-themed website, inviting you to help decorate the University of Reading’s digital Christmas trees. A short festive diversion that I hope brings a moment of delight to your day.

Go on, I know you want to hang a bauble! This tale will keep a few minutes…

Back…? Then I will continue.

‘Twas a warm late-October, and all through the office, a calendar alert sounded, like the squeak of a mouse…

“Do something festive, creative.”

A few ideas briefly sparkled before melting away, like the first flakes of winter snow. Then one settled. Every year the Alumni Office here at Reading send a season’s greetings e-card to alumni. And every year a number of those alumni receiving the card email back to wish the University well. Why not make this process more interactive? Invite them to decorate a digital Christmas tree and leave a (public) message.

The plan was formed. Now to bring it to life.

For me this project was a great opportunity to pull together new technologies and techniques I’d been learning about on a live project. The small scale meant that it would be easy enough to revert to tried and tested methods should things not work out. Fortunately they did!

I will use the rest of this post to share some of the observations I made as I went through the process.

I would also like to give a nod to Ash – one of our talented designers – who produced some great visuals from my (very) rough wireframes and storyboards. And to my boss – Helen – who wrote all the PHP and JavaScript that makes the site function.

HTML5 & CSS3

Incorporating the HTML doctype was my starting point, and would enable me to forage for a few of the more simple HTML5 goodies.

Next I coded the structure of the site, making use of a number of new(ish) semantic elements, including <nav>, <header>, <section> and <footer>. So far, so linear. Simple, no? Not quite – the site also needed a link to Remy Sharp’s HTML5 shiv script to get IE6-8 to recognise the newer semantic elements that I included.

It does mean that users of IE6-8 do need JavaScript enabled to make sense of the site. I accept that for some, their experience of the site will be compromised by this decision.

Skipping to the end of the project I looked to make a number of small enhancements using various CSS3 properties. Rounded corners, drop shadows and some subtle animations when hovering over buttons and baubles. These aren’t vital to a user’s experience of the site, but add a touch of finesse for those using newer browsers.

What I did discover is that the CSS transition property doesn’t have any effect when switching an element from display:none; to display:block;… I guess that this is because there are no in-between states here! (Note: must investigate further.) As a result the pop-up of comments when hovering over a bauble is more sudden than I’d have liked.

Going responsive

My personal goal for the project was to create a site that is usable on as wide a range of devices (laptops, phones, tables…) as possible. I did this by making use of media queries, to apply a tweaked set of CSS rules depending on the width of the browser window. A number of break-points are defined in the stylesheet, and at each a new set of rules for presentation take over.

Much of the design is of a fixed width, and is simply re-organized for the new screen/browser-window size. At a few key points elements re-size, but it is not until we get really small that elements of the site truly scale. If we’re getting semantic, this is more adaptive design than responsive design.

Using media queries

Having seen a few web-luminaries talk about declaring their media queries using minimum widths (apply this rule to anything with a browser width larger than X pixels…), I also decided to take this approach. But I also started writing my CSS for the desktop sized design, and have ended up:

  1.  Declaring a bunch of CSS rules aimed at a screen of 1024px width
  2.  Using media queries to declare a bunch of CSS rules for anything over 320px, 480px, 600px etc
  3.  Using media queries to re-declare segments of the original bunch of CSS rules later, when certain browser window sizes are reached…

There’s a bit of code-bloat, but it’s a small project, so the impact is fairly minimal. I would definitely recommend working entirely from the ground up (mobile first), and I will be doing so in future.

Forms & touch screens

One area that took me by surprise was how well the functionality works on a touch screen phone. I had expected that the form elements – in particular the hit area for our radio buttons – would prove too small to be accurately selected, and that we’d have to remove the ability to hang a bauble for anyone on a mobile device. I am happy to have been wrong!

iPhone zoom

When playing with responsive layouts I had always been outfoxed by the iPhone’s tendency to auto-resize the content. I’ve found this to be beneficial on many occasions when browsing fixed width sites, but when using responsively designed site it is just frustrating. Helpfully this little nugget of code prevents this happening:

<meta content=”width=device-width, initial-scale=1″ name=”viewport”>

A word of (second-hand) advice – be careful about disabling the ability to zoom completely. Users of your site may still want to retain this level of control, particularly if they are viewing from a distance (a group around a table, say) or their eye-sight is poor.

Quietly ignoring the elephant in the room

Compatibility is always an issue when making use of new technology on the web, and media queries don’t work in versions 6-8 of Internet Explorer, unless given a JavaScript-shaped helping hand.

As time on the project was limited, I opted not to explore this. Instead I set a fixed width for IE6, and a minimum width for IE 7 & 8 – both of 720px. This was the minimum size at which the site still looks reasonable without the input from the media queries. A clever bit of margin:0 auto; and a repeating background image gives the illusion that the site fills the screen above this point. And IE 7 & 8, with their minimum width, does provide some layout fluidity.

It works on this project because the layout is fairly simple. On a more information-heavy site you would need to make a call between delivering a fixed-width site to IE or using JavaScript hacks to provide media query functionality.

If going down the fixed-width route, do keep in mind that some people run monitors with low resolutions (because the equipment is old, or for magnification), or may not have their browser window set to fill the screen.

Adaptive images

There is a lot of discussion at the moment about the best way to deliver images to a responsive layout. The central idea is simple enough: to provide images at a range of sizes, to suit the different ways in which the site might be viewed. The implementation on the other hand, is not – in fact, this years 24ways already includes two different methods.

I chose to keep things simple:

  • img {max-width:100%;}
  • And a few tweaks for IE.

The graphics on the site are relatively light-weight. To be honest the tree and baubles only scale down a very little when you reach the lower end of the responsive spectrum. I could also have looked at providing different versions of the background image, cropping bits out for smaller screens. Maybe next time.

Next time…

Speaking of next time… I’ve noted a few of the things that I would do differently in this post – particularly on a larger project. There’s more, but I won’t go into details today. I am pleased with this outcome, and hope that in helping decorate our trees, it raised a festive smile.