April last year I was quite naive and announced how proud I was of the new design I created for Diago.co.za. The site was also moved to a VPS hosting solution in October. However more recently I was updating one of my older posts, and realised that during the re-design I omitted some important tags from the new style sheet, and that the code snippet plug-in I was using at the time was creating a massive amount of font tags inside posts, making it extremely hard to update posts. It was therefore time to have a look at tweaking the original design a bit more.

Diago New Layout

I can’t say I had something in mind when I started looking at enhancing the site layout. However I did know I really like the current header and sidebar and the content area needed a few improvements. I played around with a few more shades of blue, however realised that it defeated the object of the exercise, since the current blue shade was a bit too much already. Searching around on the web the gray offset to the white appealed to me and I played around with it for a bit, which resulted in the new layout. I can’t really describe any technical process behind all of this, as it really involves changing things until they look right. The revamp took about 4 hours to complete and the result was well worth the effort.

Apart from the style changes made to the layout, which now focuses more on the content and text, the Google Ads that haven’t been working on the home page was also fixed, and styled to fit into the site design. The SubText skinning model is quite powerful, and I was also able to add the following new features to the site:

  • Implemented SyntaxHighlighter 2.0 to provide code syntax highlighting with the ability to copy & past or print code.
  • Implemented jQuery 1.4.1 to provide Ajax functionality and implement some new plug-ins.
  • Implemented jQuery LightBox to replace the previous implementation of LightBox used for the image gallery and posts.

I also made use of the jQuery Flair randomizer that Robert MacLean blogged about a while ago to provide a more streamlined list of flair icons on the sidebar of the home page. The sidebar still collapses when reading posts however, ensuring that the focus is on the purpose of the site, it’s content. All of these changes should hopefully make visits to the site a more pleasing experience.