Site redesign

Reading time: 2 mins

Regular readers (hi Mum), may notice that things are looking a bit different around here. After a long, drawn out process, I have finally put up the latest incarnation of my site.

Those of you visiting on a mobile or tablet device will likely notice the most difference, as I’ve gone responsive. Responsive design is something that I really believe in, and it was important to me to start making some changes to reflect that.

There are still a few bugs to iron out, a few changes to make, and things I want to tidy up, but I wanted to get the site out there and make changes as I go along. If you notice anything and want to send me a useful error report please get in touch.

I started redesigning the site midway through 2011, which, for me, is the most difficult part. I’m not a designer by nature, but learning and challenging myself to work at something is one of the reasons that I started a personal site in the first place. As such I went through a few iterations in Photoshop and eventually got to the stage where I started building and prototyping in the browser. After the basic structure was done I didn’t feel the colour scheme was what I was after, and I therefore needed to change a lot of the core CSS. I’d been looking into Less and Sass for a while but had never implemented CSS pre-processing into a proper individual project, and this seemed like as good a time as any considering the changes I’d be making anyway. I also amended my basic prototype to be responsive, however at the time I set my breakpoints to start from the full site downwards, which is something that I’ll be looking to amend. I re-wrote a lot of my content, including removing some elements that I’d originally planned to include as I realised I was including things for the sake of technology rather than on the basis of importance. An example was some content I was struggling with images for, which I wanted to put in a carousel that responded to touch gestures. I realised that my struggle to match meaningful images was tied to the fact that the information wasn’t actually important, and wasn’t conveying anything extra. Once everything had been stripped right back it felt a lot more effective. The final site was built using HTML5, CSS3, jQuery, ColdFusion 9, Sass, Photoshop and Git.