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.

Embedded CSS often breaks in webmail apps like Gmail and YahooMail. In order to make it work properly, you have to turn it all into inline CSS. Besides making you feel dirty all over, inlining your CSS in HTML email is just plain tedious.

So we made it automatic in MailChimp.

Details and a demo video after the jump…

• tagname
• class
• has attribute
• attribute value equals
• attribute value is one of
• attribute value contains
• attribute hyphen value
• attribute value begins with
• attribute value ends with
• pseudo-classes first-child
• last-child
• only-child
• empty
• not
• nth-child
• child
• descendant
• sibling

Just a little love for our advanced code monkeys.

Yes, I know we’re always preaching that you should never send image-only or very image-heavy HTML emails, because they tend to trigger spam filters. But in the real world, sometimes you have no choice. Sometimes, you’ve got a client with a big brand image that can only be conveyed in big, bold, beautiful graphics.

If you’re ever in that kind of predicament, here’s a trick we spotted from UK-based creative agency (and MailChimp customer) The Unit.

Their client was promoting a big grand opening. In the blink of an eye, it had to be exciting, splashy, and suggest fun and adventure for the entire family (kind of hard to do with words). And it had to get the click.

But The Unit knew that most people would receive the email with images turned off. How could they pull this off in a way that enticed recipients to click that “Show images button” in their email program?

1. Slice the graphic into tiny slits, then stack them vertically.
2. For each graphic “slice” image, add lots of descriptive alt-text (the behind-the-scenes text description that’s shown when people have images turned off). This way, even if recipients never turn their images on, they’ll still be able to read the entire message.
3. Make every single graphic slice link back to their landing page.
4. Don’t neglect the plain-text alternative version of the email. Put as much content in that version as you would in the HTML version, to hopefully balance out your “email karma” with the spam filters.

Here’s what the email looked like with images on (click to zoom in):

And here’s a diagram of how they sliced it up and added the alt-text to each graphic (click to zoom in):

Pretty cool stuff! This is by no means a totally new trick, but it’s the first time I can honestly say that:

1. This particular campaign warrants the heavy use of images, and
2. This particular campaign warrants the alt-text trickery to go with it.
3. They kept the footer as text, which shows these guys weren’t trigger happy with images. They know what they’re doing, and this was all deliberate and scientific.
4. They made it as “fail-safe” as humanly possible. Nice.

Kudos to The Unit for their work, and because on top of all this techno-trickery, the email looks great.

Bonus tricks for image-only HTML Emails

1. Only send to people you know can open images: Here’s an idea from Mark Brownlow on how to target your list so that you only send to people who can actually read image-only emails (and we show you how to do that in MailChimp).

2. Check your work before you send to your list, with the MailChimp Inbox Inspector. See what your emails look like in all the major email programs, with images on, images off, and preview pane in vertical/horizontal modes. Plus, check whether or not your campaign will make it past the spam filters.

3. Another alt-text “hack” for HTML emails. Use CSS to make format the alt-text for some images with colors and styles.