Er... so what exactly is a colophon?
Well, it is not a city in ancient Asia Minor. That's Colophon (now you're really confused, I can tell!). A colophon, on the other hand, is a section explaining the methods, typefaces, software and sheer blood sweat and tears used to make this site.
The term originates from the publishing industry and traditionally you would see such information on the same page as the copyright details. Book colophons often include the type of press and the typeface used, for example.
Okay, so what about this site then?
Glad you asked! This is actually the second version of the website, but the first to use standards-compliant coding. The previous version was getting old and rather tired in terms of design and technology. The frames-based layout was actually first conceived way back in 1998, so it was definitely long-overdue a re-vamp.
I'm now a firm believer in web-standards and the need to seperate style and content. I am doing my best to banish tables to history (except for displaying tabular data, of course!). I'll admit, however, that I've thrown a couple in here or there as a temporary measure (and only on a handful of pages) as I speed through the update. There are nearly 1,000 separate pages on e-Tracks and each has had to be recreated as part of this redesign. Don't worry though, when it is complete and the new design is fully launched, I'll be going through these pages and banishing those pesky layout tables for good, when I have a bit more tinkering time.
And there really, really are only a handful of them...
Which software do you use?
I actually hand-code the pages of the site, albeit that I use Macromedia Dreamweaver to do so - the programme's templates function allows me to keep everything in order and make future updates in one fell swoop.
For the site graphics I use a combination of Adobe Illustrator, Adobe Photoshop and Jasc's Paint Shop Pro (the now incredibly old version 5 of which I prefer. Although simple in terms of functions, it's great for quick editing, even though it cannot do as much as Photoshop). My tool of choice is Illustrator and I tend to use this to create general layouts and flesh them out with Photoshop/Paint Shop Pro. For the maps and other circuit graphics, I use Illustrator exclusively and this has really speeded up the process. When I first started compiling the site, I actually hand drew the maps, scanned them and then re-touched with Paint Shop Pro. It took hours...
The main text of the site is rendered in Arial, or if you are surfing the web with a Mac-flavoured device, Helvetica. Should you be among the 0.001% of the world's computer population to have neither of these ubiquitous fonts, you will see it in whatever sans-serif font you do have!
For no reason I can fathom now, the headlines are in Helvetica - or Arial if you have a Windows-flavoured machine. Second choice is Verdana, and third choice is any old sans-serif font. Must have been one of my 3am decisions to put Helvetica first in the list!
The exceptionally sharp-eyed among you will also have spotted that the nav-bar at the top of each page is styled in Verdana (or Arial/Helvetica/sans-serif). It's a much-maligned font in some quarters, but it does render nicely in bold and at small-ish sizes. If I could get away with it, I would have used Adobe's Myriad font for the navbar and headlines, but seeing as most users don't have it installed, I shied away from it. Pity.
I have created the vast majority of graphics on e-Tracks myself. This includes the 'shiney orb' and stylised 'e' logo in the header. The background photo is, should anybody be wondering, a shot from the wonderful Nürburgring Nordschleife. I take no credit for the photography, however; the image was captured at Steilstrecken-Kurve by Angus Davidson and is reproduced with permission from his website, which includes a very good photographic tour of the old 'Ring.
Fancy pants stuff
It's all relatively straightforward on e-Tracks but I have used Lokesh Dhakar's Lightbox JS script to render the zoomable images throughout the site. It really is damned-impressive and requires nothing but a bit of CSS, a JS file and 'rel' attribute on the anchor link. Marvellous!
If you've read all the way down to this part - well done. Have a round of applause. There are no medals though - this isn't the Olympics, you know...