Designing for Flow by Jim Ramsey

Regular blogging to resume soon

Tue, 02 Sep 2008 20:29:52 -0800

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

Wed, 27 Aug 2008 21:47:32 -0800

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

Sat, 23 Aug 2008 21:31:12 -0800

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

Thu, 21 Aug 2008 21:59:28 -0800

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

Wed, 20 Aug 2008 21:13:32 -0800

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

Tue, 19 Aug 2008 20:58:45 -0800

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

Mon, 18 Aug 2008 21:09:30 -0800

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?

Sat, 16 Aug 2008 22:17:21 -0800

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

Fri, 15 Aug 2008 16:43:48 -0800

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.

Choose images to appear in the gallery

Thu, 14 Aug 2008 21:05:27 -0800

If you’re using the Mid-Century theme you may find that you don’t want every one of your image assets to appear in the photo gallery widget. It’s easy to limit the images that appear there using tags.

First, go to Manage Assets and select the images you want to appear in the photo gallery widget. Choose “Add tags…” from the “More actions…” menu and tag those images “gallery.” Next, edit the “Gallery.” template module

Around line 6 you'll see:

<mt:Assets type="image">

Change it to:

<mt:Assets type="image" tag="gallery">

Then you need to change it again around line 23:

<mt:Assets lastn="10" type="image">

Change it to:

<mt:Assets lastn="10" type="image" tag="gallery">

Now only images that are tagged "gallery" will appear in the photo gallery widget. Republish your site and you're good-to-go.

Top nav is built-in

Wed, 13 Aug 2008 20:55:51 -0800

The Mid-Century theme for MT has an hidden feature that I think a lot of people will appreciate. You might have noticed the addition of a horizontal navigation bar on this site. If you're using this theme and want to enable top nav it's really easy.

Go to the Templates page and edit the "Banner Header" template module. At the very end of this file you'll see a div called "nav" that's wrapped by <mt:Ignore> tags. Simply remove the opening and closing <mt:Ignore> tags and add any additional items you want in the navigation. Republish your site and you're all set.

You can download a beta version of the Mid-Century theme at movabletype.org. The final version should be ready soon.

MT 4.2 has been released!

Tue, 12 Aug 2008 19:05:27 -0800

Today we released Movable Type 4.2. You can read all about the new features in Byrne Reese's post to movabletype.org. My major contribution (in partnership with Beau Smith) was the redesigned template editing UI. If you've ever been frustrated by the way templates are organized in previous versions of MT4, I hope this new release will make your life easier.

Gmail makes it sound like it's my fault

Mon, 11 Aug 2008 13:42:55 -0800

I was trying to check my email this afternoon and I got this message from Gmail:

They've phrased this error message to make it sound like my fault. "We're sorry but your Gmail account is currently experiencing errors. You won't be able to use your account while these errors last, but don't worry, your account data and messages are safe." It makes it sound like there's something in my email that brought down their service and now their engineers have to fix my problem.

Does anyone else read it this way?

Login confusion

Sun, 10 Aug 2008 07:52:27 -0800

One of the things about Amazon that drives me nuts is the fact that there's no "Log in" or "Sign in" link on the homepage. There is a link that takes you to the sign in page, but it says "Sign in to get personalized recommendations" with "personalized recommendations" as the linked words. No matter how many times I come back to Amazon this confuses me. I'm looking to sign in so I can see what's in my cart, not see what products they've recommended for me.

Tools of the trade

Sat, 09 Aug 2008 22:58:33 -0800

I thought I'd talk about the hardware and software I use everyday and why I use them. Feel free to comment with your setup and tell me why you like it.

Of course, I use Movable Type to publish my site.
I have a Mac Mini in my home office and a PowerBook from work that I carry everywhere. I love being able to work on a Mac and don't really ever want to use Windows again.
To do any sort of coding (HTML, CSS, Javascript, whatever) I use TextMate. I previously used Dreamweaver, even for hand-coding, but I switched because Dreamweaver just felt like overkill and I felt stupid telling people that I used a software program called "Dreamweaver."
I use Fireworks to do all wireframes, comps and graphics. I've used Fireworks for a long time and it just feels natural to me. Whenever I've tried to switch to Photoshop or Illustrator it's just felt wrong.
I use Transmit as my ftpclient, but I don't have as much need for it nowadays because most of what I do gets checked into subversion rather than uploaded to a webserver.

There are a few more things that I'll get into in more detail at a later date.