Zurb Ink: Responsive HTML Email Framework

[twakefield]

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.

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.

[eli]

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.

[twakefield]

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.

[nej]

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.

[pseut]

>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).

[crisnoble]

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.

[buckbova]

I never needed to get into table hell. I used an image map every time. One image. Define some areas with different links. Bingo.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...

[djjose]

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.

[azio_m]

Huh. While I rarely use them nowadays, I still find tables much easier than divs.

[mmahemoff]

This would go well with Sendy (http://sendy.co/), a pretty awesome self-hosted mailing list tool. Together it's like Mailchimp for hackers.

[xinkr]

Interesting tool. Thanks for sharing.

[dannowatts]

I've been using Zurb Foundation for quite some time and I truly enjoy using the framework, I'm sure I'm going to love using Zurb Ink as well.

Everyone should be giving this a shot, congrats (and thanks) to everyone at Zurb! http://zurb.com/ink/

[kbar13]

For those who want to star/watch the project on GitHub:

https://github.com/zurb/ink

[splatzone]

Lovely framework, but can someone explain why HTML email is so stuck in the past?

Why can't email clients just abide by proper web standards?

[dmix]

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.

[dntrkv]

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.

[mkelly275]

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.

[ye]

Because security and privacy.

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.

[jedbrown]

HTML email allows an unreasonable level of deception. How does your mail client render this?

    <a href="http://evil.host">http://trustworthy.host</a>

If you can't get your message across in a plain text email, you may want to reconsider whether your intent is to mislead.

[rallison]

> 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).

[wil421]

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.

[kbar13]

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.

[cbr]

If you can't get your message across on a plain text web page you may want to reconsider whether you intent is to mislead.

(I love plain text email, but this proves too much.)

[spacehunt]

Your favourite spam filter should be catching that already.

[jhammer]

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).

Disclaimer: I am a developer on Direct Mail.

[AYBABTME]

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?

[theg2]

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.

[mos2]

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.

[rogeriopvl]

The framework looks pretty awesome. But the name choice is unfortunate. Ink is already used for this framework: http://ink.sapo.pt

[denysonique]

There should be an option to email the docs page with examples to one self. In order to preview it in your own mail inbox(s).

[mkelly275]

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

[pearjuice]

Offtopic

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.

[cwilson]

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.

[niteshade]

Zurb just became my favourite company in the world.

[siliconc0w]

Kinda random question but does anyone know of a simple email template app for use for something like internal company emails?

[eli]

Many consumer ESPs have free templates you can download. With a tiny bit of work, you can make them work anywhere. For example: http://www.campaignmonitor.com/templates/all/

[NKCSS]

I've been searching for something like this, great timing!

[wil421]

I can't see any of the images on my iPad using safari.

[mkelly275]

Can you post a Litmus test result or post the code as an issue on the GitHub repo https://github.com/zurb/ink

[chii]

haha, i was just working on emails, and now i see this framework. May be it will save me some effort. WOrth checking out.

[gadders]

Doesn't support Lotus Notes. Doh!

[Kequc]

I imagine Lotus notes would have fallen back to plaintext anyway no?

[hidamon]

doesn't work in iOS 7 Mail.app..

[mkelly275]

Do you have a Litmus test you can post on GitHub https://github.com/zurb/ink

[Kequc]

I sometimes swear apple is on track to be the new internet explorer but on Ink's page it says ios7 is supported, could you expand?

[denysonique]

HTML Email is what sells.

[benched]

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?

[ricefield]

'Responsive' simply means that a layout adjusts itself to the size of the device/screen.

See: http://en.wikipedia.org/wiki/Responsive_web_design

[elm232]

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

[airencracken]

No no no no no no no no no no no no no no.

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.

[ryanSrich]

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"...

I swear all the devs on HN work in product.

[dasil003]

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.

[eli]

HTML Email is here to stay, whether there are nice frameworks for it or not.