How it was done

This website was developed on a Macintosh Pro (starting on Tiger, then switching to Snow Leopard–Mavericks–High Sierra) initially using Aptana Studio v1.2, but eventually moving over to editing the html text directly in TextWrangler or TextEdit, enjoying the immediate feedback of saving the text and refreshing the browser view. After reading through several books and looking carefully at websites which I found attractive and useful, I decided to stick with HTML 4.01 and CSS 2.1, adding and modifying as I learned more. Of particular help for CSS was the website (and books) of Eric Meyer. And of course the generosity of dozens of people all over the web who share their code and ideas – the saving grace of the mess that is the internet.

By and large I am pleased with the results as a site. (I leave it up to you to decide about the pleasing-ness of the contents.) For a simple site like this one, it seemed a waste of space to use vertical menus and a mostly-empty navigation column, so a horizontal menu seemed logical. Most of the colours are ‘web-safe’ (may as well use them). The PDF files (if any remain) were created by Adobe InDesign (CS 5.5 and 6). Photos were edited in Photoshop, and the HTML and CSS for the entire site was validated using the w3c website and Total Validator by Andy Halford (www.totalvalidator.com). Links were checked with Integrity (peacockmedia.software).

There are several places in the design where the rendering differences between Firefox and Safari were irritatingly noticeable, and I have sometimes sacrificed what I preferred to see in Firefox for something which looks more acceptable in the increasingly-bad Safari, which seems often to be rather more crude in its rendering.

The site was tested almost exclusively on my Mac, with a quick review using IE v8 on Windows XP Pro under Bootcamp, and even less of a checkup under Windows 7 and 10 with IE and Firefox, running under Fusion 10. Please note that I have not used any hacks to make the site work under the dreaded IE 5 or 6. If you are still using such unsafe browsers, you are being very silly. It looks much better on a Mac; if it looks incredibly bad in Windows, without anti-aliased fonts, make sure that you have turned on ClearType.

There are major differences in rendering between Mac and Windows XP, beyond my ability to fix. One frustrating one is that, in Windows, the browser’s rendering of fonts is messed up (they come out quite a bit larger, which destroys line endings). In spite of trying all sorts of remedies one can find on the web, such as using various percentages for body font-size, I just cannot get it to match the Mac.

Because I originally designed on 1024×768 (0.377 mm dot pitch on my 19-inch LaCie CRT), using a font-size of 13px, it was a bit of a shock when I eventually viewed it on a 1920×1080 iMac with much smaller pixels (0.248 mm dot pitch, only two-thirds my pixel size). Web statistics seem to suggest that 1024×768 is fading away quickly, and represents perhaps 20% or less of web users, with higher resolutions making up most of the remainder. With that in mind, I completely re-thought the layout, and ended up styling it for the default font-size of all standard browsers (even Internet Explorer!): 16px. This results in ridiculously large text if you are using 1024×768 (although very nice for aging eyes like mine), but for many people on wide-screen high-res monitors, the text may still seem unusably small. Since I have used em- and percent-sizing throughout, you can use your browser’s zoom function to enlarge/reduce as you wish, and the design will stay largely intact. The photos will get wonky rather quickly if you are enlarging – you should set your browser to zoom text only.

Why the name?

I am a fan of the late Douglas Adams, creator of The Hitchhiker’s Guide to the Galaxy. Whether radio, telly or film, these are wonderful examples of writing which is funny, intellectual and exciting, all at the same time. If you are not familiar with Hitchhiker, the name of this site has something to do with a bowl of petunias. Read the books to find out!

TOP