
Show HN: Responsive Email Templates - forrestkoba
http://www.zurb.com/playground/responsive-email-templates
======
maqr
Am I the only one who is far less likely to read an HTML email? If I see that
I need to click to allow external images for my email to load, I'm probably
just going to delete it. It's amazing to me that HTML email can be effective
for marketing.

If you send me a paragraph of text, I'm going to read it on my mobile. If you
send me an HTML email, I'm going to archive it right away on my mobile. If you
send me too many HTML emails, I'm going to eventually be motivated enough to
find your 'unsubscribe' button.

~~~
joshfraser
I did some A/B testing on this a few years ago and found that HTML email had a
better response rate for me. My methodology wasn't perfect, but I shared the
results on my blog anyway: [http://www.onlineaspect.com/2008/01/25/the-value-
of-split-te...](http://www.onlineaspect.com/2008/01/25/the-value-of-split-
testing/)

~~~
huhtenberg
That was 4 years ago. Things change way too fast for your sampling to remain
relevant for this long.

~~~
adrianhoward
It's been what I see in tests too. A well designed HTML mail will generally
beat a plain text mail in response rates... including the one we did for
$client last week ;)

------
kevinconroy
If you're designing email HTML from scratch, Campaign Monitor's guide to CSS
is incredibly helpful for knowing what to use and what to avoid.

<http://www.campaignmonitor.com/css/>

I've also found Litmus to be an incredible resource for cross-client test
(Outlook vs Gmail vs Yahoo! vs ....). If you send a lot of emails as a part of
your user retention strateg it's vital that you test this. You'll be amazed at
how different they look and how a few hours of tweaking can optimize things
across a large number of clients.

<http://www.litmus.com>

~~~
snprbob86
Also useful, automatic CSS inlining: <http://premailer.dialect.ca/> &
<https://github.com/alexdunae/premailer/>

------
sambeau
If you are sending emails to business clients support for Outlook 2000-2003 &
Outlook 2007 is still essential. I'm afraid you need to code them like it's
1999. MailChimp have a guide on how to do it right:
<http://mailchimp.com/resources/guides/email-jitsu/>

Fortunately a <table> is (and always has been) responsive.

For non-business clients (who would be unlikely to use Outlook at all) these
look great.

~~~
arocks
Outlook is the IE6 of the email design world.

~~~
Jgrubb
I'd actually say it's more like the IE5 for Mac of the email world.

------
Samuel_Michon
From the accompanying blog post: _"Here at ZURB, we believe that everything we
do has to consider the mobile experience."_

You might want to consider making the project page responsive.

Also, the tweet box is way off to the side, I had to resize my window to fully
see it.

<http://www.zurb.com/playground> serves a separate mobile optimized page, but
the link to the responsive email templates points to
<http://www.zurb.com/responsive-email-templates>, which doesn't exist.

------
jrochkind1
I am new to having HTML email sent.

What do folks do with the large (large in this case anyway) stylesheet, that
actually works with actual email clients?

Link it with a <link> tag? Plop it all into a <style> tag? (where?) Something
else?

What are current best practices for sending html email that needs a non-
trivial stylesheet like this? Googling around, i'm still left not sure; many
pages I find make recommendations that would make using these templates tricky
(although some of them are a couple years old or more).

~~~
ludwigvan
Here are some resources I have found useful regarding email newsletters. Some
of these seem to have some nice advice about how to test, how to aid user
interaction too:

\- <http://www.htmlemailgallery.com/>

\- <http://litmus.com/blog/>

\- <http://blog.mailchimp.com/>

\- <http://www.campaignmonitor.com/blog/tips-resources>

\- <http://www.campaignmonitor.com/css/>

\- <http://www.emailology.org/>

\- <http://www.emailonacid.com/blog>

\- <http://directmailmac.com/>

Basically, avoid floats, use tables, use inline styles.

Also, on OS X, if you can save the source of email newsletters sent to you as
an html file (Cmd-Opt-U -- select the html portion), edit it to your liking,
open it in Safari, then Cmd-I Cmd-Shift-T (Format - Make Rich Text if plain
text is default) to send it as an unmodified HTML email from Mail app.

~~~
jrochkind1
> Basically, avoid floats, use tables, use inline styles.

Yeah, that's what I was finding too -- and that advice is pretty much
incompatible with the "responsive email templates" offered in the OP, no?
That's what I'm wondering about.

------
chrishenn
I've never come across a website that I felt needed a responsive layout,
though I regularly think emails are a pain to read on a phone if they use
html.

However, most html emails are marketing emails, so I'm still not sold of the
idea of responsive templates. The emails I really care about are plaintext
(the best type of responsive design---so simple!)

------
nthitz
Here's their technical writeup on the process,
[http://www.zurb.com/article/1119/create-emails-for-any-
devic...](http://www.zurb.com/article/1119/create-emails-for-any-device-
introducing-)

Curious, they use the <table> element to get around the lack of media queries!

------
hk__2
And what about _real_ e-mail, e.g. text-based? An e-mail is not a webpage, for
me it’s nonsense to put HTML in it.

~~~
biot
If you receive a book from Amazon via snail mail, do you expect the entire
book to be in Courier 10pt with no use of images, color, or other fonts, even
for the cover? Do you expect ASCII illustrations in the book? Why would you
expect something different for email then?

------
DigitalSea
As a web developer who does at the very least one HTML newsletter per month
for a client, this is a breath of fresh air. Developing a HTML email is like
developing a website in 1995. No Javascript, flaky support for most CSS
attributes, the fact you have to use tables for layout, the fact you have to
use a premailing tool to bring all CSS inline to work correctly (especially
for clients using Lotus Notes 6...) they're a pain in the ass.

I will definitely considering integrating these into my workflow.

~~~
joshfraser
I find it very nostalgic since 1995 was around the time I started making
websites. Now, email templates are the only place I get to show off my mad
table-making skills. No one else seems to appreciate them.

------
charleshaanel
If you spend time in direct response circles, the matra is A.B.T. - always be
testing.

An addendum to that might read "ABV" - always be valuing (visitor value, that
is).

I've personally tested both. It really depends on how html vs. text affects:
a) your open rates b) your clickthrough rates c) your sales conversion rates
d) your long term lifetime value and visitor value.

It's very dangerous to make decisions about "html vs. text" based upon one's
own personal preference - or even HN readers (unless that's your target
audience).

What do you know about your audience? That's what I always say when chatting
with friends and colleagues.

As an example, are the majority of your users using gmail, hotmail, yahoo,
aol? Or, are they using personal and/or academic addresses?

These different mailing providers treat html vs text quite differently.

The style of your email can affect whether or not you get inboxed (hence every
action step from open rates, to ctr rates to sales will be affected).

What's the demo of your audience? If one has an older crowd, perhaps plain
text may be easier to read.

A younger crowd? Perhaps xyz percentage more of them are reading via mobile
devices. This would also affect the decision.

The Email Experience Council at the DMA has some great research on this topic
- check their Youtube channel.

But above all I'm a big fan of making data-driven decisions based on a clear
awareness of what your audience's behavior suggests - not on personal
preferences or HN likes - IHMO.

Also HTML may be more appealing but text may drive more goal conversions.

Has anyone else seen better overall ROI with text, even though they personally
have more of a preference for HTML?

added: <http://www.emailexperience.org/>
<http://www.youtube.com/user/EmailExperience>

------
smickie
I just don't see the point in responsive emails at the moment, all of our
smart phones have the technology to support big beautiful newsletters that you
can get on desktop/web email clients.

If I receive a 600px wide email on my iPhone I can zoom and pan around it. I
feel the same way about websites, I don't want my mobile browser to redirect
me to a crippled mobile website with half the content. Especially when I have
a browser designed to view desktop websites on a smaller screen.

I think we should wait and see if responsive emails are just a fad or is going
to become the mainstream.

That being said, this is a fantastic tool for creating responsive emails.

Shameless plug: I made <https://www.mailrox.com/>

~~~
nc
It's easier to just scroll rather than pan and zoom.

------
eps
Which emails clients have you had these tested in?

~~~
forrestkoba
We just updated the post with a list of email clients we tested!
[http://zurb.com/article/1119/create-emails-for-any-device-
in...](http://zurb.com/article/1119/create-emails-for-any-device-introducing-)

------
gaoshan
I have developed a number of HTML newsletter templates over the years and when
I checked their Supported Email Clients table I found that they claim to have
not tested these against Outlook 2007.

Personally, I bet they DID test them against Outlook 2007 and when they saw
the amount of work that would be involved in making them render at least
somewhat correctly they held a staff meeting and decided it would be more
effective to just put a big red "X" in that column and I don't blame them for
it one bit.

~~~
Benferhat
Agreed, the use of the word "untested" is a little off-putting. Just call it
"unsupported".

------
vlokshin
These are great, thanks for sharing!

It'd be fantastic to get something like this for app-based communications
(sign-up, notifications, PW change, etc), and there may be just as much of a
reach as with campaign marketers.

Tons of people try to build responsive/multi-platform apps these days, but
responsiveness in the communication to their users is a gaping hole. Every app
we build, I feel like we start from scratch in putting together
notification/communication emails (outside of campaigns).

------
makmanalp
These are awesome, but how is the backwards compatibility? I know I've seen
coworkers having to deal with old versions of Outlook and Mail.app using
terribly outdated rendering engines, not to mention strange-ass quirks that
are even harder to test for than browsers. Web based clients are their own
mess. Some escape certain things, some don't.

The final conclusion was to stick to table layouts for a few more years. Has
this changed?

------
muan
According to campaign monitor([http://www.campaignmonitor.com/resources/will-
it-work/email-...](http://www.campaignmonitor.com/resources/will-it-
work/email-clients/)), that is 15% not tested 'so far'(support dropped?) Is it
worth it? Nonetheless it does look very interesting. Would be much more
convincing if the preview can be sent to an email address though.

------
motter
I currently use a modified version of
<https://github.com/philwareham/responsive-email> as the template for
<http://coderweekly.com>, but may move to these.

As you can see, I'm already using Foundation on the main website. I've found
it excellent.

------
firefoxman1
Little ironic that the project's page isn't responsive, especially considering
their Foundation framework is a fantastic tool for such tasks (I like it more
than bootstrap). Anyway, it looks great, and thank you Zurb for making such
great tools for all of us to use!

------
nopal
Looks nice, but the page (or blog post) really needs to list which email
clients are supported.

~~~
forrestkoba
We just updated the post with a QA chart of the email clients we tested on!
[http://zurb.com/article/1119/create-emails-for-any-device-
in...](http://zurb.com/article/1119/create-emails-for-any-device-introducing-)

~~~
nopal
Perfect, thanks!

------
fourstar
I like Zurb. I like using Foundation. I dislike this. If I'm reading an email
I want text.

------
laurencei
Perhaps on your homepage you can have an option like "email me a demo now".

Looking in the browser doesnt actually help me test the 'email
responsiveness'.

I'd like an example emailed to me, so I can test on my iPhone, my computer, my
ipad etc.

------
fudged71
Is there anywhere else that I can send HTML emails from? It sounds very
limited and difficult to do, based on your description on your site!

~~~
duck
I highly recommend MailChimp. I use them for my newsletter and the fact you
can start using them for free with up to 2000 subscribers is very nice.

~~~
fudged71
I'm curious more along the lines of personalized emails to users of a service.
As far as I know, MailChimp is more about blasting one message to lots of
people. Unless I'm mistaken :)

~~~
duck
Oh, okay. In that case you want to look at transactional email services.
MailChimp offers that as well with <https://mandrill.com>, but there are a ton
of other offerings as well like <http://sendgrid.com>.

~~~
fudged71
That mandrill site is slick! Thanks for the links

------
emilsundberg
So how does these look on Outlook 2000 - 2007? Love the initiative but it's
impossible to use a template that doesn't work with Outlook.

------
michaelmior
These look really nice! Thanks :) Would you consider putting them on GitHub?
It would be much easier to keep track of them this way.

------
javajosh
Props to the zurb team for referencing Asimov. (Elijah Bailey was the
detective protagonist in the fantastic early Robot series.)

~~~
ryanriddle
Thanks! We're very big fans of Asimov's work. We reference it all the time,
especially Foundation. :)

------
hayksaakian
Hard to read. Sorry. Chrome 18 android gnexua.

<http://www.imgur.com/lsHGw.png>

------
jwarzech
This came at a perfect time for me as I've spent the last week working on
designing newsletter templates.

~~~
dedakia
I'm pretty glad I saw this on the day that I learn I'm undertaking the project
of implementing an email newsletter system :)

------
tommaxwell
Obviously most of the clients that don't support this are built by Microsoft.
Nice job, btw.

------
shill
<!-- If you delete this meta tag, Half Life 3 will never be released. -->

------
jsilence
HTML email is wrong. Period.

------
zalew
go Zurb! I use Foundation <http://foundation.zurb.com/>, playground's joyride
and icon fonts, I hope these email templates are as good :)

~~~
forrestkoba
Thanks for the kudos! Our team has been hard at work on these, and are so
excited to share them with the community. :)

~~~
zalew
keep up the good work. btw you forgot to tweet it on @foundationzurb, only on
@zurb.

~~~
forrestkoba
Done as well! Thanks for the heads-up.

------
obilgic
I will use them as minimalist/simple website templates lol :)

------
onassar
commenting here so i can find this later.

~~~
27182818284
If you upvote the story it will be bookedmarked in your profile automatically.

~~~
Mz
In theory. Not always in practice.

~~~
zalew
what do you mean? it's all in 'saved'.

btw try <https://bitbucket.org/zalew/hackernews> if you want to crawl it to
save elsewhere.

~~~
Mz
If you click on your own name and then click on "saved stories", in theory it
shows you stories you upvoted. Mine is currently blank:
<http://news.ycombinator.com/saved?id=Mz> I have seen others report problems
as well. So I don't rely on that supposed feature.

~~~
alter8
I noticed today that my submitted stories page shows upvote arrows for my
older submissions (as if I hadn't upvoted/submitted them). Only the 20 first
ones have the red asterisk. And my saved stories page does not show old
stories.

So it's not just me. Just to make sure, you know that link only works for
yourself, each user can only see his own saved stories page.

~~~
Mz
Thanks.

