Blog design language

The design behind my current blog scheme grew out of a dissatisfaction with the limited choices given by Blogger. Something like seven templates, with each having possibly two to six color/image variations. Granted, they are expertly and professionally produced. But each, even the one titled “Simple”, was a horrific mess of HTML. I like clean markup, when I can get it. I also didn't want to have just another cookie-cutter blog that literally looked like so many others for using a stock template.

So I created my own.

This process took more work than I would have liked, but it forced me to learn a lot about Blogger code, widgets, and such. Once I did enough experimenting I decided to first tackle a layout. I designed that in Expression Web, putting together a framework of divs and such along with a stylesheet.

My goal was to create something simple and easy to navigate and change. I like clean markup but I also wanted a simple approach to the page layout. I did a lot of research into blog layouts, designs, and inspiration.

I particularly liked where Microsoft had been going lately. I thought Calibri and Consolas were standouts in the latest batch of Microsoft-created fonts (their “C” pack as I call them), being both graceful, pleasing to look at, legible at many sizes, and working well with anti-aliasing and ClearType. Segoe and Segoe UI were also instant favorites and I've enjoyed seeing Microsoft employ it on most of their newer sites. It has an airy, clean, humanist feel that is so much more satisfying than the Arial/Helvetica of yore. Then there's Zegoe (the Zune version) and Segoe WP (the Windows Phone 7 version), not to mention Windows Phone 7's philosophy of “type is beautiful” and the Metro UI as a whole.

I kind of like where they are going, so I chose large, clean fonts. I didn't want to be so Microsoft-tied, though, nor did I want the complexity of WOFF. After all, my design was to be simple. As such, I chose Lucida Sans Unicode as my primary font due to it being universal on most OS's in some form and gracefully degrades to even more common fonts like Arial if need be. I like the Unicode variant a bit better than the regular Sans, plus it means I get plenty of Unicode support in case I decide to post Japanese このような, but unfortunately Sans Unicode does not have true italic/bold support. Bummer.

In the interest of simple, I've tried hard to, where possible, make this site lean. Reducing unnecessary markup, styles, JavaScript, as well as external sources. For the most part, you shouldn't be hitting more than a half-dozen sites to get all of the content here: Blogger for most everything, Picasa for images I host, FileDen and Google Sites for my custom CSS and JavaScript stuff, and Amazon S3 cloud services for my source code formatting. That last one is also smart enough to only load resources on demand — no source to format, no resources to retrieve!

This simplicity, beyond being clean in appearance, neat and orderly for maintenance, affords two things: speed and cross-browser support. By cutting down on fluff whenever practical, pages should load faster. I like snappy sites. Also, by reducing the complexity of the markup and effects, I eliminate the need to do a lot of cross-browser support code. Ideally the only difference viewing this site in, say, IE6 should be the lack of CSS3. And the CSS3 stuff only enhances. It is not required for the site to work and be readable.

I hope you now have a better idea of where I was going with this custom theme. For now, I've pretentiously named it “immaculatus étaín” (though you could have found that out easily by doing a View Source). The first word is Latin for unstained, riffing on my goal of simplicity. The second is Irish in reference to a mythological female. The name is typically associated with the color blue, which you'll notice is the only color I employ outside of the typical white/black shades.

I do plan to revisit the design to enhance it along the way, but I must say that putting together a full template design is a lot of work. And keep in mind, this was only for one page (and a simple one at that). Plus, I have not gone to huge lengths to support the Blogger Layout Designer. I only recently added some limited customizability. Even then, I haven't done the complicated work of making the layout itself customizable. Many of the built-in templates support switching around between one, two, or three column layouts and variations, along with customizing the placement and size of various pieces (content area, side bars, etc.) which is even more work I haven't bothered to tackle.

I discuss the design of my blog for a few reasons. Partly, it is for myself. Part of the purpose of this blog is to force me, through writing it out, to sort out thoughts and such. Plus, it archives them, keeping them readable for years to come. And partly it is to inform anyone who cares, which is probably not many.

Let me stress, though: I'm a programmer, not a designer. I do software for a living. But even so I don't think I did too badly. In fact, I usually do fairly well with designs. I'm not great nor a replacement for a true designer but I can pinch-hit really well, better than most developers I think. I've long had an art side to me, though. I used to draw a lot, I've messed around with Photoshop a ton over the years (since Photoshop 4!), and I've always been comfortable with it. Not great… but comfortable. I think this design shows that, too. I'm comfortable with creating a simple design. I think that's pretty good coming from a code monkey, don't you?

Next up: I'd like to see about doing some mobile support maybe. Using the Windows Phone 7 emulator will make it a cinch to get an idea of how the site works via mobile, too. I wonder if the iPhone has anything similar, though?