Designing Interactive Products

And by "soon" I meant 521 days

Sorry, I'm back. Did I miss anything?

Yes, the title of the previous post on this blog was "Regular blogging to resume soon," and then I didn't post for a year and a half. But now I've moved this blog from Movable Type to TypePad and am gong to make this my home for everything design-related. Stay tuned.

Regular blogging to resume soon

I've been remiss in not posting here for a few days, but I've been busy with my son's first birthday, my 7th wedding anniversary, an upcoming kitchen remodel, not to mention the presidential race. I plan to start blogging regularly again this week.

My pick for best-designed blog

I have to agree with Chris Basey, who commented on my previous post, that Veerle Pieter's blog is probably the best-designed blog out there. It’s extremely straight-forward and clean, but so visually beautiful and interesting.

Like all great design, it’s the details that really set it apart from everything else. A great example can be seen in the screenshot to the right. Notice that the left thumbnail image has a subtle shading on the left that matches the shading above and below it. It’s a minor thing, but when added together with all the other perfectly executed details, you get a site that's wonderfully layered and rich.

The best-designed blogs

What blogs are so well-designed that they make you say, "I wish my blog looked like that"? What is it about them that makes them good? Please comment with your favorites.

Dashes.com now sporting Mid-Century

Anil Dash's blog has an updated design and I'm proud to say it's a modified version of Mid-Century. Congrats to Anil on the ninth anniversary of dashes.com!

Adding Pages to sidebar

Today I'm going to describe how to add a list of pages to the sidebar in the Mid-Century theme. The example I'm giving here creates a single-level list without folders.

First, create a new template module called “Pages” and paste in this snippet (will open in new window).

Next, edit the “Sidebar” template module and find where the “About Me” module is included and paste the following directly after that:

<$mt:include module="Pages"$>

Republish and you should be all set.

Adding Related Entries to Mid-Century

Creating the list of related stories on each entry permalink is really easy. This is based on the Devlounge tutorial by Bill Mabray, but I've modified the template code slightly to make it work with Mid-Century. Remember, for this to work your entries have to be tagged consistently.

First, go to Design > Templates and click to edit the "Entry" Archive Template and find the two <mt:Include> tags that insert the Trackbacks and Comments modules. You'll be adding the new template code just above these. Next, copy and paste this code snippet (will open in new window) above the Trackbacks <mt:Include>.

Make sure that when you paste in the snippet the quotes are not converted to smart quotes (“ ”) in MT. It wasn't working for me at first and then I realized that this had happened and had to change all the quotes.

That should do it. Let me know if you have any difficulties.

Thanks for the great suggestions

I'd like to thank everyone for the suggestions on how to continue to improve the Mid-Century theme. Here are the things I'm hoping to write tutorials on in the next week or so:

• Sidebar Pages module
• Pages/folders in the top nav
• Gallery displaying a random image
• Limiting the length of archive lists in the sidebar

Making it a fluid layout is a more difficult task, but I'll keep it in mind. Keep the requests coming.

Where to go from here?

I'd like to thank everyone for their interest in this new theme for MT and I hope the little tutorials I've been blogging about the last few days have been helpful.

I've had requests for Mid-Century as a community blog and adding userpics to comments, but besides those things what else do you want to do with Mid-Century?

Changing the logo on Mid-Century

Replacing the graphic in the black bar at the top of each page is easy. You'll need to create a new PNG GIF image with a black background that is 46px by 46px. Name it "logo.png" "logo.gif" and upload to the /mt-static/plugins/mid-century/ directory, overwriting the existing image. The change should be immediate without having to republish your site.

Update: Jason pointed out that the standard version of Mid-Century has a different graphic in the header that's a GIF rather than a PNG.