They included some beautiful new holiday templates, plus some new themes like “Environment” (for all the green and earth-friendly businesses we’re seeing in MailChimp) and “Functional” for use in very specific applications, like, say, Autoresponders.

What’s cool is that since we’re using our new Template Design Language, some of the templates have some unique MailChimp features baked right in. I’ll show you what I mean…

To find them, create a campaign. When it’s time to pick your template, go to the “Gallery” tab:

You’ll notice a pulldown menu where you can sort the template by category:

Under “Holidays” you’ll notice some elegant options, like:

Mmmm, turducken (what the heck is a “turducken?“).

Under the “Functional” category, we have new templates that you can use for very specific cases, like an annual autoresponder when it’s time to come in for a checkup:

Under the “Environment” category, you’ll find this template:

Let’s take a closer look at this one.

In the right column, you’ll notice a series of tips. We’re using MailChimp’s nifty ability to create addable content blocks:

Just keep clicking the little “+” icon, to add more tips.

Yes, Style and Versatility

I know this template is called “Live Green,” but this particular template is actually versatile enough to be used for other applications.

Like, saaaay, a plumber’s newsletter.

Let’s use the iStockphoto integration in our image gallery to search for “plumber” pictures:

and plop it into the left column of our template:

After that, I can tweak the colors, fonts, and other styles to match my brand.

Exportable for Template Hackers

Here’s a power tip from Fabio (yes, that’s his real name). He’s one of the DesignLab scientists who contributed a bunch of these templates, and is working on many more.

“Most of these pre-built templates are kind of rigid, but if you’re handy with HTML/CSS, you can take any one of them and export the code in order to tweak it exactly the way you want:

Tip: You’ll want to brush up on our Email Template Language (here’s a handy video tutorial).

Then, re-import your custom template back into MailChimp by clicking this button:

just copy-paste your code into our template editor and hit save:

We hope you find these useful. Stay tuned, because we’ve got a lot more email template announcements to make!

This is where our integration with Picnik comes in really handy:

Also see: 6 free spooky Halloween email templates

I just stumbled upon this nice Halloween email campaign from Block Club, a graphic design firm in Buffalo NY.

MailChimp comes with all kinds of powerful, easy-to-use, and free email template tools that make email design easy.

But Block Club is a graphic and web design firm, and this is a “design tips & tricks” publication.

So their emails have got to look really nice and custom-made.

I noticed a few “power tricks” in their email template, and asked them if I could showcase them here…

Thinking Out Of The Blocks

By now, we all know that when coding HTML emails, simple tables are the safest way to go.

Unfortunately, this can lead to some boring layouts. So one really simple visual trick you can use is to make a piece of your header poke out from the “visual bounding box:”

Visual trick: make your header less boxy by protruding from the edge

If you look really close, you’ll see that it’s well within the boundary of the table. It’s just an optical illusion.

And it’s easiest to do with your header graphic, so you don’t have to code any extra table cells for those “sticky-outies.”

I showcased a similar header trick over here, and this old(ish)campaign from Songbird is one of my favorite examples of beating email boxiness:

This email campaign from Songbird is a great example of designing out of the boxiness of HTML email

And we do the same thing with MailChimp’s email header designs:

A recent email from Apple showcasing their larger displays uses the same trick, but instead of the header, does it on the sides:

Staying Inside The Lines

Okay, with a name like “Block Club” it’s pretty obvious that blocks are going to be an underlying theme to their email design:

but if you’ve ever used MailChimp’s WYSIWYG editor (or any WYSIWYG for that matter), it’s also obvious that coding nice, tight little boxes would be a complete p.i.t.a.

Now, don’t get me wrong. We’ve got an awesome editor with lots of crazy cool features (free image hosting, iStockphoto integration, etc). Personally, I use the editor all the time because it saves me time.

Upload HTML Email By ZIP

But if you want extremely precise, pixel-perfect grids, you’re going to have to go old school, break out the text editor and code everything yourself. Which is exactly what Block Club did.

And it’s something that any web designer can do with our upload ZIP file option:

MailChimp lets power coders upload their own HTML email designs via ZIP file

In case you didn’t know, you can also import your HTML email designs into MailChimp by just pointing us to a URL.

Check out the Modx CMS-to-email example here:

See how Modx creates emails with their CMS, then imports to MailChimp

There are actually a plethora (I love saying PLEH-thora) of options for getting email designs into MailChimp. Learn more by reading: Guide to all the email template options in MailChimp.

Going Against The Grain

You’ll also notice that Block Club’s email uses a tiling background image with diagonal text (actually, they use diagonals a lot to contrast the underlying blocky grid):

Background images in HTML email are possible, but require special design considerations

In fact, they use diagonal elements quite a lot. You can see them in the images they use in their content blocks.

Diagonal elements contrast the “blocky” grid nicely, by going against the grain. Tiling your logo in the background like this can also give your email a slightly premium/authentic look (think Louis Vuitton handbags, or look really, really closely at paper money or American Express cards).

But let’s focus on the tiling background image.

Gracefully Degrading Background Images

Background images, in general, aren’t all that reliable in HTML email. There are dozens of email apps out there, and they render HTML emails differently. So the secret to getting background images to work in HTML email is to just accept the fact that they won’t.

Then, design your emails to “fail gracefully.” In other words, never design an email so that the background image is “mission critical.” Test your design and make sure that when your background images are not working, the rest of your email looks fine.

Click Once, Measure 50 times

If you’re going to use your own HTML email code, it pays to test your work before you hit send. MailChimp’s inbox inspector lets you push a button, then we’ll screenshot your email in all the major email apps and test it in all the spam filters.

Block Club ran some inbox inspection tests to check their design, and the design held up nicely across the different email apps. Here’s what it looked like in Hotmail, for instance:

Use MailChimp's Inbox Inspector to make sure your email design holds up in all the major email apps

Full Circle Back To Templates

Okay, so if you’re a control freak, now you know you can do a lot of custom design work in MailChimp without using any of our built-in template tools at all.

But after sending a few campaigns (and refining it with minor tweaks here and there), you may actually want to look into turning that totally custom HTML email design of yours into a built-in MailChimp template.

Yeah, I know this entire article was about avoiding our built-in templates, and coding your own designs. But trust me, this is a real timesaver (and very handy if you setup MailChimp accounts for clients).

Our Email Template Language makes it easy to upload your design into the MailChimp app, then define editable (even repeatable) regions. There are even Dreamweaver and Textmate bundles to make coding easy.

If this sounds interesting to you, check out Aarron’s video tutorial with some really advanced tricks.

1. They’ve turned on MailChimp’s free Archive Toolbar, which is a handy option that lets recipients view past issues, subscribe to the list, and autotranslate. If you don’t have it turned on for your lists, you should really consider it.
2. Nice use of rounded corners, and making the guru’s head poke above the header is a nice design trick to keep the email from looking too boxy.
3. Smart to include twitter and facebook sharing options (a trend that’s on the rise), and this is the first time I’ve seen an RSS option in an email campaign. Nice. We’re also seeing interesting uses of flickr in email campaigns recently.
4. Normally, I see people putting our social sharing links in their footer. This is the first time I’ve noticed it in a side column, and it actually tiles quite nicely there. Here’s how you can customize the social share icons you want to display in your own emails. BTW, how many times have you written a bunch of content, then wanted to “balance out” the side column? Sometimes I’ll insert a “quote of the day” but using an illustration is a nice idea too.
5. At the bottom of their email, there’s a link to view past issues of their newsletter. This is great for recent subscribers, or for subscribers who might’ve missed a previous email. You can do this automatically with MailChimp’s Recent Issues merge tag.

6 free Halloween email templates from MailChimp

Learn more about the artists and designers that created them here.

How to use your Halloween templates

We’re already starting to see these templates “in the wild” as people send out their Halloween sales and promotions. If you’d like to use them too, here’s how:

1. Create a campaign

2. When you select your template, click “my templates”

3. Scroll down to “pre-built templates” and you’ll see the Halloween templates:

More holiday email templates to come

We’ve got even more beautiful HTML email templates coming for Thanksgiving and the whole “Christmahanukwanza” season.

Plus, I hear the folks at TemplateZone just added over 300 free holiday email templates for MailChimp customers (more on that soon!).

So if you’re thinking about revamping your email marketing for the holidays, you might want to check out their free PDF Guide: “Get Ready for the Holidays”

Their guide covers a wide range of topics, including:

• A/B testing (also see: MailChimp’s A/B testing tool)
• Subject line writing tips (also see MailChimp’s Subject Line Suggester)
• Creating a special “holiday email series” (also see MailChimp’s Autoresponder)

If you like their tips, you should also bookmark their Retail Email Blog, where they cover all the trendy topics in the world of email design.

I vaaant to send your EEEmail! MailChimp Halloween poster

We’ve got some cool stuff planned around this Halloween (in addition to the cool vampire-chimp poster to the right).

A little while back, we launched our new HTML Email Template Language. This makes it super easy for web designers to code their own emails, then load them into MailChimp as built-in templates for their clients.

To showcase how cool this is, we commissioned some well-known artists and designers to create some spooky Halloween email templates for all our customers. Their work has appeared in WIRED and Paste magazines, BoingBoing, SXSW, Threadless, and even a Nintendo game.

Here are a few examples of what’s coming sometime next week…

Free Halloween Email Templates Are coming

Travis Pitts:

“I’m a struggling freelance illustrator, junk sculptor and apocalypse aficionado into robots, monsters, zombies, astronauts, pin-ups, scooters and an addiction to 80’s nostalgia.” (check out his other work here)

Mark Weaver:

Mark does amazing work with retro-photography, fonts, and character illustrations. Check out his other work here, or buy some of his work on Etsy.

Shawn Smith:

From his website: “Shawn Smith is the creative force behind Shawnimals, and started the company before he even knew it by watching cartoons, drawing pictures and playing video games as a kid.” We’ve showcased some of Shawn’s emails and imaginative illustrations on this blog too.

Greg Abbott:

“I specialise in character and T-Shirt design. I’m currently particularly interested in working with posters, album art and toy design.” Here’s more of Greg’s work on flickr (love this scratchy monkey).

Natalya Kungurtseva

Natalya is an artist friend of ours from Kazakhstan who likes to dabble in painting and interior design.

More to come!

This is just a tiny sampling of what’s to come. The new Template Language really opens up a lot of opportunities for us, and for designers in general. There are a bunch more templates also being created right now by our internal DesignLab team, plus we’ve got a fun Halloween promotion we’re launching next week. So stay tuned!

Can’t wait for next week, and want to create your own Halloween template? Here’s a handy guide to all your template options in MailChimp.

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.

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:

• Columns and rounded corners
• Navigation bars
• Tables and image maps

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:

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):

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:”

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.

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:

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.

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).

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, Highrise, 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).

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

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

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:

• premium header library – A collection of premium header graphics that you can use in your HTML email templates (no crappy fonts)
• picnik integration – Don’t have Photoshop? Use MailChimp’s handy picnik integration to spruce up your templates.
• magic color picker - hey, how’d MailChimp know what your company colors are? where’d we get over 120 beautiful color palettes, and how’d you match them with all those header graphics?
• CSS inliner – We automatically fix your HTML email’s CSS so it doesn’t break in email programs
• Automatic plain-text generator – Yeah, making plain-text alternative versions of your HTML email is a pain. So we made it automatic.
• Merge tag cheat sheet for your email campaigns
• Mobile friendly campaigns – Automatic mobile device detection and formatting

Follow these best practices and you are sure to create awesome emails that your clients will love:

• Your email layout should be no wider than 600 pixels for best viewing in various email clients
• Avoid using the following CSS in your templates:
  • Floats
  • Positioning
  • Background images (doesn’t work in Outlook and Gmail)
• Use this wonderful reference created by our friends at Campaign Monitor to see what CSS is supported in major email clients http://www.campaignmonitor.com/css/
• It’s a good idea to limit the number of editable spaces in the template to keep things simple
• Name all editable spaces consistently. The name you assign via mc:edit="somename" is used to create a field in the database to store the user’s content. If they switch templates after writing content, they could lose their copy if the editable space names aren’t consistent. Use the following conventions common content areas:
  • mc:edit="header – used to name the header
  • mc:edit="header_image" – used to name an editable header image
  • mc:edit="sidecolumn" – used to name an editable left or right side column
  • mc:edit="main" – used to name the main content space
  • mc:edit="footer" – used to name the footer
• Editable images should not be placed within an editable content container
• Set the @theme declaration in your CSS for the page background, header, footer and content space so templates can be quickly customized with the MailChimp color themes. See the template language docs for the correct names to be used.
• Be creative with the use of merge tags. Use the social merge tags to provide readers of your email new ways to connect with you and share your content. Use The table of contents merge tag (*|MC:TOC|*) to create an automatic list of links to the <h1> and <h2> headings in an email.
• Be sure to include the required CAN-SPAM info in the footer (*|UNSUB|* *|LIST:DESCRIPTION|* *|LIST:ADDRESS|*)
• Include target="_blank" in links to ensure they open a new browser window or tab when emails are viewed in browser based email clients
• Include a link for users to update their subscription preferences <a href="*|UPDATE_PROFILE|*" target="_blank">change subscription preferences</a>
• Include a link to let users view the email in a browser: <a href=”*|ARCHIVE|*” target=”_blank”>view this email in a browser.</a>
• Include a link to your website: <a href=”*|LIST:URL|*” target=”_blank”>visit our website</a>
• Feature the forward to a friend link somewhere prominent <a href=”*|FORWARD|*” target=”_blank”>forward to a friend</a>. Make a cool button treatment for it where possible to encourage sharing
• Once you’ve created a template, put test it in a campaign and try customizing it by changing color, adding content, etc to make sure it will work well for others who might be using it in different situations.

Well, we just learned from the ZDnet blog that IBM plans to put Lotus Notes in the cloud with LotusLive iNotes. According to the article, IBM appears to be positioning it against Google Apps as “web-based email for the enterprise.” Sounds like yet another email app you’ll have to learn how to design around, but this could be a good thing for email marketers.  Browser-based email programs generally render HTML emails nicely (um, because browsers are built for rendering HTML?) but they do have little idiosyncrasies, like spotty CSS support (we discuss this in point #6 in our How to Design HTML Email guide). We’ll post any special coding considerations we find for LotusLive iNotes here on our blog, so stay tuned.