
Zurb Ink: Responsive HTML Email Framework - jggube
http://designinstruct.com/tool/responsive-html-email-framework-zurb-ink/
======
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](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.

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

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

------
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...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/map)

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

~~~
elwell
Um, I'm pretty sure he was joking.

~~~
eli
_shrug_

Quite a few people do exactly that.

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

------
mmahemoff
This would go well with Sendy ([http://sendy.co/](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/](http://zurb.com/ink/)

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

[https://github.com/zurb/ink](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?

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

~~~
splatzone
Thank you for the explanation, that's insane.

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

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

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

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

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

------
jhammer
If you don't want to sign up for a Litmus subscription, you can use Direct
Mail for OS X ([http://directmailmac.com](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](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](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/](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](https://github.com/zurb/ink)

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

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

------
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](https://github.com/zurb/ink)

~~~
hidamon
iOS 7: [http://imgur.com/N7NIWW4](http://imgur.com/N7NIWW4) iOS 6:
[http://imgur.com/wekWLJZ](http://imgur.com/wekWLJZ)

------
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](http://en.wikipedia.org/wiki/Responsive_web_design)

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

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

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

~~~
ryanSrich
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://www.fastcodesign.com/3019604/design-50/design-
in-30-seconds-nike-on-why-design-matters)

\- [http://articles.latimes.com/2013/sep/30/business/la-fi-mo-
wo...](http://articles.latimes.com/2013/sep/30/business/la-fi-mo-worlds-most-
valuable-brands-apple-coca-cola-20130930)

\- [http://www.hackdesign.org/lessons/1](http://www.hackdesign.org/lessons/1)

