2009 Colophon

A colophon is an inscription placed at the end of a book or manuscript containing facts about its production. This 2009 Colophon page is an archive for the first edition http://dan.greening.org site, and doesn’t reflect current production. See Colophon for that.

Viewed with a CSS2 compliant browser, this site has a fixed navigation bar on the left. You can see it in action: scroll down and watch the left navigation column. Modern browsers leave it always visible, helping you move from page-to-page from wherever you scrolled. Because Microsoft Internet Explorer 6 does not implement “fixed positioning,” it scrolls the nav bar off the screen. I used a stylesheet trick to make IE consider the nav bar “absolute” while more advanced browsers consider it “fixed”.

CSS2-compliant browsers will show the first paragraph of each page without indent. I implemented this with another CSS2 feature, pseudo-class :first-child. Again, IE6 users will not see this. Indented paragraphs might seem “old school,” but I think it makes reading easier.

I chose a highly readable font scheme. Navigation aids—nav bar, title, header lines—are rendered in a bold sans serif font, usually Arial. Body text is rendered in Georgia, a font designed for screen pixels. Georgia’s dropped numerals lend interest to the text and serifs improve fatigue-free readability at small point sizes.

You may not see Georgia correctly rendered. In the string “96”, the 9 should drop below the 6. If not, your text is likely rendered in Times New Roman. Try downloading and installing Georgia from here, extract the 4 TrueType files into a temporary directory, then drag them to the Fonts control panel. Why does it work automatically in IE? Because I instrumented this site to download Georgia if not already on your computer. That behavior is standard in CSS2, but only IE supports it. Beta versions of Firefox, Safari and others may support downloadable fonts. It has been a long time coming.

I originally designed this site for screens with 800×600 pixels or more. Today, browser statistics indicate that 1024×768 is a reasonable design resolution. I’m not going to redesign the site: wide text columns are hard to read.

The site is designed for low-bandwidth and fast rendering. My Mom—I kid you not—still uses dial-up in 2009. This page’s source file contains no format information, which consumes bandwidth. Instead, it links to shared stylesheet and font files. <p> tags inside the <div.body> block get rendered in Georgia, with the spacing you see here. <p> tags inside the <div.nav> block get rendered in Arial, with no inter-paragraph space. This reduces bandwidth requirements, because your browser downloads the stylesheet only once for all the pages on this site.

Modern browsers should display the title and body text rapidly and before the navigation bar, rather than waiting for the whole page to load (I wouldn’t dream of making Mom wait). That is because this site uses <div> tags with absolute positioning to separate major page components, rather than <table> tags.

The Contact page refers to a vCard that can be downloaded directly into most contact managers. That vCard required some configuration of MIME types on most web servers, which at least partly explains why more people don’t put vCards on their web sites. Alas.

This site was originally developed with Dreamweaver MX, a professional web design tool produced by my former employer, Macromedia. Fonts were encoded using Microsoft WEFT. The site uses the XHTML 1.0 Transitional language, making it XML compliant. I now edit using Eclipse’s XML editing mode.

Hosting for this site has evolved with the internet market. This site was originally hosted on a server at home, which required a high-speed connection and a fixed IP number. I then moved it to an inexpensive Java hosting site, 4java.ca. Now it runs on the Google App Engine, which hosts lightweight Java and Python web applications, free. Greetings from The Cloud!

Dan Greening