Goodbye 2012

I wanted to do a round-up of things I’ve written in 2012, but quite pathetically that would give me a list of three, so I’ll add to that what I’ve been working on this year.

Post: Autoplay is still bad for all users

This post and Autoplay is bad for all users are the posts I’m most proud of. I wrote these after having to build a case against autoplay at my work place and managed to settle on some middle ground. The first was written in 2009 but it is still relevant today.

Apple aren’t the only company to make the decision to disable automatic playing of video, as far as I can tell, all of the most modern mobile devices ignore the autoplay attribute which can only be a step in the right direction for accessibility.

View Autoplay is still bad for all users

HTML Colour Name Game

This was a hackday project at Forward in April. I really liked the fact that there are so many HTML colour names and that most of them are not exactly intuitive. The aim of the game is to match as many colour names with their colour before you lose your three lives. You can then tweet the result to challenge your friends.

HTML Colour Name Game

Responsive web design

I’ve implemented RWD on a commercial site, taking advantage of the huge increase in non-desktop device visits. You can see the results at and uSwitch Gas & Electricity.

It’s not 100% perfect – and don’t expect pointless animated transitions – I’ve made them to be usable rather than satisfy the developer community!

uSwitch desktop and mobile version

Post: My responsive web design technique

This post was written after I’d had some experience in developing responsively on the sites mentioned above and wanted to show that it wasn’t a difficult concept and is relatively easy to implement.

Responsive web development is a relatively new technique and one that I’ve been implementing for the last 9 months or so professionally. Many articles have been written about how you should create a responsive site and wanted to get mine out there too.

View My responsive web design technique

uSwitch Style Guide

Borrowing heavily from the Twitter Bootstrap, I restyled and tidied up our internal style guide. It started life as a way for developers to get up and running with new projects, when we only had one front-end developer. Now it serves as baseline style for our default elements as well as a guide for site-wide consistency.

JSON Formatter

I wrote a very quick Javascript method called JSONFormatter that takes JSON and renders it into an HTML list. It’s very hacky and doesn’t work for all permutations – feel free to fork and fix it up!

View on GitHub

Post: Same page references, or named anchors

I wrote this post for developers just starting out or content writers who edit HTML as I’ve frequently come across the old style of referencing named anchors and it can be so much easier!

Named anchors have been around since HTML was created and allowed you to link to a different part of a page. They can be referenced by external page by using a hash then the identifier after the URL.

View Same page references, or named anchors

uSwitch Easter Egg

Designer Rachel and I decided to have a little fun during a Friday afternoon and came up with an Easter Egg for the uswitch Gas & Electricity home page.

Click on the light switch.