This page holds a few screenshots of the older site designs, back from the day when this was called mac.against.org. The site uset to be three sites in one (Wiki, CVS and photo album), but all three sections followed the same design as much as possible.
Kubrick
I adopted Michael's Kubrick design in November 2004 and am so happy with it that it survived two or three platform and engine changes so far. There were many reasons for adopting it that deserve mentioning:
- The Clear Lake theme was getting too crowded - the sidebars looked like a sky-blue zebra, and no matter what the experts say, sidebars become useless with too much crammed into them.
- Page load and rendering times were starting to border on the atrocious. Even using gzip compression and a fair amount of caching optimization, the home page was not what I would call snappy, and one of the reasons was that there were something like sixteen different images being loaded on it.
- I was doing far too many plugin invocations on each page, which was making it hard to debug and optimize parts of the Wiki internals (this was one of the things I later eliminated altogether in "Yaki":Yaki)
- Text was cramped and not very readable, since I didn't use whitespace properly. My font choice was also not one of the best.
In short, the site needed a breath of fresh air and improved readability. I also needed to make navigation better - and I chose to do that by making it unobtrusive, and used Kubrick as the basis because:
- I've always liked rounded corners and whitespace. Kubrick makes very good use of both, and I didn't mind changing to a centered layout - when done properly, it works fine.
- I wanted a large, friendly showcase for my photos, and the large header area was just the ticket. Even though the photo album took a while to follow the main site design, It's been fun noticing how more and more Kubrick-based sites are also displaying random or themed header images.
- I wanted to cut down on image elements. Aside from the Kubrick layout, there are zero extra images on the page, which also helps focus attention on the page header.
- The Kubrick default fonts are a bit more readable. Michael never needed to display source code to the extent I do, so his CSS needed more work there, although I only really got it right after moving to Yaki.
- Cleaning up the layout templates triggered off a number of other internal optimizations - having a leaner display and less plugin invocations per page meant I could focus on optimizing specific pieces of internal Wiki code like SeeAlso and the database routines used by the Index.
Advantages, in a nutshell:
- Clearer, more readable layout
- Great photo showcase at the top
- Faster page load times
- Lower bandwidth consumption
Distinguishing Features and Caveats
- Years later, it still looks (on the surface) much like any other Kubrick-based site. There are, however, three main distinctions, some of which take a while to sink in:
- The site header - even if the concept becomes commonplace, the photos are unique, and I try to keep them so. I'm not too crazy about blatant ripoffs of my logo, though.
- The content - you either come here because you share my interests, or because of stuff like my HOWTOs and references.
- Navigation (Archives, Search, SeeAlso, Index, the Page Trail atop each page, etc.), which is where real distinction kicks in. The casual surfers and RSS addicts think this is a blog. The regular visitors know it for a Wiki on steroids, and take advantage of that fact to locate things quickly.
- The Kubrick CSS wasn't thought out for a Wiki. Especially not a Wiki with a couple of other things bolted on. As such, I have made an ungodly mess of it, and it's become tough to maintain.
Clear Lake
This was the previous theme, which focused on delivering enhanced readability and a clear distinction between content and navigation areas. The Flash site header (which downgraded to a random image) used around 70 different images at the time, and provided visitors with a mini-showcase of my photos (the last five of were also displayed as "teasers" in the sidebar with some JavaScript tricks).
Wiki:
Photos:
The photo album was considerably enhanced, and provided dimmed thumbnails of older photos for those occasions where you feet like clicking around randomly:
It was, however, a bit of a glutton as far as bandwidth was concerned.
Steroids
Steroids was an experiment in dark tones and heavy, accented headings, done over a particularly bad spot where I had some eye trouble. The most striking aspect of it was the photo album (shown below), which used a horizontal-scrolling photo browser.
Wiki:
Photos:
I eventually grew tired of the dark design and moved on to Clear Lake, but the photo browser I did for this theme is still one of my personal favorites:
Against
The first theme I did for PhpWiki, it still had a definite Wiki-ish look with lots of (admittedly subtle) inset borders and the original Mac OS X theme's pinstripe background. The photo section was very basic, and the code did not survive long.
