One 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).
Link to a landing page
Generally, it’s best to keep emails (and their design elements) simple.
Why?
Deliverability. You don’t want your emails to get marked as spam and be ignored.
Also, many readers will have images turned off by default, so they may miss your design entirely.
If you entice your reader with some simple text and get them out to a web page, anything is possible. There’s no limit to the type of content that you can put on the web.
Your landing page can include video and interactivity (and all that good stuff listed above that’s impossible in an email).
And it’s pretty simple to link out to other parts of your site. Here’s a video where I create a landing page from InDesign and link it to other pages.
Check out the in5 customer showcase for examples of sites & landing pages created with InDesign & in5.
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.
If you want to include some motion to create engagement, consider using an animated GIF.
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.
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).
