Oct 13, 2009

Guide to all the email template options in MailChimp

template-thumbnailsWhen we first built MailChimp, it was a single-screen interface. You’d simply copy-paste your HTML code, then hit send. It was so stupid-simple, you might’ve called us the "Basecamp for email marketing" except that Basecamp wasn’t invented yet. Back then, it was just assumed that you had to know how to code HTML in order to send HTML emails. Coding HTML emails by hand was actually the easy part. The hard part was list management and tracking. My point is, there were no templates, no inbox inspectors, no boingy pie charts, and definitely no social integration.

My how things have changed. Nowadays, people want template options. And MailChimp’s got more email template options than anybody. There are email template features in MailChimp that even we forget we built. So I thought I’d put together this guide…

Build-From-Scratch Layouts

Let’s start with the basics. MailChimp comes with 5 starter layouts. If you’re new to email marketing, I recommend starting here, because these are pretty much the standard layouts that you’d use for any kind of email you’d send. They’re infinitely customizable to match your brand. And they’ve been bullet-proof coded to work in all the major email programs.

starter-layouts

If you’re not convinced these layouts can be customized enough, check out these tutorial videos that we created to help you master our template designer:

Email Header Designer

The starter layouts come with our built-in header design tool. This is a collection of high-quality photography and illustrations from iStockphoto (see also: MailChimp’s iStockphoto integration) that you can use to build a great header image at the top of your templates:

mailchimp-header-designer

You pick a graphic, then enter your company name and subheading to the side of it.

They’re even loaded with high quality fonts (please use them, because they were really, really expensive):

premium-fonts-in-mailchimp

When you’re done, we’ll automatically pick a matching color palette for you.

Automagic email designer

One hidden feature of our starter layouts is that when you begin the email design process, you can choose: "I’ll design it myself:"

design-it-myself

and MailChimp will visit your company website, scan for your logo file, background colors, font colors, some sample "about us" text, and anything else that we might find in your website’s code to "jump start" your template. It works best if your website uses fairly standard coding and naming conventions.

For example, if your logo has the keyword "logo" or "header" we can reasonably guess that’s what you’d want in your email’s header. If you’re using a WYSIWYG or web hosting service that renamed the logo to "img232498.jpg" we’re not going to detect that.

If you’re not a MailChimp user, you can get a taste for how this works by clicking on "Automagic Email Designer" over in MailChimp Labs. Or, you can watch this video:

Pre-designed Templates

If you’re one of those people who don’t like to start completely from scratch, we’ve also got a growing library of pre-designed templates that our in-house DesignLab created. They’re preloaded with images, colors, and fonts so that all you have to do is add content.

pre-designed-templates

Options include:

  • Coupons
  • Event invites
  • E-commerce (product matrix)
  • RSS-to-email, and more.

Our template library is actually going to be expanded very soon, so stay tuned.

100+ TemplateZone Email Templates (for PC)

So maybe you don’t like any of our email layouts or pre-built templates. You want something different altogether. We’ve partnered with the folks at Template Zone to offer a free version of their High Impact Email to MailChimp customers. It comes with 101 free HTML email marketing templates:

select-template

Simply download the software from this page, link it to your MailChimp account (it’ll walk you through all the steps) and design your template. It has some cool image editing and font effects that you otherwise wouldn’t be able to do unless you’re handy with Photoshop. There are some very useful holiday and promotions categories, plus you can unlock more templates if you pay. I hear they’ve generously added about 30 more holiday templates for MailChimp customers, too!

660+ Email Templates from Equinux (for Mac)

Looking for something a little more "premium" and don’t mind paying for it? Equinux Stationery Pack works great for Apple Mail, and integrates with iPhoto so that you can really customize those event invitations with your own pictures, and do cool effects.

Build your email templates with Equinux (they’re offering a $10 discount to MailChimp customers), then use our email beamer feature to send your design to MailChimp.

screenshot_equinux

Apple Mail Stationery

There are also a couple dozen beautiful email templates built in to Apple Mail, and they’re totally free. You could design an email there, then send it to MailChimp with our email beamer (See: Using Apple Mail’s Stationery with MailChimp).

apple-mail-stationery

Email Beamer

I just mentioned MailChimp’s Email Beamer above, but it can be used for a lot more than importing pretty stationery from Apple Mail. Basically, anything that you can email to MailChimp can be turned into an HTML email. We’ll actually grab the images and host them on our servers for you. Free. We’ll automatically inline the CSS, so it doesn’t break in the major email apps.

This is ideal if you’re setting up a MailChimp account that non-techies might use. They can write their content in Outlook or whatever email program they’re most comfortable with. They can even attach their own cheesy clip art (which you can remove later). All they have to do is email it to MailChimp, and it’ll be converted into an HTML email.

Forward gotomeeting invites, survey links, quick alerts from your mobile device, and more. Think of all the possibilities.

Here’s a video:

Special Partner Email Templates

Thanks to our powerful API, MailChimp is becoming a sort of "Rosetta stone" for email marketing. We’ve been able to integrate with tons of other apps that also have APIs, like Magento, Google Analytics, Paypal, Wufoo, Formspring, Drupal, Joomla, WordPress, and so many more (here’s a list of plugins and integrations with MailChimp).

In some cases, we can take advantage of special functionality by making very specialized email templates.

For example, our Eventbrite integration called for pulling in event-specific data.

We’ve also got a special template for our SurveyGizmo integration (I’ll be blogging about this soon).

surveygizmo-template

and for you social network users, we’ve even got a special Twitter email template that grabs your twitter profile info, recent tweets, number of followers, and twitter page design.

See also: MailChimp social integration features

Import by URL

Let’s say you’ve spent a whole bunch of money putting together some kind of in-house publishing/CMS tool. It’s perfect for you, because it has multi-user access permissions, your company’s workflow process, and it ties in to whatever assets, databases, intranets and extranets you’ve got going in your company. It might even have an email marketing module, but your list has outgrown it and you want better tracking.

That’s when you’ll want to try MailChimp’s Import by URL feature. Basically, it’ll turn any web page that you create into a properly formatted HTML email:

That means you can publish news with your CMS like you always do, then automatically turn that into an HTML email that you send to your newsletter subscribers.

You can even code your CMS with "email stylesheets" in order to hide certain web page elements (like site navigation and footers) from showing in the email template. Tutorial: Turn any web page into HTML email Part 2

Be sure to also check out the modx newsletter example in this article.

Template Language

If you’re an advanced coder and you want to build your own HTML emails, then turn them into templates within the MailChimp app (for example, if you’ve been paid to setup a series of templates for one of your clients), you’ll want to look into MailChimp’s Template Design Language. There’s even a Dreamweaver extension and TextMate bundle! See also: Best practices guide for template language

custom-template-builder-interface

Windows Live Writer, Blogo Desktop Clients

We were tinkering with Microsoft’s Windows Live Writer one day, just to see what it was all about. We noticed that it’s actually a really good publishing app, with a WYSIWYG that generates decently clean HTML code. No, really! It’s a nifty desktop app that’s built for bloggers (you basically configure it to publish to your Blogger, LiveJournal, TypePad, WordPress, or LiveSpaces blog, and it integrates with flickr, digg, youtube and twitter). It’s quite nice and super powerful. No, really!

If you’ve got a co-worker or client who isn’t very "browser friendly" and you want to give them a desktop application (but NOT Microsoft Word or Outlook, for the love of all things holy), this is worth a try. No, seriously!

You’ll find the settings you’ll need under Lists -> List Tools -> Blog Client Software

live-writer

While we were at it, we also made it work with Blogo for the Mac.

Misc. Email Template Design Tools

But wait, there’s more! MailChimp is packed with all kinds of nifty template design tools to help make your emails beautiful: