Crossroads – a redesign at the intersection of three blogs.

It's still a work in progress (what isn't?), but now that the MtG blog is integrated I'll take a break and introduce this new site.

Purpose & Audience

As I mentioned before, the functional purpose of this redesign is to highlight the range of content on my site by pulling everything together into one page. With this design I can set the home page of the website as the home page in my browser, and have access to all my bookmarks (previously kept on a separate links page) while being reminded of where I haven't posted recently. So yes, my first audience is myself, the second my visitors (hey, at least I admit it). Artistically, the design is a bit of a reaction to the 37signalifying of the "2.0" web. This is not a web app. It does not need a clear and single purpose. It's the personal site of somebody that does a bunch of stuff on the web, so there's a whole lotta stuff to explore.

Typography & Contrast

Given that there is a whole bunch of crap all jammed into one page here, and that I planned to use image replaced headers as my primary form of decoration, I knew that the typography of the content would have to be really solid. So I busted out my copy of The Elements of Typographic Style by Robert Bringhurst and started taking notes.

2.1.1 Define the word spacing to suit the size and natural letterfit of the font.

"A typical value for the word spacing is a quarter of an em." but examining the defaults of most browser fonts I found them to be less than that. Then I took a fresh look at the letterfit in some well printed books and noticed greater word spacing. It makes sense when you think about it. It's the words, not the letters, that we get the meaning from, so it makes sense that letter-spacing would remain tight and word-spacing would be wider in more legible text. Think about what happens when you increase the letter-space; you get a nice artistic post-modern look, but the legibility is trashed.

3.1.1 Don't compose without a scale.

I started at the bottom, with my smallest copy text. Since I'm using sane css sizing the size is technically 1em, with a base of 69% (nice and small to fit the short measure down where there are 4 columns) but since the design work happened in photoshop it's easier to translate that to 11px at the default browser size. I then proceeded to scale up to 13px, and 15px. This had me using the largest size I've ever used for body copy, but it worked perfectly for the primary blog where the text spans most of the page, and I stuck with it for the inside pages. For the blog titles I scaled the font size up two steps, so that the 11px has 15px, the 13, 17, and the 15, 19px.

3.5.1 Change one parameter at a time.

This guideline is elaborated to say, don't make the text larger and bold if just one will do. The contents of my site is plenty loud enough (by virtue of sheer volume if nothing else) so the text doesn't need to scream for attention. This guideline is a good one, perhaps if the original browser developers had heard of it people might have used H1s and H2s back in the day.

4.1.2 Don't permit the titles to oppress the text.

This is one I worried about. With 3 blogs and 4 levels of headers I had to play nicely with the typography to let people get down to the real purpose of this whole thing, to read the content.

I've still got a bit of work to do, especially around the comments, and with the various list elements, but I'm reasonably satisfied with the typography overall.

Contrast is another place I decided to be conservative, at least when it came to the text. I actually busted out the Colour Contrast Analyser and painstakingly adjusted the text colors until they met the minimum guidelines.

The background colors that separate the three sections, however, are not so friendly, and I may consider increasing their contrast at some point so that they are distinguishable on your average CRT.

Wicked Worn meets Bulletproof Liquid

I've always seen the predominance of fixed-width designs as a limitation of the coder's skill, or a lack of give&take between designer and programmer. Max-width to control line length can be achieved through various means, people just go fixed width because they are lazy, or lack the ability to translate a layered and textured design into a webpage.

Dan's book Bulletproof Web Design goes a long way towards transferring some of the necessary skills and knowledge to the masses. Every web developer should read it, you will learn something. The concept that really clicked for me in reading the book was that of opposing floats. Sure, I'd seen code samples and little demos, but it was Dan's illustration of the concept that made it really click.

I'm a fan of things made by hand. Real things of wood and leather. I knew I wanted to do something along those lines for my new site, so I pulled up Cameron's That Wicked Worn Look Series and dug in. The key I found after reading all four: skip it. Just cheat and grab these brushes.

Ok, if you're not looking at a really bright monitor you might not be able to see the texture I'm talking about. But fear not, in the process of building this site I also made a fully coded prototype page that is higher contrast and brighter.

Now to the point… the wicked worn look works surprisingly well in a liquid layout. The patterns are so rough and pixilated that you can only see the seam where the background repeats as you resize the browser window, something which we web designers do all the time, but is not a part of everyday web surfing.

Combining Multiple Blogs

Blogger users may want to know how I combined the Main pages of three blogs into one page, while retaining separate template Item and Archive templates. Blogger help got the basic concept right in their How do I include multiple blogs in a single page? article, but they stopped short of the full picture. The basic idea is that you strip each blog down to the basics, the posts, and then include those blogs all into a single static page. Go read the blogger page, they explain that better than me.

The key part that they missed was that you still need Item and Archive pages to have their own templates. This is done by using blogger's Conditional Tags to hide the template from the main page. Here's a simple example:

<ItemPage>
   <html>
      <head>
         <title>blog title</title>
      </head>
      
      <body>
</ItemPage>
<ArchivePage>
   <html>
      <head>
         <title>blog title</title>
      </head>
      
      <body>
</ArchivePage>

<!-- blog goes here -->

<ItemPage>
      </body>
   </html>
</ItemPage>
<ArchivePage>
      </body>
   </html>
</ArchivePage>

Why the redundancy? As far as I can tell Conditional Tags don't like to be nested (learned that one the hard way). I wonder if there is an undocumented ItemOrArchivePage tag?

StatCounter, Keyword Activity

Finally, site stats to obsess over. I haven't moved from my bare-bones FTP account yet, so no Mint for me, but I would highly recommend StatCounter.com, the service I went with.

The bulk of the keywords coming into my site fit into the following four categories: Richard Brautigan, Magic: The Gathering, erotica, and front-end technical issues.

The Brautigan is not surprising, that is the content from the very first website that I ever made. It is the largest collection of his poetry on the web, and I'm just waiting for his estate to contact me to take it down.

There aren't any other active MtG sites centered around the PC game, so that's why those pages do well. The cards I discuss in that blog are at least 7 or 8 years old, so nobody's talked about them in a while.

The erotica is surprising. There are only three stories on the site: Rob, Pierced, and Late, and the web is just crammed full of dirty keyword phrases, so I'm not sure why Cybil's stories rank so well. But the phrases people search for are just so great, I've got to share them (along with the site's current ranking):

• Google #1 "underside of her breasts suck"
• Google #1 "she sucked his dick blog"
• Google #2 "short blonde haired clit"
• Google #2 "his tongue in her butt"
• Google #3 "spread her legs tied"
• Google #3 "how to tie a bondage knot" (that one's actually mine, not Cybil's)
• Yahoo #3 "the punk chick licked her lips"
• Google #5 "leather cock ring" (ummm, mine too)

Moving on, there are also a few appropriate front-end tech searches, I hope people found what they were looking for (as I'm sure they did above):

• Google #1 “replacing line breaks from textareas”
• Google #2 “IE overflow”

Spoken by Firelight

This is actually the only new feature that I added with the re-design. I've been thinking of doing something like it for years, long before podcasting came about. Now that Odeo has finally launched the "Create" side of their application I ordered a $20 mic and started it up. I'll be posting every Sunday.