The new layout

The layout brief

I didn’t have a very clear vision of where I wanted to get with the new layout, but I had a couple of ideas and learnings. First, focus should be on easy reading. Thus crisp, clear fonts and colors. Also, most default Movable Type fonts have a really narrow content area, so you can’t put for example 500px images in it. But as it happens, 500px is a standard image width in Flickr. The next smaller size is 240px that is pretty tiny and really doesn’t let you communicate anything.

So that was pretty much all I gave to devil and said “hey… why not have a go with it”. And so after a couple of iterations we came to this layout concept with no further hassle. This is fortunately a project where you don’t need to report to anyone and are completely on your own with deadlines. I strongly believe that projects have three variables: features/functionality, cost and time, and at least one of them is always open. So in my case I left the deadline open and just kept tinkering on the site until I was happy with it.

The navigation — inline entry and comment layers

Beyond the new skin, I wanted to do some other interesting things too. It always bothered me that blogs are unresponsive and always generate a new pageload either when you view the extended entry (the “read more” stuff) or when you want to see the comments or post one yourself. So I had a go at making both the extended entries and comments to be present in all archive views (main index and month archives), but just in a hidden state. So if you click the link to see them, they pop up instantly on the same page, instead of triggering a new pageload.

I was almost done with this when I validated the code one last time and a zillion errors popped up. The default MT templates were all written with an assumption that you have only one comment block per page, so if you want to have more (even though they’re hidden initially), it takes a bit of tinkering with the JavaScript and layers to get it right.

The tech stuff

The default MT templates contain a lot of duplication. I can’t imagine how does one develop reasonable styles against the default templates. Maybe it’s a matter of taste, but with devil and my other colleagues, we’ve gotten the best results when we pretty much fully rewrite the HTML from scratch and don’t worry about the default templates and styles too much. And the default MT templates also contain a LOT of duplication. I got rid of that here now with the help of modules and code reuse.

Being a geek as I am, it was important for me to have code on this page validate. It does, and the only place that doesn’t validate are the embedded video containers from Google and YouTube. Despite being in the 21st century and one of them giving the other a pot of money, they still haven’t figured out how to provide their community with XHTML-compliant video container code is it really that hard?

I wanted to also do a bunch of other minor technical things, some of which I managed for this “launch” like better statistics and switching to Feedburner as primary feed provider, and some of which remain for a later time, like switching to Akismet for comment-spam-killing.

Let me know if you find something broken or what you think of this layout and the comments and extended entries stuff.