I got to bed at 5am this morning. But I put my head on my pillow knowing I had accomplished what I set out to achieve: a new site design which I can be proud to call my own… not a WordPress theme by someone else.
I’ll quickly summarise all the new stuff that’s going on and then break some of it out in more detail:
- A new design.
This has been my intense labour of love for the last few days. I have been annoyed with myself, that as a designer I have had nothing better to show for myself than someone else’s WordPress theme, good as Cutline has been for me. Now finally I have my own “look”, which I’m quite pleased with. As will all things like this, it will constantly evolve. At present there is no advertising content anywhere, there are a few buttons and bits missing, etc. I’ll keep playing around with it.
- A new network.
This is so exciting! I have joined the Tech Channel at B5 Media. Woot woot! I join the illustrious company of Tony Hung and Search Engine Herald, along with other great bloggers in the other B5 channels including Liz Strauss, Brian Clark and of course, Darren Rowse. B5 have been very good to invite me into the network with my own blog, rather than picking up one from their “stable”. This is a great encouragement to me, because it says they’re more interested in helping to promote me as a blogger than the specific content and brand of a given blog that I might write. That’s a subtle but important distinction to me. A big thank you to Jayvee for bringing me in as one of the crew.
- A new title.
What do I call myself? I’ve wrestled with this for a while. Each commonly used term has its limitations and preconceptions: blog coach, blog consultant, blog strategist, blog promoter, blog marketer, blog optimizer, blog designer, blog writer, blog evangelist, etc. All these are in some sense areas I cover in my work and blogging, but none of them encompasses all the others. So in an act of total desperation (or genius?! Ha!), I came up with “Blogologist”. I figure it’s kinda silly and cute, but more importantly it does make the point that I “do blogs”, leaving the details of that open to interpretation and my own definition. That’s what I want… so blogologist I am!
- A new set of underwear.
No, not literally! This is my way of explaining that I’ve built my new design on top of a really great “theming platform” called Sandbox. I’ll talk about that more below, but for the record, I’ve decided to build all future blogs using that as a base. The only major modification I made to Sandbox was to adjust the markup in order to use the Yahoo User Interface Library’s CSS components, which totally rock.
The new design
I don’t know what other designers are like, but in the case of this design, I started with a very precise grid specification. I needed three columns: one for content, one for links and other “panels”, and one for advertising and other value-add content. I had exact column widths I needed to work with, to make sure my layout fitted a 1024×768 screen without introducing a bottom scrollbar. I have remained pixel-accurate to the dimensions I defined for myself. It took customising the YUI CSS Grid to do it, which was all about fiddling with a calculator for about an hour, but I got there.
My design goals were to come up with a look that was about me, since the site URL is my name, the content is all mine, and from a marketing standpoint, I am the brand. Hence the fairly large picture of my face, my name in bold, etc. It helps to have a name that people remember and don’t easily confuse with someone else.
The look I’ve settled on is intended to be clean, elegant, simple, flexible and predictable. Part of good design is “no suprises”… no bad design surprises anyway. That’s what good designers (tend to) stick with one (or very few) fonts, a grid, consistent headers/footers, etc… The reader has to feel comfortable and the familiarity of the page elements, their look, their position, etc. I’ve aimed for that. I want my reader to be comfortable.
Why I chose a font that you probably don’t even have!
Further towards the goal of a comfortable (read: usable) experience on my blog, I’ve chosen a large, readable font called Calibri. Now, before you all beat me to death for choosing a font you’ve never heard of, let me explain! Calibri is one of a set of fonts developed by Microsoft for inclusion in Vista and Office 2007. It’s the default user-interface font for Office 2007, for example. It was developed for it’s excellent readability properties in complement with ClearType. I know most of you don’t have the font… but I’m gambling on the fact that you soon will, for one reason or another. I’m banking on the “weight” of Microsoft, as such. Meanwhile, if you don’t have Calibri you’ll get Trebuchet MS, which is passable in my opinion. I had to choose Trebuchet rather than my other preference — Lucida Grande — because it’s the font with the closest font metrics to Calibri. Sadly Calibri renders very small for a given font size, compared to Courier New, at the other extreme. How two fonts can be, technically, the same size and yet render to such a different size on the screen is almost a joke, frankly. But that’s font metrics for you.
I’d really love you to go and get the new Vista fonts so you can see my site the way I designed it. You’ll also be getting some really lovely fonts to boot, so no harm done The easiest legal way to get the fonts is to download the Microsoft Office 2007 Compatibility Pack (27.1Mb), which includes the fonts as well as a much of other useful stuff for people needing file portability with Office 2007 users.
Tell me about your underwear again…
I admit… I’m a perfectionist! I want to do things the best possible way every time. That’s why it was a fairly easy decision for me to go with Sandbox as the base theme for my custom WordPress theme. See, Sandbox is… well… aw heck. I’ll let the creator explain it:
The Sandbox is a theme for themers. It has the ability to be easily skinned, so beginners will feel comfortable styling it since they only need to know CSS. More experienced themers will drool at the rich semantic markup and profusion of classes, dynamically generated by a few functions.
I love Sandbox because it generates exactly the kind of HTML that a CSS junkie like me drools over. You may recall my ClassyBody plugin of a few months ago. This plugin was trying to do in one tag (the BODY tag) what Sandbox does right across the entire HTML markup: add rich semantic markup in the form of class attributed and IDs so that I can style all elements and pages in a very detailed way, depending on the specifics of the content.
Just one example: above the top story on the front page of the site is a TOP STORY icon. It’s nowhere else and doesn’t appear in the markup at all. It’s purely a CSS styled thing, using the following definitions:
background: url(alistercameron/top-story.gif) no-repeat;
Don’t miss the critical point here: (most) other WordPress themes simply don’t have this markup. They don’t add classes to the BODY tag indicating what kind of page you’re on, or whether the user is logged in or not… Sandbox does. Most other themes don’t number each post on the page sequentially so you can tell which is the first one (i.e. p1)… Sandbox does.
(My ClassyBody plugin remains a great option for people who need to enrich their CSS options for an existing theme. Otherwise I recommend starting with Sandbox, which does a lot more than ClassyBody is designed to do.)
A Great Freebie from Yahoo!
The final new “undergarment” of my blog redesign is the use of Yahoo’s CSS Grid, Fonts and Reset components. These do a few things, but it really just boils down to a really smart attempt to standardize what a designer is faced with when he starts doing the CSS for a given project. See, there are subtle variations across browsers that get you in trouble if you don’t know what you’re doing. This one CSS file from Yahoo is like a big mallet on a badly laid carpet: it hammers out the bumps and weirdnesses that are hiding under the surface before you go and stick all your furniture in the room.
The Grid system is the real fun bit, from my point of view. And although you might be inclined to fear the intial “learning curve”, I love it. Given that I build sites and blogs a fair bit, it’s one less thing to worry about: I have all the intial skeleton of a site (i.e. a strong, unbreakable grid/layout) built in moments… a skeleton that I know has been tested and will carry the weight of a full design.
Now, if you’re going to explore the Grid system, here’s a great shortcut: the YUI Grids Builder. It’s a browser-based gizmo where you tell it what you want and it spits out the HTML code you need. How easy is that!
Finally, on this underwear issue, I should add that the integration of the YUI Grid markup with the Sandbox template files was really easy. I renamed a few elements, added a class here and there, and that was it. I am tempted to release a variant of Sandbox with this Yahoo Grid stuff included in it, but I’m not sure that needed, since it’s so simple. If folks care enough about this, I’ll post a full tutorial. Please make your interest known in the comments.
I am very excited to have been able to get this design out in time for the announcement of my addition to the B5 Media blogging family. It’s been a lot of work but heaps of fun, too.
I should add that this is my second site designed with Sandbox and the YUI CSS components. The first is a blog redesign I did as part of a blog consultation with the wonderful crew at Scrapscene.com. That’s a review post waiting to happen… stand by for that
I’d love to hear your thoughts on my new design. I’m not the type to be precious about these things, so let me have it. I am aware that there is a big cleanup yet to be done: too much in-line CSS and JS, not all buttons and content from the old format has come across yet, no Adsense or TLA or other ads have reappeared yet, etc. So bear with me. I’m getting there.