I've completely redesigned the site again and I'm calling this version Mooquackwooftweetmeow 6. I decided that the top of each entry's page was overwhelmed with a lot of stuff that needn't be there. Someone landing on an entry for the first time doesn't really care what the blog's title is—they just want to read the entry. Similarly, while the often-lengthy tagline—in prime position at the top of the page—used to be a bold statement of quirkiness, I began to find that it just looked silly—annoying, even.
What else was wrong with the old design?
One of the æsthetic ideas behind Arcturus (and thus Vega) was that the sections' backgrounds got gradually darker further down the page—essentially a poor man's subtle gradient down the sidebar. So the sections of the page were all positioned next to each other—connected together. With Canopus I changed to a one-column layout for the main body, to focus on the actual entries. This mostly broke the subtle gradient effect and left the front page with a significantly different layout to the entries' pages.
So the site's layout was a bit of a mess, really. The Mooquackwhatnotbot, my trusty website-building script, has always been a bit of a mess and it wanted tidying up as well. I finally found out how use XSL parameters in xalan (the program that the Mooquackwhatnotbot uses to produce all the site's pages)—I can now tell it to transform
bigbadxsltemplate.xsl, with the keyword cheese, which has simplified a lot. It means I can now use one template for every page on the site, and just pass in parameters telling xalan which page to produce.
I've rebuilt the entire site from scratch; the Mooquackwhatnotbot isn't entirely rewritten, but it is heavily modified. There are some things that I haven't added back in—nothing is still here just because it used to be. For example, there are a lot fewer dates flying about—I decided they were unnecessary and just added clutter. However, each entry still has a timestamp for when it was written and, if applicable, for when it was last altered (substantively—I don't count correcting spelling mistakes, for example). I haven't reincluded the content pulled from other sites (“Teleprose”) yet, but it will be back soon. The shameless promotion's gone, too; that might come back if I can find a decent way to do it. More likely, though, is that I'll just write entries pimping good stuff instead.
There are now archive pages for each year, month and day in which an entry was written. I'd always meant to do them, which was part of the reasoning behind the short-lived date-based entry URIs, but I hadn't worked out how to make the Whatnotbot do such tricks. The Recent Entries page was an attempt at doing something like that and so it, too, has vanished into the æther.
How did you come up with the new design?
For the new design—Spica—I disconnected everything. All the page's sections float in space, with a title floating nearby; a strong border separates and connects the title and its subject. With Spica I wanted to make much bolder use of colour than Canopus. The initial idea called for boldly-coloured borders; the real thing's also ended up with a deep background, contrasting with the light background behind the text.
A lot of TV programmes (particularly recent American dramas) have their title sequences at the end of the first part; I thought this might be a good idea to apply to the site. So I got rid of the site's title from the top of the page, and put the entry's title front-and-centre instead. This was the starting point for Spica. I've kept the links to other parts of the page at the top—they are actually useful: maybe you're trying to go a few entries forwards, so you just want the link to the next entry, and don't actually want to read this entry. The skip-links save lots of scrolling, and are pretty essential for keeping the site easy to use for everyone (especially keyboard-users).
At the bottom of every entry is essentially a replica of the front page—I'm embracing my bottom; been doing it since Canopus, and over at The Twaddle. Or rather: the front page is just an entry page minus the entry—a generic reception page. This was easy to do now that every page shares a single template. I did consider putting all the bottom-stuff on the archive pages as well, but it didn't seem right: no-one's expected to read to the bottom of an archive page, a list of other things to read.
What does the text look like?
One thing that wasn't broken in Canopus was the selection of fonts. Vega had used Georgia for titles and links, and a generic sans-serif font for the main text; Canopus changed that to Gentium for titles and links, and Franklin Gothic Book for the main text. Spica uses Gentium, URW Palladio L or Palatino Linotype (the first one that's available) for titles, and Franklin Gothic Book or DejaVu Sans Condensed for everything else.
The positioning of text in Canopus was a bit haphazard, though. Spica is largely composed to a vertical rhythm, although not entirely. The primary line-height is 2em but the page is laid out on a 1em grid, so there's kind of a syncopated, usually-2em–sometimes-1em rhythm. The 2em line-height leaves a generous gap between lines; there's a full line gap between paragraphs; and the line-length is limited to 49em—all of which should make the text thoroughly easy to read.
In-text headings are also set into 2em lines, which maintains the rhythm, but they have an extra blank line above them. This allows the headings to be big and clear without feeling cramped, and visually separates the heading from the preceding paragraph. The headings are all big enough that they don't need to be bold to stand out—serif fonts tend to look not-so-sexy when boldened.
Links are no longer set apart by being in the serif font: Gentium looks small compared to the sans-serif fonts at the same size (because its x-height is relatively small), so mixing the two together tended to look awkward. So links are now just shown in colour. It's a dark colour (actually the same one as the page's background) but it's sufficiently distinct from the grey body text without standing out too much. Unvisited links in the main text; links to unvisited entries; and links you're pointing at also receive an underline, or a border for images.
How about the Starburst and those other pictures?
The starburst background from Vega and Canopus has survived, but it's no longer semi-transparent; that was a throwback to Shades of Grey's almost-topographical presentation of the underlying HTML code. I decided early on that I didn't want a patterned background for the main text (as well as
no gradients, shadows or trendy stuff), so the starburst only appears in the page's background. The content is all contained in solidly-coloured boxes that float in front of it. The starburst gives the design a sense of layering and a real depth—it looks like there's a lot of space behind the front layer (and the front layer is floating in that space).
The starburst also appears behind the main title on the front page and on archive pages. The border underneath provides a strong visual base for the intricate shape to sit on, and directly connects the site's identity with the design's most striking motif. (If I could have written bollocks like that when I was 15 I'd've done much better in my Design Tech GCSE.) Some entry pages feature their own decorative shape behind the site's title, to give the page some identity of its own. Most of these decorations are made from photos that can be found amongst my Flickr pictures; the rest should be self-explanatory.
Six? Wasn't the last version 3.1? Where did 4 and 5 go?
I did call the last version “3.1”, but it was actually the fifth Mooquackwooftweetmeow. “Version 0” was a naff page of randomness at the now-recently-defunct Express Page, which I made when I was 14. It was actually called “MooQuackWoofTweetMeow”. It had background music, marquees, a guestbook and animated GIFs.
“Version 1”, the second version, was a pretty unmemorable page or two living at GeoCities. The content was less absurdly random than its predecessor, but no more worthful. There were no background music or marquees here, but I can't say with certainty that no GIFs were seen to animate. And there was a guestbook.
By now I'd completely forgotten about version 0, so I called the third version “version 2”, which is how the dodgy numbering came about. This version was the first one with any sort of thought behind it. The concept was that it was a 2-D site—the entire thing was on one page with each section occupying its own column. Being made with GeoCities's “WYSIWYG” page-building applet, it was a horribly-inaccessible stew of worst practices, made largely out of JPEG images. The content was mostly an exercise in exaggerated arrogance and verbosity, although I do still find the heading for the Some Things column funny. This one still exists online; I'd steer clear of the guestbook, though.
The fourth version—“version 3.0”—was a hand-coded, best-practices site with a weblog, that lived at FreeWebs. Most of its content survived into the fifth version—“version 3.1”—hence the .1 version number. Both versions are described a bit in the welcome entry I wrote for Mooquackwooftweetmeow 5. There's absolutely no chance of me throwing away everything on Mooquackwooftweetmeow, so either it's stuck at “version 3.x” forever, or I do away with the dodgy version numbers.
And so this is Mooquackwooftweetmeow 6.