What’s the Difference Between an HTML5 Email and a Unicorn?

Justin | HTML5,InDesign | Wednesday, February 11th, 2015

email iconOne is a mythological creature and the other one has a horn and dances on rainbows in the sky.

Chances are, you’d love to have a rich way to engage with your friends and customers in the comfort of their email client. I would, too. Unfortunately, there are many obstacles to accomplishing this, and no great solutions.

Why Can’t I Do That in an Email?

I get this question often from people who are interested in using in5 to convert their InDesign layout to an HTML email. Unfortunately, there’s no good way to convert a layout from a design application into an HTML email with a high level of fidelity. There are tons of different email clients and most of them don’t support many of things that we’ve taken for granted on the web for many years. For instance, the following items are limitations in most email clients:

  • No JavaScript (which rules out any interactivity—on the flip side, this is a good security feature within an email client)
  • Minimal CSS support, including no absolute positioning (like the positioning used in InDesign or Photoshop)
  • No header and no ability to include external files (so CSS all has to be placed in inline style tags)
  • No font embedding, which limits you to web safe fonts
  • No Audio, Video, or Plugins
  • No form elements

There are also more comprehensive lists of supported and unsupported features from MailChimp and Campaign Monitor.

What to Do Instead

Here are a few ways to approach the problem (granted, none of them scratch every itch).

Note that the new SimpleHTML export will export text, tables, images, and hyperlinks that can be easily copied into an email, but it will not copy the InDesign layout.

A single image

This image may or may not link to a richer site. Perhaps it’s a preview of the site itself, like a poster image on a YouTube video that is visible before you click to play the video.

Pros: Simple to produce, can be visually rich, can use any fonts inside the image.

Cons: Many email clients might hide the image (make sure to use ALT text), no actual text in the email, can only include a single link.

Attach a PDF

This may be the best option for some longer messages that require a complex magazine-like or catalog layout.

Pros: Great layout capabilities in the PDF.

Cons: Forces the user to open something, doesn’t track if the document has been opened (like a link would when clicked), may be filtered as spam.

A table of images

The is the old school method of HTML layout (before CSS improved). You can still accomplish this using the slice tools in Photoshop and Illustrator. You can also use a table to combine text and images.

Pros: Can have multiple links, can include actual text, layout is preserved.

Cons: Layout may be inflexible, images will be hidden by some email clients by default.

Use a template provided by an email marketing vendor

This is probably the best solution for most people. It won’t allow you to work outside the bounds of your target delivery system (as InDesign or Photoshop would), and you can still use a WYSIWYG visual editor. Chances are good that you can find a decent template with an email marketing service (like MailChimp, AWeber, Constant Contact, or similar). This option deals with the reality of the situation. Your email is a bit like a resume, you want people to notice it, but it’s possible to overdo it and look unprofessional. A template keeps you in the “professional arena” and relies on your content to set your email apart from the other messages in your reader’s inbox.

Pros: Easy to use, likely to work in all major email clients, some templates are even responsive.

Cons: May seem less unique, cannot be created in your favorite design applications.

Hand code the email

You can always code the email yourself, as long as you know what you’re doing. If you’re interested in hand-coding or having a more flexible and innovative email, I highly recommend Chris Converse’s Responsive Email course on Lynda.com. Don’t have a Lynda.com account? Get 30 days of free unlimited access to lynda.com. And check out these basic tips from MailChimp.

Pros: More control, responsiveness (if desired).

Cons: A lot of work.

Final Thoughts

When in doubt, just keep it simple. The goal of most marketing emails is to get your reader somewhere else (like a website where they could buy your product). In that case, focus on communicating why it would be a benefit to the reader to click your link. And then, the sky is the limit on their interactive experience (once they’re out of their email client).

Eureka! More Web Problems Solved

These FREE email lessons will deliver solutions to your inbox over 3 weeks and share techniques with you to solve the toughest of web problems.

We respect your privacy. Powered by ConvertKit

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *