Zurb Ink: Responsive HTML Email Framework
designinstruct.com
designinstruct.com
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.
With the notable exception of iOS Mail.app and OS X Mail, virtually all email clients block images by default.
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..
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.
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.
PS. Also Peter, thank you for starting and sending out the weekly JS, Design and HTML5 newsletters, I'm subscribed and read 'em all, very resourceful.
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).
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">`
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
I assume there's a big empty table where the image would go and some text+links above and below the image.
You will get a better response with a text only message.
Quite a few people do exactly that.
In my case the result is: Big red placeholder image and copyright text /unsubscribe link underneath it.
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.
Everyone should be giving this a shot, congrats (and thanks) to everyone at Zurb! http://zurb.com/ink/
Why can't email clients just abide by proper web standards?
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.
And personally I prefer them. If I must use html, I only stick to the basic styling elements with no css.
Outlook 2007 makes IE6 look like the best browser in the world.
In the sense that it did a lot less and thus presented a smaller attack surface, they were right.
You can read more about it here: http://www.email-standards.org/blog/entry/microsoft-to-ignor...
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.
That little comment is a life saver.
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.
There's a very good reason why your email client doesn't display images by default.
Imagine every major email client allowed using HTML5/CSS3.
One day somebody discovers a bug that allows you to execute random code. Now all you need to deliver a trojan to millions of people is mass-email it.
Kudos to be reasonable.
<a href="http://evil.host">http://trustworthy.host</a>
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.
Multi-part mime types for a html and a text email for those of us who don't read HTML in our email :)
(I love plain text email, but this proves too much.)
Yes, text-only emails make things much simpler from a security standpoint. Text-only websites were also much simpler from a security standpoint.
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).
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.
Disclaimer: I am a developer on Direct Mail.
* * * 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?
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.
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.
NO
HTML e-mail was and is an awful idea.
My MUA doesn't need to be a browser as well. Stop the madness, please.
I swear all the devs on HN work in product.
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:
- http://www.fastcodesign.com/3019604/design-50/design-in-30-s...
- http://articles.latimes.com/2013/sep/30/business/la-fi-mo-wo...
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.