The following is a guest post by Matthew Dunn. Matthew is the founder and Chief Explainer at Say It Visually, creators of Vid.One, Fast Forward Stories and other visual-communication services. He’s been a startup CEO, corporate Senior VP & CIO, Microsoft veteran, professor, and teacher. He is also an award-winning writer, designer, director, inventor. Matthew holds a Ph.D. in Digital Media and an MFA in Directing.
Your inbox – and mine – are the focal point of one of the strangest effects of the network era. Email is the biggest and best-ROI digital marketing channel (Direct Marketing Association. “$38 is made for every $1 spent on email marketing”) – yet it’s the most backward, awkward and design-unfriendly channel in use.
Standards that still dictate how messages can be designed, and what they can do, date from 1992. Most of the key technologies of the Web, such as Javascript and CSS, and even HTML5, don’t work in email. Email messages don’t run scripts, can barely handle fonts, aren’t completely reliable with images and almost none of them can play a video. But a 38x ROI is pretty hard to ignore – so what do you do?
In the past year, we’ve grappled with the limitations of most of the major email marketing platforms. We’ve successfully integrated our platform for creating short marketing videos (Vid.One) with over a dozen, pushing ready-to-use email templates and graphics into those systems to help marketers get on with the job. I’ve had tabs open for 10 different email systems at once, toggling back & forth trying to make them deliver decent-looking content. This post synthesizes some of the key things we learned in that process.
Before you read on - we have various resources that show you exactly how to use social networks to gain massive traffic and leads. For instance, check out the following:
FREE Step-by-Step Twitter Marketing GuideFREE Pinterest Marketing Ebook
Gray Hair & HTML
To work with email design, you have to get your hands down in the tags & tables. If you’ve been around the Web long enough to remember tables, it’s an advantage. If you’re used to letting Dreamweaver or WordPress or Webflow make things look pretty…sorry, you’re going to have to get your hands down in the tags & tables for email.
For instance, what would look like this in HTML email:
would look like this in the HTML source:
I find it helpful to orient people to this by asking them to look at the source code of an email message in their inbox (View Message – Raw Source in Apple Mail, for example.) It’s fun to watch their face when they see row after row of 78-character strings. Yup, that’s right – email messages are (still) chopped up into 78-character lines. You don’t have to do the chopping when you author email, but it drives home the point that older standards still rule the inbox. Hunt for a tutorial on tables if you haven’t touched them in a while.
How To Make Great Looking Email Templates
The baseline of making great-looking email templates is to buy or borrow great looking templates. Starting with a blank page and a <!DOCTYPE html> tag is just nuts – your ROI will go right up the chimney, and so will your design team. When I said that CSS doesn’t work in email, I meant “like it does anywhere else.” Email clients generally support inline CSS styles – so you’d start that hypothetical blank page with a huge swath of hand-coded CSS inline style definitions.
If you understand CSS well enough to do that, you probably don’t need to read this post, and you probably don’t want to hand-code inline CSS styles.
So buy, barter or borrow templates that get close to your dream. Then modify them.
Pass the Litmus Test
The leader in the arcane art of email templates is Litmus (litmus.com), an online tool/service for email design. They provide a ton of templates, an email code editor (‘Builder’) and a crazy-great array of testing tools because – as you might have guessed – not every email client does things the same way.
Hey, before you read on - we have in various FREE in-depth guides on similar topics that you can download. For this post, check out:
FREE workbook: CREATE AWESOME BLOG POSTSFREE Beginner's Guide: START A BLOG
Litmus Builder
If email design matters a bunch to your business, you probably want to look at a Litmus subscription. If you don’t have the budget, or you like stabbing your leg with forks & hand-coding inline CSS, you can still learn a ton from the Litmus community.
Your Email Service
If Litmus isn’t your color-code, and if you’re already fairly entrenched with a particular email service provider (“ESP”), then your ESP’s support, help, and templates are probably the next-best source.
We found the quality of templates supplied by ESPs widely variable. Many of them have finally gotten around to making templates responsive (adaptable to different devices), but not all. The ones that haven’t aren’t necessarily keen to say that – they’ll throw in the word “responsive” but their template will go wonky or tiny on your smartphone.
Trolling through ESP templates is draining. Only a few of them provide built-in proofing tools to show how a design will look on desktop & mobile; if they do, they probably have decent responsive templates already and you don’t need the tool as much. If they don’t have the tools, their templates are more likely to need testing, which is just a drudge.
Since Vid.One works with most ESPs, it would be rude to point out by name which are weaker at email templates & designs. I think it’s fair to say that a robust selection of good templates, coupled with good design tools & responsive previews, are a key criterion in selecting an ESP.
Why Isn’t Someone Doing Something About This!
Some of the larger ESPs have taken on email-design limitations by doing what you’re really not supposed to – creating their own standard. MailChimp and Campaign Monitor, for example, both have their own proprietary HTML tags for use in email templates. If their editor ‘sees’ the tags, it will do a much friendlier job handling your custom template. The down-side is, the tags aren’t standardized so your template isn’t really portable between systems. (We elected to create MailChimp and Campaign Monitor-specific templates, using their tags.)
That leads to a word about online layout editors for email. It’s very difficult to create a great layout environment within a web browser, but many ESPs have done it. They range from Lego-block simplicity to C++-might-be-easier convolution, but we finally learned to look for one key signal in any editor. If there’s no HTML source view – if you can’t get into the tags within that editor – there are a range of things you might want to do that just won’t be allowed.
I get the trade-off – keep it so simple that people don’t get lost. But when you want to tweak, or embed, or add a linked image, or something else…and the editor just smiles and says no…sooner or later, you’re probably going to outgrow that ESP.
Bottom line – email design is unavoidably frustrating; we’re trying to meet 2017 tastes within 1992 constraints. There’s no magic workaround; good-looking, responsive templates take time & testing. It’s worth investing the time in finding a proven template first, then modifying it to meet your needs. If email is someone’s near-full-time job, get them a Litmus subscription. And if you want video to crank up campaign ROI even more – take a look at Vid.One (https://vid.one).
Do you want to start your email marketing? Do you need some help with the basics of list building and newsletter best practices?
Get our free ebook “Email Marketing Recipes” – and get email marketing tips that will help you start your email marketing the better way.
