Blog Mini-makeover

Because we evangelists get renumerated based on the number of blog posts we make (well it feels that way), I started my blog pretty much as soon as I arrived here. Consequently, I just chose a standard template and off I went.

This afternoon, a few months later, I found myself faced with a choice between doing online training (one of Microsoft's core values), or fixing up my blog. I went halfway and gave the blog a mini-makeover, as an excuse to get more familiar with Expression Web.

Now, what follows is pretty basic for anyone with decent html/css skills, but I hope you appreciate that in my work I've only ever had to have 'conversational' html* - I've normally worked with a web designer/developer to tidy up all the code for me. So for me, this is real progress!

(By conversational, I mean I can say basic phrases like "How much is this?" and "Can you direct me to the Australian Embassy?" in html.)

What I Did

So, when I came back from lunch today I opened my blog page in IE and selected "Edit with Expression Web" from the Page menu. My first surprise was that it did what you'd expect - cool!

My plan was to define some CSS overrides to fix up some of the layout and presentation of my blog. So the first thing to do was create a new local style sheet on my machine that I could use to experiment with.

1. File/New/CSS
2. Name it and save it
3. Back on the blog page in ExWeb, click "Attach style sheet..." and point at the new style sheet. Checking out the source, ExWeb had worked out to place the stylesheet reference after the existing ones, but I didn't love where it chose to put it, so I moved it immediately after the other style sheet references.

First I wanted to change the link style. The template I had chosen showed links as bold and blue. Call me a usability guy, but the underline convention is just that - a convention (even though underlines are more visually noisy than, say, bolding).

So first I did the naive thing and typed in a new 'a:' style definition with 'text-decoration: underline'. While this had the desired effect on the links inside my posts, it also made all the other links, like headings and dates and stuff, underlined too, which didn't look so pretty. D'oh.

I quickly realised I needed to override the link style just inside the posts.

1. Click on a link inside a post.
2. Browse up through the hierarchy of divs and stuff at the top of the screen by clicking each one until the whole post is highlighted. Turns out the div class is called '.postsub'.
3. Double-clicking the link style in the CSS Properties panel pulls down the CSS file and opens it in ExWeb, with the style in question highlighted.
4. Copy the style definition, paste it into my own CSS file and change text-decoration to 'underline'. So simple an interaction designer can do it!

Playing Go Fish with the div hierarchy.

 And so on...

What else I did

• Gave the body a max-width of 90em's, rather than expanding to take up the full width of the page. While resizing to fit the browser size is a good idea (we're not designing for print, afterall), text becomes hard to read if the paragraphs are too wide. As I recall, 10 words per line is roughtly optimal (90em is a bit more than that). So the main content still shrinks and grows with the browser window, but only up to a maximum of 90em's. I used em's rather than pixels to take into account users' font size settings.
• Left-aligned the page heading with the body content. (First rule of visual design for non-designers: when in doubt, line stuff up.)
• Mucked around a lot with styles to remove the nested borders in the right-hand column where content was being inserted by Technorati. Once again, browsing the CSS hierarchy in ExWeb helps you find which tag you need to stomp on.
• Centred the MIX badge in the News section using an inline style definition - bad me!

Before and After

Before

After

The end result still needs a lot of work, but hopefully it will give me slightly more cred when I talk at Web Standards Group in Canberra in a couple of weeks. (Hmm, pity about that inline style...)

Now all I need is a floral border...