Hacker News new | comments | ask | show | jobs | submit login
Zurb Ink: Responsive HTML Email Framework (designinstruct.com)
396 points by jggube on Nov 7, 2013 | hide | past | web | favorite | 98 comments

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.

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.

Just a tip: if you authenticate your domain, GMail will display the images. See: https://support.google.com/mail/answer/81126?hl=en#authentic...

I don't think that's actually true. I'm pretty sure the recipient has to reply to your messages before images will start loading by default.

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.

Thank you for the clarification, it makes sense.

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.

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.

I see, thanks for the quick reply. Currently using Email on Acid for verifications and testing, maybe will move onto Litmus at a later stage. Thanks!

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

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


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.

So what do the majority of recipients see (who don't have images load by default)?

Um, I'm pretty sure he was joking.


Quite a few people do exactly that.

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.

and alert saying "There are images in the mail that have been blocked for your safety." and an option "Unblock Content"

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.

How does it work in Gmail / Yahoo etc where images are blocked ?

This was pre-image blocking. Not sure how this would work now.

I assume there's a big empty table where the image would go and some text+links above and below the image.

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

[1] https://github.com/rennat/pynliner

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.

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

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

Interesting tool. Thanks for sharing.

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/

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


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?

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.

We’ve seen similar results at our company. Plain text emails always get more click throughs in A/B tests.

And personally I prefer them. If I must use html, I only stick to the basic styling elements with no css.

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.

Unfortunately the template they used in the email failed to render on outlook...

<!-- [!mso] -->

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.

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.

Check out Ink's block-grid (http://zurb.com/ink/docs.php#block-grid). It's a lifesaver for working with Gmail mobile. Alternatively, if you don't need Outlook support, ZURB's original responsive templates support Gmail mobile quite well (http://zurb.com/playground/responsive-email-templates).

Thank you for the explanation, that's insane.

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.

You can read more about it here: http://www.email-standards.org/blog/entry/microsoft-to-ignor...

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.

Guess its a pity Microsoft never heard about sandboxing, eh?

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.

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.

Nope apparently all that matters is shiny. The short nearsightedness of some of these comments is amazing.

Kudos to be reasonable.

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.

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

HTML e-mail is required for marketing? Hardly. Also "look better" is massively subjective.

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.

The desire for pretty isn't an excuse to be insecure.

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.

Not to the Business. I am required to have links in my signature so at the very least I will always have one hyperlink on every email I send.

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.

So send both!

Multi-part mime types for a html and a text email for those of us who don't read HTML in our email :)

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

Company wide emails or email signatures give a better impression to people if they are pretty, leadership likes that.

Your favourite spam filter should be catching that already.

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.

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.

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

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

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.

Zurb just became my favourite company in the world.

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

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/

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

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

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

Meant to get back yesterday - For some reason it worked when I tried about an hour later. I dont know if it was my connection or not.

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.

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

Doesn't support Lotus Notes. Doh!

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

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

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

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?

HTML Email is what sells.

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?

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

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

Exactly, Ink uses media queries to modify the layout for different devices.

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

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.

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.

Why do emails need to be designed in the first place? Honest question.

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:

- http://www.fastcodesign.com/3019604/design-50/design-in-30-s...

- http://articles.latimes.com/2013/sep/30/business/la-fi-mo-wo...

- http://www.hackdesign.org/lessons/1

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.

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

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact