Change

With the new year, I decided to put my head down and finally redesign my site. I’d launched my previous one in time for SXSW in 2007, and while it had served reasonably well, I was never really happy with it, and it had some issues — light text on a dark background made it difficult to read lengthy texts, and I’m rather verbose when I manage to sit down and write.

I also found myself publishing “writing” of sorts in other places, and wanted to pull that content in as much as possible, lessening the guilt I felt when I would fail to actually write a blog post for a month or so.

Finally, I took the opportunity to try out some things that are a bit on the experimental side, getting back into the front-end developer saddle a bit. Most notably, there’s a significant amount of HTML5 and CSS3 sprinkled around. This went swimmingly in some ways, but had some definite detractions, depending on your needs and concerns.

Design Considerations

I’m no amazing visual designer like my better half, so I needed to keep things fairly simple. My goal was to structure content in a reasonable way that really focused on the core content of any given page, while doing enough on the visual side that people would notice that I care deeply about it.

My previous design had no distinct navigation at all. The content consisted almost completely of the blog posts, and all of them were linked from the home page, and indirectly from every other post.

This time, I abandoned that notion (since I was pulling in third-party content) and created a two-tiered navigation that displays in only one dimension. This allowed me to really focus on the most important content (blog posts, my work, a contact form, and a bio) and give clear options to view the less important content without burying it. I’m happy with how it turned out.

This time around, navigation includes a primary and secondary nav, both displayed as a single unit.

As you can see, I also used sIFR to sport headlines in DIN (condensed bold), which really does a lot in comparison with relying on webfonts. I wanted to use embedded fonts, and may still do so once Firefox 3.1 gets picked up by a critical mass, but the typeface in this case is too important to me to rely on Arial Narrow or some generic fallback.

Savoy

For the last few months, I’ve been using bits and pieces of Jeff Croft’s Savoy project, which is a great framework for content-focused sites, akin to the Pinax framework for social sites, both of which are based on Django.

This was my first test of the platform as a whole, and things generally went swimmingly. I wrote a few extra modules for various purposes (some of which aren’t in place yet, like a module to pull talks from SpeakerRate into the speaking page), and made some edits and bug fixes along the way, but it really did ease a lot of the development of the site.

Of course, I’ve been using Django for most of my personal projects lately — and have even snuck one or two into the flow at Viget — and it continues to be my preferred hammer for every nail I see. There’s a real opportunity for some of the CMS projects based on Django to create a great replacement for the currently-dormant ExpressionEngine.

HTML5

Having seen that HTML5 ostensibly worked on even IE6, I decided to give it a go. I used many of the new block-level elements in the course of structuring these pages, and found it to be very nice to have the extra hooks for styling, and it made things much nicer semantically. I finished, tested in major browsers, added some JavaScript to help IE, and thought to myself “wow, that was way easier than I thought.”

Gecko 1.8 and HTML5

Then I started hearing from a few folks that my site was completely, utterly borked in Camino 1.x and Firefox 2.x. After a quick look at Google Analytics, I saw that these visitors only accounted for 1-2% of my visitors, so I didn’t worry about it too much, especially since Firefox 3 and Camino 2 (in beta) worked just fine.

It was when I started noticing that automated screenshot services (think Ma.gnolia and snap) were showing the borked version that I started to get concerned. It ends up that many of these use the older Gecko 1.8 rendering engine (probably Firefox 2) to create their screenshots. Consequently, there were many images of my redesign that looked like garbage.

It ends up that Gecko 1.8, when it encouters html5 elements, effectively freaks out and tosses the contents of said elements directly below the element in the DOM, rather than inside it. This means that styles that should apply to items inside, say, a section element just won't, and the page doesn't render in a remotely usable way.

The only way directly around this would be to serve the HTML5 as XML to those browsers, which I certainly considered. However, there are a few places where I take advantage of HTML5’s SGMLness, and that would cause even more problems.

The Solution

In the end, I decided that I wouldn’t serve HTML5 to these Gecko 1.8 user agents at all. I wrote a bit of Django middleware to detect Gecko 1.8 browsers based on the user agent string on the server side, tag the request object appropriately, and then sprinkled my templates with a bunch of {% if request.buggybrowser %} lines to replace any html5 elements with divs.

Since I’d mainly used html5 for structural elements, rather than inline content, this should be something I only have to deal with once. It wasn’t pleasant, but I hadn’t had the opportunity to write middleware before, so at least I learned something reasonably useful in the process. Hopefully, I can strip that stuff out in the near future.

Aggregation

My favorite bit about the new site is that I don’t have to sit down and write a blog post in order to get new content on the home page or in a feedreader. Since I’m pulling bookmarks (from either Ma.gnolia or Delicious, whichever happens to be up at the time) and statuses (from twitter and brightkite) into the system, I’m aggregating them on the home page to keep content fresh.

So by simply bookmarking a page (and writing a bit of commentary about it, to add at least a little value), or by posting to twitter, I feel like I’ve also done some work on the blog. I’ve found that this actually is motivating me to post real blog posts more, since I feel the momentum. We’ll see if it lasts — I hope it will.

I mentioned that I try to add some commentary to bookmarks. From my perspective, if I add two paragraphs to each bookmark, I’m not only digesting the content better, but am making the link more valuable than a simple bookmark. However, Delicious doesn’t maintain line breaks in the descriptions given to a bookmark, so it was blurting out content as one large block of text. Ma.gnloia, on the other hand, maintains the line breaks via the API (though not on their site), so I can use markdown to format descriptions and make it feel like a mini blog post. Go figure, as soon as I find this out, Ma.gnolia goes down. Perfect.

One downside is that statuses take up a bit too much real estate in the aggregated feed on the home page. It pushes bookmarks and blog posts off a bit too quickly for my tastes, and is making me use Twitter less. One thought is that I could hide the statuses by default and allow them to be displayed via a link and some javascript. Thoughts?

Now, the Test…

My hope is that the new design, new CMS, and aggregation will help keep me writing, and so far it’s been pretty successful. We’ll see in six months how it’s going.