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.

When MailChimp first started out, it was designed specifically for web designers and the way they think. That logic was reflected in the process for setting up a campaign– starting with a header image, based on a grid, and with the notion that our users would have an idea for the overall look and feel they were looking to achieve.

We’ve revamped the template gallery and and added the Design Genius in V5 to make it easier to get started sending emails with MailChimp, whether you’re a web designer or not. Much like the iTunes Genius feature, our Design Genius is built to encourage and help guide discovery– beautiful template layouts, color combinations, and a whole world of possibilities. It allows you to get a feel for the final email you’re creating before you even begin! With visual suggestions and options galore, you’ll be sending your first campaign in no time.

Read More

In case you missed it, we recently released a new email template language that makes it pretty easy for web designers to code custom templates using some basic HTML and CSS that will tie into the MailChimp design inspector, so your clients can tweak certain design elements with out destroying the layout or design. Read More

How should you design your HTML email campaigns for maximum readability?

If you design web pages, you probably start with the assumption that most users have a screen resolution of 1024×768 pixels. Then you work your way down from there. But what about when you design HTML emails?

Here’s a very nice HTML email design (click to zoom in):

It was designed no wider than 600 pixels. That’s extremely narrow, by most web designers’ standards.

Even so, here’s what that email looks like in the preview pane of Outlook 2003:

That’s on a 1024×768 screen, with the preview pane set to “horizontal” mode.

Here’s what it looks like in Outlook2003 with preview pane set to vertical:

Read More

Users often tell us that one of the biggest obstacles to sending their first email campaign is building their  template.  With v3.4, we’ve made it even easier to get started using MailChimp by adding an Automagic Eaze Whiz feature!  Here’s the play-by-play with screen shots.

Step 1. After you’ve created your list and are ready to design your first template, the first step is to create a new campaign.  This will work for any of our campaign types, but for beginners, just select “regular ol’ campaign.”

Step 2. Select the list you’d like to send your campaign to.

Remember when you set up your list and entered information like your name, phone number and the website address where people can opt-int?  Eaze Whiz pulls the information for your template from your website, finding things like your logo, color palette and even some sample content. Read More