Here at MailChimp, we’re big fans of all the articles and news that come out of Think Vitamin, Carsonified’s blog about the web. As you can imagine we’re also pretty excited that they’ve chosen us as their ESP.

Over the past few months though, we were a little sad every time their newsletter landed in our inbox. The Think Vitamin email template wasn’t a bad one, but it lacked much of the visual impact of the Carsonified brand. Take a look at the Think Vitamin site and then check out their old template below:

Think Vitamin Newsletter Before

It’s obvious that the design was created using one of our “start from scratch” templates. Because HTML rendering in email clients can be so dodgy, these well-tested templates make a great foundation for those not skilled in the art of Email Jitsu. For Think Vitamin though, a resource for professional web designers and developers, starting with a stock template just wasn’t a good fit.

The Plan

As fans of the blog and the newsletter, we decided it was time for an intervention. Our goal wasn’t to redesign Think Vitamin, but to create a template that was more in line with their current website design. With this as my task, I started out the project in Photoshop. Using saved images and screenshots from the blog I was able to pull in the unique bits and pieces of the Think Vitamin site and arrange them to work in a single-column, 600px wide design. That was the easy part. The hard part was switching my brain from standards-based HTML mode to working with tables, spacer gifs and inline CSS. Fortunately, we’ve got some really helpful posts in these hallowed halls, and getting to tinker with the templating language made the whole thing kinda fun. Here’s what the new template looks like when editing a campaign:

Think Vitamin Newsletter After

Notice the editable regions outlined by red dashes. Separating the intro area, table of contents block and the main content area into individual editable regions allowed me to keep a lot of extra markup out of the way of the newsletter author. Another fun detail about this template is that I put some alt text on a spacer gif near that top that says, “Welcome to another exciting edition of the Think Vitamin newsletter. Please ‘show images’ in your email client or use the following link to view this in your browser.” By putting this message in as alt text, only users with images turned off will see it. This has the secondary benefit of providing a relevant intro for email clients like GMail that provide a few words from the start of the message. Yes, it’s a nerdy detail, but a fun one too. You can view the rest of the template (in all it’s table-based glory) by subscribing yourself to Carsonified’s Think Vitamin newsletter, or opening up Issue #15 that was just sent out last Friday.

Update: We weren’t the only ones who thought the Think Vitamin newsletter needed a makeover. Jeff at Indie-Preneur.com wrote a detailed post about their need for an email overhaul back in February. While I was already planning to use most of the layout and design elements from the existing Think Vitamin website, Jeff’s post influenced a few of my design decisions. Specifically, he deserves credit for the placement of the social and “view in browser” links up at the top of the email.