I haven’t been blogging as much recently, partly because I’ve been working to read more — I’m a little more than a third of the way through The Stand right now — but another reason is because I’ve been busy tinkering with the back-side of the blog. Specifically, I’ve been writing a new theme.

The purpose is of course to attempt to describe the sentiment of my blog more clearly through its appearance. I’m not a designer, but I think the new look accomplishes that, at least for me. More importantly than that, it was an attempt to take a project from start to finish, something that the string of flights of fancy I’ve abandoned over the years indicates is not something I do very often. Even more importantly than that, it was a chance to see if I could do the whole web-designer thing; I know that I’ll never be a real web-designer — I don’t have the eye for it — but having some sense of aesthetic appeal is useful in my field. And even more importantly than that, it was a chance for me to practice what I preach; I’ve been espousing HTML5 and its semantic goodies for a while, and there are new features of CSS that I think are fantastic that I’ve always wanted to exploit, so this was a chance to work with both of those things.

A consequence of this, is that my new design isn’t supported by IE¹. If you’re viewing this page in IE, it might look like I’m still using the WordPress theme vostok which I’ve been using for quite some time now — if I did my job correctly — and that’s because I special cased you fools so you wouldn’t have to witness the horror that is the new design sans awesomeness. That said, I’ve tested the new design in IE9 and it looks almost perfect so when that one comes out, you’ll be able to appreciate the new design. For the rest of you, I’d like to discuss briefly a few of the features of the new blog I like. Geekery follows.

HTML5 = Better Semantics

HTML5 introduces a bunch of new elements that carry with them new semantics. The article tag lets you specify a unique chunk of content, like a blog post; the section tag lets you section out content; and there are a few more I’m using in reasonable ways. The real value here is for searching engines and accessibility. Now, someone viewing this site with a screenreader can jump around the content much more intelligently, because the software can be aware which content is actual content and what’s navigation or metadata or the like.

CSS = No Cruft

Because I started out caring more about clean code than compatibility with the archaic Internet Explorers, the CSS of the blog employs sibling and direct ancestor selectors, :before and :after selectors, and CSS gradients and shadows to make the HTML of the blog very clean and neat. The use of wrappers divs is absolutely minimal, and smarter selectors means fewer delineating class attributes and ids. All of this means a smaller download time for the content of the site.

@font-face = Pretty Things

Now that pretty much every browser supports embedding web-fonts — and more importantly, there are reasonably appealing fonts available for use — I wanted to use these new fonts to reflect a certain sensibility. The free fonts available for web use are more limited than the paid fonts available for web use, and I’m not quite ready to pay for fonts for this blog, so my selection was limited, but I found a few appealing fonts and whittled it down to a select few that are used throughout the blog. Right now, it uses Romeral Inline for headings, Tagesschrift for some metadata and subheadings, and Gentium Basic for the rest of the text. I think they work in the context of the new design, but let me know if you think they’re ill-suited, especially if you have better fonts in mind.

YMMV

The new design was built and tested primarily using betas of Firefox 3.7 on a Macbook. Some of the features it has only work on that browser, and look best in that operating system. And some browsers feel a little clunky, I guess because they can’t quite handle the techniques I’ve used as well as others. That said, for most modern browsers I’ve deemed it Good Enough For Now. So what you see and experience might not be exactly what I intended, but my hope is that as web technologies progress, my blog will ultimately attain a level of homogeneity across browsers and operating systems.

I hope you enjoyed — and understood, seeing as the audience of this blog might not be particularly tech-friendly given the inordinate number of posts about television — this post describing a few of the changes I’ve put into place with this new design. I plan on writing another post related to my use of new HTML5 elements shortly, to explain and discuss the rationale behind my use of article, section, and aside elements.

---

Footnotes

1. And all the multitudes rejoiced. [↩]