If your humble correspondent turns his head to the left and looks at the bottom two shelves, the ones filled with technical texts, he will see that a great proportion of them are from the house of O'Reilly. a printer checking a page If you've not had the pleasure of reading any of these texts, or never ventured past the preface, you would not know that they always contain a colophon.

Normally a colophon will talk about the typefaces the book was set in, the weight of the paper, the names of the editor, proofreader and typesetter, and so on. Of course, most of that is completely irrelevant for Web purposes. I have no idea what typeface or font size you may be using, or even what sort of device or media you are using as a vehicle for reading this from. I can, however, talk about the tools and techniques used, and talk a little about the rational behind the design.

Almost all of the HTML and CSS was originally written, by hand, using TextWrangler, BBEdit Lite or SubEthaEdit for Mac OS X on a 867 MHz G4 “Quicksilver” Power Macintosh running Mac OS X. More recently development moved to a late model iMac, and I've just adopted Coda.

All of the images have been manipulated in one fashion or another by Adobe Photoshop Elements, or Photoshop, and some have also been exposed to the rather amazing Graphic Converter by Thorsten Lemke. Scanning was done using a HP ScanJet 5370c. The site was tested using Safari, various Mozilla derivatives, Firefox, Opera version 5 and various versions of Internet Explorer. The main browser used for testing and development is Safari.

The older blog component of the site was powered by MovableType, using the MT-Textile and SmartyPants plugins. It was published to the .Mac servers by writing to the local drive, which is periodically synched to /Volumes/iDisk/Sites/blog using /usr/bin/psync. MovableType sits on top of MySql 4.0.13, which I interact with occasionally via CocoaMySql and is delivered through the default OS X installation of Apache.

Most of the monochrome images are taken from the Dover publication 3,800 Early Advertising Cuts — Deberny Type Foundry. The typeface I suggest you use is Georgia. It is fairly commonly available on Macintoshes and Windows systems, and is worth obtaining and using if you do not already have it. It is a slightly old-fashioned serif face which remains quite readable on the screen even at smaller sizes and forms pleasing headlines at larger sizes.

Several books played a major part in the design and construction. David Siegel’s Creating Killer Web Sites, and Linda Weinman and Bruce Heavin’s Coloring Web Graphics.2 have a lot of important things to say about interface and design. a stack of books Start with a Scan by Janet Ashford and John Odam not only shows you how to get the best out of a scanner, it’s a wonderfully inventive guide to turning images into art.

The decision to agressively pursue compliance with web standards through the use of strict XHTML 1.0 and CSS is directly inspired by the modern school of web design pioneered and championed by sites such as A List Apart, BlueRobot and Agitprop. In particular, some basic stylesheets came from the noodle incident, with a lot of input via

Finally, and far from least, the HTML 4.01 and XHTML 1.0 recommendations and the CSS2 specification were essential reading, even if they are mind-numbingly dull to read. There is no excuse for any web designer not to read both of these, if only to discover how badly broken most browsers and HTML editors are.

I could bore you with a long list of suggested reading, but the references in the back of the HTML and CSS specifications form such a list, and there are many articles and references at the sites I’ve mentioned above. I’ll only mention two particular articles that were strong influences: How to write a better Weblog by Denis A. Mahoney and To Hell With Bad Browsers by Zeldman.

This site will work and look better in a browser that correctly supports web standards but it is accessible to any browser or internet device. The author takes no responsibility for offending your ascetic sensibilities because of the resulting bland appearance.


Legal XHTML Legal CSS FOAF badge
Amazon badge Apple badge blog badge creative commons
coffee badge Dogcow Badge GeoUrl Badge  



Return to top