This is great to see and long overdue. We get a lot of customers that ask about how they should create email templates. We don't really want to go down that path, so we'll be happy to direct them here.
Also, +1 on using Litmus for testing rendering across different clients.
There are also other things to consider when designing email templates and email deliverability in general.
- Always use multi-part, with a nice text part. Not having a text part is a spam flag.
- Keep the ratios of images and links to text low. High ratios are spam flags. Also, most of the time images will not be displayed by default.
- Use common sense, avoiding exclamations and referencing spammy words (eg. buy now!).
- Avoid link shorteners (commonly used in phishing emails)
- Use Litmus to test against spam filters to see where common sense fails.
- mail-tester.com is another nice free tool for checking for spam flags.
- There are also some little things that can trip you up, like having malformed message-Ids where the domain in the message-ID does not match the sending domain.
Edit: Also, PLEASE only send emails to people that have given you (like on your website) permission and you have validated the email address with a confirmation link (double opt-in) before sending subsequent emails. Always give recipients the conspicuous and easy ability to unsubscribe.
Another important one: optimize the design for display without images. Most email clients block images by default, so that's how most people are first going to see it. (The notable exceptions are Apple Mail and iOS Mail which load images by default.)
With the notable exception of iOS Mail.app and OS X Mail, virtually all email clients block images by default.
Outlook displays (embedded) images too by default (that's why lots of people include them in their signatures).
I think that href images are (correctly) blocked, because they pose a security and privacy risk. That, and the only group who uses them are email marketers. If I want to see your catalog, I'd open your website.
You might have guessed, but yes, I do mark those image-mails as spam (and any mail where I can't find and 'unsubscribe' within 2 seconds).
I wonder if Americans have less trouble with this. When I was last in NY the quantity + obnoxiousness of the advertisements shocked me - we're more used to being blitzed by Germans, not by marketing. Compared to that having an inbox full of brightly colored marketing mails is restful..
Embedded images don't have very good support across clients, which makes them pretty hard to use effectively. They will not appear at all in gmail, for example.
Also, it's not very nice to mark messages as spam just because you don't like their design (it affects other recipients). Unless it actually is spam, then mark away.
One other suggestion that's kind of fun - put an easter egg in the text part. Depending on your customer/user base, there may be a lot of people that view text only. We've gotten some nice feedback doing that.
You being a Co-Founder of Mailgun, I know you have a way stronger background in sending emails than I do (almost non existent), but I thought they (Other ESPs [Exact Target, Responsys, Etc.]) debunked the idea that using phrases like "Buy Now!!!" or multiple exclamations marks increases the chance of an email getting marked as spam. Can you please clarify? I'm interested to see if this still applies. Thanks.
I thought they (Other ESPs [Exact Target, Responsys, Etc.]) debunked the idea that using phrases like "Buy Now!!!" or multiple exclamations marks increases the chance of an email getting marked as spam
I send over 150k e-mails per week and have noted that if you bundle together things like "free", ALL CAPS, and exclamation marks, you're going to impact deliverability (as measured through open rates). The key is not just one of these things but actually piling them on top of each other.
Gmail can be very touchy in throwing you to the spam folder if you end up with things like "FREE!!" going on, yet it will be fine with something like "free" or "yay!!"
Gmail's spam filtering seems to be extremely user specific though, so we might see a drop in open rates on Gmail when certain things are included in a mail, but it'll never be absolute and is very hard to objectively prove. You just get a feel for trends over the course of sending hundreds of campaigns.
That may be the case at the more sophisticated ISPs (gmail, yahoo, etc.) but I think it's still worth consideration. There are a lot of old school email servers and spam filters out there. I would suggest using tools like litmus and others because the "stop words" are not always intuitive.
>Always use multi-part, with a nice text part. Not having a text part is a spam flag.
Just to add: try to make the text part readable and useful too. I've unsubscribed from countless mailing lists because the text was illegible from extremely long URLs thrown in the middle of sentences or useless because the links were missing completely (I use mutt).
Anyone brave enough to bring a semblance of sanity to the world of HTML emails deserves major kudos. For kids like me who did not grow up making table layouts, coding emails is a nightmare. Oh the <td>'s. I am so glad Zurb is lending their knowledge building of excellent frameworks to this widely underserved market.
Except you would most likely have a high rate spam rate and a major number of recipients won't be able to see your content without downloading images first.
You will get a better response with a text only message.
LOTS of game related companies use the "image map" method because, as we all know, games are audio/visually awesome and cannot possibly be represented by plain text emails.
In my case the result is: Big red placeholder image and copyright text /unsubscribe link underneath it.
This might work for one off emails where your user base is expecting it. But try to A/B test the headline, or better yet customize it for each subscriber, now you have to make many variations in photoshop -> export -> map -> send. You could imagine this getting out of hand fast.
If you get a HTML template you can use mailchimp or exact target to put custom html to each subscriber / subset and do A/B tests. It takes more time up front, and limits what you can do (er outlook / gmail limits that) but if you get it right it will pay off down the line.
Honestly, even for someone that started his career making table HTML layouts with inline styling it's a major PITA to code up emails that look respectable on all clients. I can't wait to try this out.
If you are programatically generating emails, there are libraries for most popular languages that will convert an external stylesheet into inline styles - for example, pynliner [1] for Python.
They let you write HTML and CSS, test in the browser, and only at the last moment convert `p { text-color: #333 }` and `<p>..</p>` to `<p style="color: #333">`
I spent a ton of my childhood building HTML table layouts, especially forum skins. Maybe it's because I'm now spoiled by lovely CSS and established web standards, but the thought of coding any HTML email up makes me sick.
I prefer succinct plain-textish emails linking to HTML websites over HTML-heavy emails in most situations.
I've personally found plain-text often also converts better than most HTML-heavy newsletters.
Most HTML is pigeonholed into email where it doesn't fit well, for example the variety of unpredictable clients and devices. I'd rather serve that via the browser where full CSS/HTML is supported.
Mobile is helping by standardizing webkit but we're still far from it being a good delivery mechanism for a web experience.
I feel the same way about plain text, but I can't help but wonder if I'm part of a nerdy minority. I know my mum finds her image heavy emails from eBay useful, for instance.
I think it was around Outlook 2007 Microsoft decided that instead of using Internet Explorer to render their emails, they would use Microsoft Word. That's right. Word. And now whenever you try to use even the most basic CSS rules, Outlook fucks it up very badly. Then there is that abomination called Lotus Notes (mainly <8.5). Yes, I have been doing a lot of emails lately and it is the worst experience in web dev I have ever had.
Outlook 2007 makes IE6 look like the best browser in the world.
You left out the most amazing part: they doubled down on the MS Word rendering engine in Office 2013. At one point there was a letter writing campaign to ask them to change their mind.
I've noticed that Outlook, particularly 2007+, will play nicely with CSS so long as your styles are only applied to table elements. Put some padding on a 'p' tag and you won't see anything happen.
Likewise mobile gmail on a phone browser will not render a responsive email. Not sure if ZURB has given that any attention or if they intended to focus on the rendering of native clients.
AFAIK there's no work-around for mobile GMail on a phone. I've been banging my head against it this week. Given up for now and left native Android/iOS mail app users having the better experience.
It is very insane. You would think that after getting such a bad rep with IE that they would make sure they don't get themselves into that kind of situation again, but no. They keep releasing shitty software that holds the rest of the industry back. I never was a Microsoft hater, but in the past few weeks of writing HTML/CSS (if you can call it that) for Outlook support, I have cursed Outlook more than any other piece of software I can remember.
I believe the motivation was that most Outlook users were at corporations who sent/received most of their emails from coworkers who also used Outlook.
What these users really wanted was the ability to edit and format their emails the same way they did in Word. Word really is a fantastic document editor/formatter, and I don't know of any html doc editor that comes close to the flexibility, ease, and power of Word.
So they traded standards for what people really wanted - email that they could format.
If I recall correctly - they did it for security reasons. i.e. Internet Explorer was so full of holes they thought the Word HTML rendered would be easier to keep secure.
In the sense that it did a lot less and thus presented a smaller attack surface, they were right.
The really crazy one is Gmail. It does not support media queries and requires you to inline all your styles. You would expect so much more from Google.
> HTML email allows an unreasonable level of deception. How does your mail client render this?
How does your browser render that? This isn't something unique to emails, and we didn't end up deciding that text only web pages were the way to go. That said, email clients could catch a number of simple cases like that and warn the user (yes, I realize there are ways around that).
> If you can't get your message across in a plain text email, you may want to reconsider whether your intent is to mislead.
While this is true, the reality is that html emails are, basically, required in many cases due to marketing. Generally speaking, html emails are not being created by legitimate business because they want to mislead people. They are being created because they look better (leaving aside the caveat that some businesses aren't very good at the "make it look better" aspect).
Let me rephrase. HTML email is often required due to the requirements of the marketing department at many companies.
As for "look better" - yes, it is subjective. However, given that html email capabilities are a super set of text email capabilities, anything you can do in a text email you can do in an html email. Anything you can do in an html email, though, you cannot necessarily do in a text email. Quite simply, an html email can look better and often does.
Edit: Given that an email can contain both text and html versions, and given that best practices dictate sending both, is this not good enough? You can always set your client to show you the text version by preference. You get your text version, most everyone else gets the html version.
You'll always have that threat. The users don't want simple text. It looks great in html most people wont even know about the risk or even understand it.
Considering that html emails simply are not going away, no matter how much one hates them, isn't the best course of action for us developers to mitigate, as best as possible, the risks presented?
Yes, text-only emails make things much simpler from a security standpoint. Text-only websites were also much simpler from a security standpoint.
I wholeheartedly agree, and we had a discussion about plain text vs html emails at my org a while back.
The problem is that marketing wants designed emails to the customer that catches the customer's eye. For the most part, plain text marketing emails end up TL;DR.
If you don't want to sign up for a Litmus subscription, you can use Direct Mail for OS X (http://directmailmac.com) to run design tests on a pay-as-you-go basis. Also inlines your CSS by default (but can be turned off).
This looks very interesting, I wasn't even aware that email sucked that much.
* * *
Side tracking:
Is email marketing a good thing? I've never looked at any numbers regarding that. I'm genuinely asking the community here.
My intuition would be that it's not; I really hate receiving any sort of pre-formatted email from any service, unless it's Google Groups or something where I receive a message as a result of a human trying to interact with me, personally.
In that sense, I would believe that more, fancier, mass distributed marketing emails aren't what I'm wishing for in this world. But my intuition could be wrong. I'm also the kind of guy who just automatically recycles all the marketing mail I receive without ever looking at it.
So yeah: how effective is email marketing? On the long term, short term?
We use it in the form of a daily newsletter (news site), and originally when I took up speeding up the newsletter process and a redesign I realized I had entered the 5th circle of Hell.
The article is dead on about just how painful it is to create that I thought it would be useless. But the numbers don't lie and a fair amount of our subscribers open and use the service every day. Granted we're not marketing, but we are at least seeing people click on the items in the newsletter.
I am super excited about this. I love the fun visuals, extensive documentation, transparency and honesty about issues with email clients. I think there is huge potential here and I can't wait to see where they go with it. A huge use case that no one is talking about is transactional emails from your web or mobile app. Now you can have great looking emails that increase engagement that look great on mobile email and look (both in design and the underlying code) much like foundation based rails apps.
We've got a bunch of example templates along with test results across different email clients. You can just copy and paste the email into your sender of choice and check it out http://zurb.com/ink/templates.php
Jacob Gube, how is sixrevisions going? It looks like it is really drying out. Have you abandoned it for designinstruct? A shame because it always had really good articles.
Gone are the days of hacking up pre-fab Mailchimp templates! This is wonderful and very timely, I'll be giving this a try for two different projects next week.
Placehold.it might have been down. They're great for development, but a lot of people were probably opening the templates and sucking up their bandwidth yesterday.
The word 'responsive' has been sprayed all over these pages. I take it I'm supposed to read that word a certain way in this context, but I don't know how. Does it mean you can click things? Something more? Something else?
Backing up what ricefield said, responsive design is making something that works well in many different viewing contexts (desktop, mobile, tablet, smart TV, etc). http://zurb.com/word/responsive-web-design
How else would you suggest designing an email? Plain text? Clients aren't just going to be like..."yeah, we don't want any images, or buttons, or fancy designs"...
Whether you're consciously thinking about design decisions or not everything is designed.
The better question would be, why does design matter?
This list could be huge but here are a few common reasons:
- To simplify information.
- To make it more digestible.
- To be engaging. To invoke emotion.
If you blast an average email receiver with a poorly designed wall of text, at best, they might read part of it and drop out half way through. Most of them will archive or delete it without even opening it and another portion will probably report it as spam.
I won't sit here and discuss the complexities of why design matters but here are a few links:
People said the same thing about web design too. "Why can't you make your site simple enough to look good in lynx?"
It's a legitimate point.
However the main thing you should realize is that the world doesn't care. You are not paying the bills for these companies, and thus your opinion is moot. HTML email is popular because it works. No amount of nerd rage will make a dent in that. Don't let that stop you from using mutt and aggressively spam flagging anything without a plain text part, but you might save yourself some embarrassment by not farting into the wind over it.
Also, +1 on using Litmus for testing rendering across different clients.
There are also other things to consider when designing email templates and email deliverability in general.
- Always use multi-part, with a nice text part. Not having a text part is a spam flag.
- Keep the ratios of images and links to text low. High ratios are spam flags. Also, most of the time images will not be displayed by default.
- Use common sense, avoiding exclamations and referencing spammy words (eg. buy now!).
- Avoid link shorteners (commonly used in phishing emails)
- Use Litmus to test against spam filters to see where common sense fails.
- mail-tester.com is another nice free tool for checking for spam flags.
- There are also some little things that can trip you up, like having malformed message-Ids where the domain in the message-ID does not match the sending domain.
For more thoughts, we have a best practices (http://documentation.mailgun.com/best_practices.html)
Edit: Also, PLEASE only send emails to people that have given you (like on your website) permission and you have validated the email address with a confirmation link (double opt-in) before sending subsequent emails. Always give recipients the conspicuous and easy ability to unsubscribe.