Jan 19, 2009

Turn Any Web Page into HTML Email (Part 2)

As we mentioned in a previous post, we’ve implemented some functionality that allows email marketers to create HTML emails by giving us the URL of their web pages. This is really handy if you’re using a CMS to publish news to your website.

But if you’re a developer, there are some pretty cool advanced tricks that you can use behind the scenes.

Advanced Trick #1: CSS Stylesheets for Email Campaigns:

Have you ever heard of stylesheets for printer-friendly versions of web pages? You can do that for your email campaigns, too. Just use media type = email.

<link rel="stylesheet" type="text/css" href="/email.css" media="email" />

When MailChimp grabs the URL to build your email, we’ll find the email-specific stylesheet, and use that instead.

Advanced Trick #2: Conditional Content for Email:

When you publish content to your website that you’d also like to use for your email marketing campaigns, you’ll probably want to embed hidden content that only appears in your email campaigns, but not on your website.

For example,most email campaigns have a different "footer" than you’d have in a web page (with the unsubscribe link, can-spam stuff, etc). Obviously, you’d only want that email footer to appear in your email campaigns.

Just use conditional statements like this:

<!–[if MailChimp]>This content will only show for MailChimp<![endif]–>

Okay, so using "MailChimp" is a bit gratuitous. We just couldn’t resist.

But in the interest of turning this into an actually useful standard that other email services could do, you can also just use "email" in your code, like this (case insensitive):

<!–[if email]>This content will only show for MailChimp<![endif]–>

Both "mailchimp" and the more generic "email" would be recognized by MailChimp.


I asked Chad, our lead engineer, for examples of when you’d want to use these advanced tricks. Here’s what he gave me (the ones I could understand, at least):

  • Use the media=email stylesheet to override your website’s top navigation and replace it with an email-friendly top navigation (without the fancy JavaScript hovers that fail in email programs).
  • CSS positioning doesn’t work well in most email programs. So common 2-column webpage layouts based on "floats" won’t work in your email campaigns. In your email-version, eliminate the side column from your web page entirely (or use conditional statements to switch to table formats if you want to get really hairy with the code)
  • Use conditional statements and email-specific stylesheets to totally hide "side column bars" that appear on your website that you don’t want in your emails.
  • Use conditional statements to add "Dear *|FNAME|*," to the top of your content. That’s admittedly a simple example, but any of our merge tags would work. Like the "translate content" and "share this with others" or the "see most recent campaigns" merge tags.