Responsive Web Design

For months now I’ve been searching for a new theme for my blog. I wanted something simple yet stylish, with great typography, that used textures and colour well, and I quite fancied a retro Americana feel. Above all I really wanted it to be a responsive design.

I’d just about given up looking, and was moaning about it on Twitter, which prompted my friend Prisca Schmarsow to generously offer to work with me to create a bespoke theme for my blog. As we talked through some ideas I stumbled across the Liquorice WordPress theme; a theme which, whilst not perfect, seemed to tick many of the new theme boxes. I decided to see what I could do with Liquorice.

An evening hacking Liquorice around had it pretty much where I wanted it.

It’s a shame that Prisca and I won’t get to work together on a blog theme as we shared some nice ideas I feel, but I hope that when time allows maybe we will.

Within a few days my new theme had been commented on by a good friend who thought it was “more me”, and by my wife who, seeing it over my shoulder, spontaneously said how much she liked it without being asked by her needy husband.

But there was one vital ingredient missing: it wasn’t responsive.

Many of you are probably wondering what all this responsive malarkey is all about, and I can’t blame you as it represents the latest in web design thinking. In simple terms a responsive website is one that responds to the size of screen upon which it is being viewed; changing layout and dimensions to best suit that screen. Responsive design is supported by all modern desktop and smartphone browsers which makes it possible to easily create versions of a site tailored to the smaller screens of iPhones and iPads for example.

Responsive design is new to me, and I thought it was going to be a complicated exercise to retro-fit it to my new blog design. Luckily Liquorice is well coded, and even more luckily a good friend of mine Richard Wiggins of Pixel Creation offered to make my site responsive, and at the same time help me learn how a responsive design is created.

It was a fascinating, illuminating, and fun session; I was surprised by just how little code was required to transform this site. Richard did a superb job.

I’ve known and worked with Richard for over 10 years. He worked at the agency I employed to create the Psion Dacom website whilst I was New Media Manager there. He then left to create his own web design studio Pixel Creation. Richard is a very talented designer and one that is quickly able to transform what I’m thinking of into pixels. I’ve worked with some of the biggest agencies in the world and I choose to work with Richard whenever I can. I can’t recommend him highly enough.

See It In Action…

If you’re reading this on an iPad rotate it to see the site respond to the portrait and landscape views.

If you are on a desktop or laptop make the browser window smaller to see the site respond.

If you are reading this in IE8 or lower I’m sorry. I decided against the hacks required to make it work perfectly in your browsers although it works well in IE8. I highly recommend you move to a modern browser such as Google Chrome or Safari.

Lastly if you are reading this in a RSS reader get your arse over here now to see my new blog design.