git ssb

title: "Six" date: 2007-05-06 06:11 modified: 2007-11-10 13:19 status: published description: > I've been tinkering with the site again.

tags: Moo­quack­woof­tweet­meow, redesign, Moo­quack­woof­tweet­meow 6

image: filename: decoration.png height: 12rem

<p>
I've completely redesigned the site again and I'm calling this version <dfn>Mooquackwooftweetmeow 6</dfn>. 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 <abbr title="weblog"><span title="I no longer refuse to abbreviate “weblog”">blog</span></abbr>'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 <em>quirkiness</em>, I began to find that it just looked silly—<em>annoying</em>, even. </p>
<h2 id="olddesign">What else was wrong with the old design?</h2>
<p>
One of the æsthetic ideas behind <a href="/welcome" title="One of the site's previous styles">Arcturus</a> (and thus <a href="/vega" title="A more colourful version of Arcturus">Vega</a>) 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 <span title="The previous style, an iteration of Vega 2">Canopus</span> I changed to a <em>one</em>-column layout for the main body, to focus on the actual <em>entries</em>. This mostly broke the subtle gradient effect and left the front page with a significantly different layout to the entries' pages. </p>
<p>
So the site's layout was a bit of a <em>mess</em>, really. The Mooquackwhatnotbot, my trusty website-building script, has <em>always</em> been a bit of a mess and <em>it</em> wanted tidying up as well. I finally found out how use <abbr class="caps" title="Extensible Stylesheet Language">XSL</abbr> parameters in <a href="http://xml.apache.org/xalan-c/">xalan</a> (the program that the Mooquackwhatnotbot uses to produce all the site's pages)—I <em>can</em> now tell it to <a href="/brandnewcms" title="...in which the Mooquackwhatnotbot is invented and dissected in painstaking detail">transform <code>mqwtm.xml</code> using <code>bigbadxsltemplate.xsl</code>, <em>with the keyword <var>cheese</var></em></a>, which has simplified a lot. It means I can now use one template for <em>every</em> page on the site, and just pass in parameters telling xalan <em>which</em> page to produce. </p>
<h2 id="whatschanged">What's changed?</h2>
<p>
I've rebuilt the entire site from scratch; the Mooquackwhatnotbot isn't <em>entirely</em> rewritten, but it <em>is</em> heavily modified. There are some things that I haven't added back in—nothing is <em>still</em> here just because it <em>used</em> 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 (<dfn>“Teleprose”</dfn>) 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 <em>entries</em> pimping good stuff instead. </p>
<p>
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 <a href="/nowslightlylesscool" title="...in which date-based URIs are discarded">the short-lived date-based entry <abbr class="caps" title="Uniform Resource Identifier">URI</abbr>s</a>, 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. </p>
<h2 id="newdesign">How did you come up with the new design?</h2>
<p>
For the new design—<dfn>Spica</dfn>—I disconnected everything. All the page's sections <em>float</em> 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 <em>background</em>, contrasting with the <em>light</em> background behind the text. </p>
<p>
A lot of <abbr class="caps">TV</abbr> programmes (particularly recent American dramas) have their title sequences at the <em>end</em> of the first part; I thought this might be a good idea to apply to the site. So I got rid of the <em>site</em>'s title from the top of the page, and put the <em>entry</em>'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 <em>are</em> 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 <em>this</em> entry. The skip-links save lots of scrolling, and are pretty essential for keeping the site easy to use for everyone (especially keyboard-users). </p>
<p>
At the bottom of every entry is essentially a replica of the front page—I'm <a href="http://powazek.com/2005/09/000540.html" title="...in which Derek Powazek rewards readers that actually read all the way to the bottom of the page">embracing my bottom</a>; been doing it since Canopus, <em>and</em> over at <a href="/thetwaddle" title="...in which I embrace The Twaddle's bottom">The Twaddle</a>. 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 <em>archive</em> 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 <em>other</em> things to read. </p>
<h2 id="text">What does the text look like?</h2>
<p>
One thing that <em>wasn't</em> 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 <a href="http://www.sil.org/~gaultney/gentium/">Gentium</a> 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 <a href="http://dejavu.sourceforge.net/">DejaVu Sans Condensed</a> for everything else. </p>
<p>
The <em>positioning</em> of text in Canopus <em>was</em> a bit haphazard, though. Spica is largely <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">composed to a vertical rhythm</a>, although not entirely. The primary line-height is 2<i title="Roughly the width of a letter “m”">em</i> 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. </p>
<p>
In-text headings are <em>also</em> 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. </p>
<p>
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 <em>too</em> 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. </p>
<h2 id="pictures">How about the Starburst and those other pictures?</h2>
<p>
The starburst background from Vega and Canopus has survived, but it's no longer semi-transparent; that was a throwback to <span title="The style from Mooquackwooftweetmeow version 3.0, before Arcturus">Shades of Grey</span>'s almost-<em>topographical</em> presentation of the underlying <abbr class="caps" title="Hypertext Markup Language">HTML</abbr> 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 <em>space</em> behind the front layer (and the front layer is floating in that space). </p>
<p>
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 <em>much</em> better in my Design Tech <abbr class="caps">GCSE</abbr>.) 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 <a href="http://www.flickr.com/photos/gregknicholson/">my Flickr pictures</a>; the rest <em>should</em> be self-explanatory. </p>
<h2 id="fourandfive">Six? Wasn't the last version 3.1? Where did 4 and 5 go?</h2>
<p>
I did call the last version “3.1”, but it was actually the fifth Mooquackwooftweetmeow. <dfn>“Version 0”</dfn> was a naff page of randomness at the now-recently-defunct <a href="http://www.expage.com">Express Page</a>, which I made when I was 14. It was actually called “MooQuackWoofTweetMeow”. It had background music, marquees, a guestbook and animated <abbr class="caps" title="Godawful Image Format">GIF</abbr>s. </p>
<p>
<dfn>“Version 1”</dfn>, 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 <abbr class="caps">GIF</abbr>s were seen to animate. And there <em>was</em> a guestbook. </p>
<p>
By now I'd completely forgotten about version 0, so I called the third version <dfn>“version 2”</dfn>, 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 “<acronym class="caps" title="What you see is what you get">WYSIWYG</acronym>” page-building applet, it was a horribly-inaccessible stew of worst practices, made largely out of <abbr class="caps" title="Joint Photographic Experts Group">JPEG</abbr> images. The content was mostly an exercise in exaggerated arrogance and verbosity, although I <em>do</em> still find the heading for the <i>Some Things</i> column funny<img src="/six/somethings.jpg" class="inset" alt="—it consists of a stereotypical 1950s man shown in profile, smoking a cigar and reading a newspaper; a dog eating from a bowl; a wooden table; a cup of tea on a saucer, with the teabag still brewing; a tree; and a brick">. <a href="http://www.geocities.com/mooquackwooftweetmeow/relic.html">This one still exists online</a>; I'd steer clear of the guestbook, though. </p>
<p>
The fourth version—<dfn>“version 3.0”</dfn>—was a hand-coded, best-practices site with a weblog, that lived at FreeWebs. Most of its content survived into the fifth version—<dfn>“version 3.1”</dfn>—hence the <i>.1</i> version number. Both versions are described a bit in <a href="/welcome">the welcome entry I wrote for Mooquackwooftweetmeow 5</a>. There's absolutely no chance of me throwing away everything on Mooquackwooftweetmeow, so either it's stuck at “version 3.<var>x</var>” forever, or I do away with the dodgy version numbers. </p>
<p>
And so this is Mooquackwooftweetmeow <em>6</em>. </p>