Colophon

Traditionally, a colophon is a segment at the end of a book, and gives you some useful guff on it’s production. It’s also used by self aggrandizing schmucks to blather on about how they built a website. Example 1:

Typography

The font used on this site is a combination of Verdana (a common sans-serif font provided by Microsoft) and Candara (a more ornate sans-serif font, recently released by Microsoft).

The header font should be shown Candara which, when bolded, is that little bit lighter and snazzy than Verdana (which can become quite chunky when bolded).

Design and Graphics

The site design is heavily based on a design I was originally working on for the Achernar Solutions website. Green has always been a popular colour of mine, so it made sense to shift the design to that in order to distinguish it from the more commercial site.

All of the design work was done in Inkscape which is an Open Source SVG (vector graphics) editor. Designs were made in SVG, and the individual bits exported as PNG as were required. Some images were later turned into JPEG format using GIMP

Site Development

The site itself is running in Radiant CMS which is a very sexy little CMS written in Ruby (and using Ruby on Rails heavily, from what I understand). The back end database uses SQLite3, so as to have as little impact upon the rest of the web-server as possible (rather than using a full MySQL database).

All of the old posts were imported across from the old blog storage (a single XML file) by a bit of Ruby and hPricot magic.

Firefox was used to enter content and test the site, with the always freaking awesome FireBug helping me find a way out of numerous alignment woes. Testing in IE6 was done via IE Tab .

Dilmah tea (litres at a time – I have awesome mugs) was also in heavy rotation during development.

Technical

The site is built using XHTML 1.1 and the visuals are defined by CSS.

There heavy uses of Microformats (especially hCard) to define people and organizations, and use of XFN (XHTML Friends Network) which is a lightweight way to define relationships in XHTML/HTML format.

A lot of this was inspired by Brad Fitzpatrick’s Thoughts on the Social Graph . I’m playing around with something similar for LifeBox, and need some test data!

Header Gradient

This bit gave me so much hassle, I’m going to give it a section all of it’s own!

The inspiration for the original Achernar Solutions design was the photos that you see of the upper atmosphere of Earth from space. Achernar being a star, this made sense.

However, duplicating the gradient was quite a hassle, for a few reasons. I worked on it early one morning, probably from about 2am until 5am before I was happy with the design – yes, that’s pretty much just the gradient!

Firstly, getting the wide spanning arch of the horizon was difficult – whilst flattening out a circle would be the simplest way, this resulted in radial gradients that were stretched, and out of proportion. As such, the design relies on a series of huge (8000px diameter) circles, shifted so as that only the top edge is visible.

Secondly, the gradient was difficult to produce. Because of the complex nature of the atmosphere, it’s not a simple colour to black gradient. This meant that I needed to pick out colours from an image (took a sample slice from an image from NASA, and had GIMP resample it to 6 or so colours), and construct the gradient from these colours in the right proportions.

Multi-stop radial gradient was not very good, so the final version actually uses a copy of the huge circle, each coloured with just one transition of the full gradient, and offset so as to line up.

The header on this blog isn’t quite as complex, but uses the same principle (but much fewer colours).