Walking the responsive web design walk

Between the massive portions of food I wolfed down over Christmas I spent some time converting my site to a responsive web design, which I’ve pushed to the site today.

It took a little longer than I thought it might because I rewrote a lot of the CSS with Compass, which should make it easier to maintain in the future and I restyled the comments section to be a bit cleaner and readable.

There were a few backend changes as well. I’m deploying the theme via Git which makes it easy to roll back any changes that might break the site and push and track changes from multiple machines.

I’ve also abstracted out the clients section to a Custom Post Type so in the future I’ll be adding more information about client sites and hopefully getting some glowing testimonials as well.

Converting to a responsive design wasn’t too difficult as most of the site uses a one column design and the only complex layout was the portfolio page that previously used jQuery Masonry. The fluid options for it weren’t what I wanted so I dropped it and switched to a square grid design that resizes nicely instead.

Unfortunately this means quite a heavy penalty on my Google Page Speed test score, but that’s just a guide for development really and other pages that don’t have lots of responsive images still score highly – so I’m doing everything else right. Hopefully in the future the test won’t penalise resized images as responsive designs become more widespread.

Following this first foray into responsive design I’ve made a (sort of New Years) resolution to make all the sites I design in the future responsive. Obviously it’s much easier to build a responsive site from the start than trying to retrofit it into an existing design.

So here’s to a new year with a fresh design and new technology.