: Gallery of the site’s development

The original version of the site, dating back to July 2000 (it lasted to early 2001, as you can tell from the screenshot above), made use of a black background with a background image of intersecting ellipses which served to demarcate the site navigation from the content, as seen in this screenshot from the Reviews section. As you can, the content itself was presented, to some browsers, anyway (at that time basically early Mozilla builds, Netscape 6 and MSIE) in an iframe element. Links to other articles in the same section (to the left of the content) used JavaScript to target the iframe. Links to other sections of the site were above the content. Each section had a different image in the circle at top left of the page.

Note the drop cap in the first paragraph of the content — in this version of the site, and in the 2001 version, this was achieved by using graphics of letters. Since 2001, it’s always been handled with CSS.

Users of browsers which didn’t support iframe got the content in a similar layout, only in the same page as the navigation — which was certainly more user-friendly, although in a longish page it meant the navigation scrolled away. The look of the site was rather nice, but the reliance on a frame and JavaScript was very bad. The same design could be implemented in a much better way today, using CSS positioning on a div with overflow set to auto. Such are the advantages of a browser market where the vast majority of users have a browser with at worst moderate CSS support. At that time, though, that could not be relied on at all, and users of browsers which could not handle CSS and JavaScript at all well got a separate set of pages with a simpler layout:
 

Come 2001, I decided to update the site, dump the ellipses, and give it a 2001-themed look, with the section images seen in HAL’s eye at the top left of the page, the links to other sections presented in the style of the computer screens from the film, and the links within each section in boxes at the side. The section links had rollovers, the site used a lot of JavaScript (bad, bad, bad…) but the iframe had been dumped. A number of the pages made use of CSS-positioned divs whose display property was manipulated by JavaScript. To reduce work, only new pages and the home page as well as pages like the contact and forum (an experiment I was not very impressed with) pages were given this look; older articles kept their original appearance.

The big downside to this version, apart from all that JavaScript, was that there continued to be two versions of the site, one for Internet Explorer 4+ and Netscape 6/Mozilla, and one for Netscape 4 and other less sophisticated browsers (the older browser version was unchanged). The idea for this look was that it would stay in place for 2001, during which I would switch older articles to it, too, and then it would probably be replaced for the beginning of 2002. Probably; I liked the look, so I might have kept it for a while.

It didn’t work out like that. Not long into 2001, a friend fell seriously ill and died in the summer. For some months, I wasn’t much interested in doing anything with the site. When I did come back to it, I was no longer in the playful mood in which I had conceived the 2001 look and I set about changing the site’s whole look and structure.

Coming to the site in mid-2001, I decided to trash most of the JavaScript, get rid of the duplication of the sites and use CSS targetted at different browsers using the techniques discussed in the article on Hiding CSS From Old Browsers. Tired of the basic look — which had remained constant, with images top left in a circle, links to sections along the top and local links at the left — I completely changed the look of the site.

For the home page, I took a photograph under the Kingston Bridge at Anderston and used it as the basis for the image which occupied most of the page. The slight texture of the background of the light areas of the picture was extended to the area to the left of the picture, so that there would be a smooth appearance at any resolution.

What isn’t obvious is that there is an iframe in there: that’s what is containing the ”Last Update…” text (at left, below the logo). Clicking on the “What’s New” link beneath the picture would load a menu of the newest articles in the iframe. I would not have used an iframe anywhere else in the site, but this instance did not significantly impact on the site’s usability and saved time in updates since the file used to provide the “What’s New” content was the same one accessed from the “What’s New at DC’s Page” tab in Mozilla/Netscape 6 (should anyone have installed that).

The internal pages of the site changed to a basic style which has been kept constant since then: main page navigation at the right, content in the middle (more or less) with margins of white space for improved legibility, and some section-specific design at the left. It took the actual look a bit longer to settle down.

At first I had a pale blue background with a green design of lines and circles at the left, a sort of “molecular” look, with the name of the section laid on its side and overlaid on the design, which can be glimpsed in this image from one of the book reviews.

It didn’t take me long to decide that I didn’t like that look at all, so I quickly modified it (as the site was making extensive use of CSS now, it did not take long at all) to the look in the next image, which lasted well into 2002 with one or two modifications. For users of browsers with good CSS support, the navigation menu was now fixed in place when the page scrolled. September 12th 2001 saw the first entry in the site’s weblog.

By 2002 I was tiring of the home page’s look. I still liked the image, but not the humungous way it was presented, and the remnants of the old site’s black background there were a bit tedious. So I went for a much cleaner look, shrinking the image and using CSS to put the block with navigation, news about site updates, and the image smack in the middle of the screen. The site’s internal pages were pretty much unchanged, only the logo being tweaked to fit with the one on the home page.

The great advantage of the changes in the browser market which had allowed me to make full use of CSS and separate presentation from content meant that it was very easy to provide a seasonal home page for Hallowe’en. (I was quite pleased with the carving I did on that pumpkin — quite malign looking, don’t you think?)

It was similarly easy to change the look of the page when the approach of the Iraq invasion led to these chilling posters appearing all over the place, exhorting people to demonstrate on the day war started. This photograph, of a junction box near where I lived with the partially torn poster with the ominous words “When War Starts”, was too good to miss. Posterised, it made a very striking image. At about this time I set about sprucing up the internal pages, giving most of the site an appearance very like the one that is still in use. When complete, it looked as illustrated here.

Within tthe site, the different sections were now colour-coded, the main navigation was in a menu with a graded, metallic-look background, and a similar gradation was used for the title strip at the top. The colour-coded pattern to the left was based, although that is not obvious, on the old “molecular” pattern. As well as the nav bar, in standards-compliant browsers the title strip was fixed in place, so all the main navigation was always available to the user.

As the upgrade for the site progressed, I wanted to move the home page to a different look I had had in mind for a while, with a large strip containing the “cover pic” as well as prominent links to the newest articles, and the main section links (still marked up in lists) arranged horizontally above and below it. I was spurred towards doing this sooner rather than later by coming across the Leonard Woolf quote which seemed very appropriate for the times. The same photograph was used and modified again, as the posterised version would not have suited this layout. The formatting of the text for the quote was wholly handled by CSS.

When the site upgrade had been completed, every page had been modified to a greater or lesser extent, and all of it had been done on a Linux system using Linux software. (Incidentally, at different times this site has been built on MacOS, Windows 95/98, and Linux platforms.)

Keeping the rest of the home page look the same, I replaced the “When War Starts” photograph with an image of Tux. The plan had been to adjust background colours and so on when the picture changed, but I was pushed for time and just switched the picture — which, again, simply involved editing the CSS. The idea was that the picture would regularly change, with either an image I had wholly created or a photograph (probably modified by me, too) — most likely, a photograph of Scotland's urban landscape, along with modifications to the background colours to best show off the image.

Being short of time proved to be a continuing problem, however. In July 2004 I decided it was time to stop trying to keep the site regularly updated, so I posted a final entry to the Weblog on Bastille Day, and a page called “Signing Off” explaining this at a bit more length.

I was feeling quite philosophical at the time, so I decided to use a Zen quote along with (for the first time) an image of rural Scotland — Glenrosa Water on Arran. This image seemed to work better with a clean, white background. The Zen quote says, Sitting quietly, doing nothing / Spring comes, and the grass grows by itself. That encapsulated a great deal of what I thought and felt at the time. As of 2005, that remains the home page.

The interior of the site was thoroughly upgraded, though, in 2005. The few visible changes are that the “metallic” box for the nav bar has gone: the main navigation is now presented simply on the coloured strip to the right of the content; in good browsers, a double arrow now indicates the current section in the main navigation; the title strip has gone, with the logo remaining at the top left and the section title now at the top right; and the content now extends the full available height of the browser window.

Basically, I have fixed the bits I felt weren’t really working. Behind the scenes, almost all the JavaScript has gone, the markup has been thoroughly cleaned up (it wasn’t that bad before, but there were some errors) and the CSS rationalised; CSS support for Netscape 4 was removed. Once that had been done, I set about inserting one or two notes to update some articles. The only section of the site unaffected by the upgrade is the Weblog.

Although the site isn’t regularly updated now, I did produce a new picture of a pumpkin lantern for Samhuinn 2005. Incidentally, the innards made delicious pumpkin soup. Mmmm… To hammer the point home which I have already made several times, the use of CSS meant that it was a matter of less than half an hour to update the site, and that includes the time it took to set up and take the photograph.