Jan 22, 2008

Showcase: Image-Heavy Email Campaign Trick

Email design from The UnitDo you have an HTML email to send, and you absolutely positively have to make it images only?

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.