11 ms·

Show HN: Responsive Email Templates

• michaelmior 14y ago
  These look really nice! Thanks :) Would you consider putting them on GitHub? It would be much easier to keep track of them this way.
• vlokshin 14y ago
  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).
• nopal 14y ago
  Looks nice, but the page (or blog post) really needs to list which email clients are supported.
  • forrestkoba 14y ago
    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-introducing- http://zurb.com/article/1119/create-emails-for-any-device-in...
    • nopal 14y ago
      Perfect, thanks!
• jrochkind1 14y ago
  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).
  • Samuel_Michon 14y ago
    Use the CSS Inliner Tool: http://beaker.mailchimp.com/inline-css http://beaker.mailchimp.com/inline-css Also, read MailChimp's study on responsive emails: http://mailchimp.com/resources/guides/html/email-on-mobile-devices/#chapter-06-dipping-into-design http://mailchimp.com/resources/guides/html/email-on-mobile-d...
    • nnnnnn 14y ago
      To add to Sam's comment, if you're using Rails, try: https://github.com/fphilipe/premailer-rails3 https://github.com/fphilipe/premailer-rails3 There are a few gotcha's with the gem but overall it works pretty smoothly!
  • ludwigvan 14y ago
    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://www.htmlemailgallery.com/ - http://litmus.com/blog/ http://litmus.com/blog/ - http://blog.mailchimp.com/ http://blog.mailchimp.com/ - http://www.campaignmonitor.com/blog/tips-resources http://www.campaignmonitor.com/blog/tips-resources - http://www.campaignmonitor.com/css/ http://www.campaignmonitor.com/css/ - http://www.emailology.org/ http://www.emailology.org/ - http://www.emailonacid.com/blog http://www.emailonacid.com/blog - http://directmailmac.com/ 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 14y ago
      > 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.
  • 14y ago
• eps 14y ago
  Which emails clients have you had these tested in?
  • forrestkoba 14y ago
    We just updated the post with a list of email clients we tested! http://zurb.com/article/1119/create-emails-for-any-device-introducing- http://zurb.com/article/1119/create-emails-for-any-device-in...
• Samuel_Michon 14y ago
  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 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 http://www.zurb.com/responsive-email-templates, which doesn't exist.
  • deleted 14y ago
    [deleted]
• zalew 14y ago
  go Zurb! I use Foundation http://foundation.zurb.com/ http://foundation.zurb.com/, playground's joyride and icon fonts, I hope these email templates are as good :)
  • forrestkoba 14y ago
    Thanks for the kudos! Our team has been hard at work on these, and are so excited to share them with the community. :)
    • zalew 14y ago
      keep up the good work. btw you forgot to tweet it on @foundationzurb, only on @zurb.
      • forrestkoba 14y ago
        Done as well! Thanks for the heads-up.
• nthitz 14y ago
  Here's their technical writeup on the process, http://www.zurb.com/article/1119/create-emails-for-any-device-introducing- http://www.zurb.com/article/1119/create-emails-for-any-devic... Curious, they use the <table> element to get around the lack of media queries!
• onassar 14y ago
  commenting here so i can find this later.
  • 27182818284 14y ago
    If you upvote the story it will be bookedmarked in your profile automatically.
    • Mz 14y ago
      In theory. Not always in practice.
      • zalew 14y ago
        what do you mean? it's all in 'saved'. btw try https://bitbucket.org/zalew/hackernews https://bitbucket.org/zalew/hackernews if you want to crawl it to save elsewhere.
        • Mz 14y ago
          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 http://news.ycombinator.com/saved?id=Mz I have seen others report problems as well. So I don't rely on that supposed feature.
          • mandeepj 14y ago
            I wish HN supported saving other stories too (links submitted by other users) instead of saving just your own upvoted links.
            • Mz 14y ago
              Well, keep praying. Perhaps you will get a christmas miracle. (Though I wouldn't recommend holding your breathe.)
          • 14y ago
• motter 14y ago
  I currently use a modified version of https://github.com/philwareham/responsive-email https://github.com/philwareham/responsive-email as the template for http://coderweekly.com 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.
• hayksaakian 14y ago
  Hard to read. Sorry. Chrome 18 android gnexua. http://www.imgur.com/lsHGw.png http://www.imgur.com/lsHGw.png
• emilsundberg 14y ago
  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.
• javajosh 14y ago
  Props to the zurb team for referencing Asimov. (Elijah Bailey was the detective protagonist in the fantastic early Robot series.)
  • kitsune_ 14y ago
    Also the Foundation Series (Hari Seldon).
  • ryanriddle 14y ago
    Thanks! We're very big fans of Asimov's work. We reference it all the time, especially Foundation. :)
• jwarzech 14y ago
  This came at a perfect time for me as I've spent the last week working on designing newsletter templates.
  • dedakia 14y ago
    I'm pretty glad I saw this on the day that I learn I'm undertaking the project of implementing an email newsletter system :)
• obilgic 14y ago
  I will use them as minimalist/simple website templates lol :)
• hk__2 14y ago
  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.
  • eblade 14y ago
    You could set 2 versions: text and html. Email clients that do not support html will fallback to displaying text.
  • biot 14y ago
    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?
• muan 14y ago
  According to campaign monitor(http://www.campaignmonitor.com/resources/will-it-work/email-clients/ http://www.campaignmonitor.com/resources/will-it-work/email-...), 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.
• chrishenn 14y ago
  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!)
• shill 14y ago
  <!-- If you delete this meta tag, Half Life 3 will never be released. -->
• makmanalp 14y ago
  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?
• DigitalSea 14y ago
  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 14y ago
    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.
• kevinconroy 14y ago
  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/ 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 http://www.litmus.com
  • snprbob86 14y ago
    Also useful, automatic CSS inlining: http://premailer.dialect.ca/ http://premailer.dialect.ca/ & https://github.com/alexdunae/premailer/ https://github.com/alexdunae/premailer/
  • netghost 14y ago
    I'll second Litmus. It's one of the few tools that I've really felt were worth paying for. It's just tons better than try to test emails ad-hoc.
• fudged71 14y ago
  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 14y ago
    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 14y ago
      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 14y ago
        Oh, okay. In that case you want to look at transactional email services. MailChimp offers that as well with https://mandrill.com https://mandrill.com, but there are a ton of other offerings as well like http://sendgrid.com http://sendgrid.com.
        • fudged71 14y ago
          That mandrill site is slick! Thanks for the links
  • tomwalsham 14y ago
    At PostageApp.com we focus on transactional emails, which these days are moving heavily towards HTML email as a standard now that deliverability is much more focused on IP reputation than content. We provide a templating system which allows you to build and preview with separate HTML and CSS, and we compile to inline CSS at runtime to ensure compatibility with the majority of email clients. The painful thing to remember is that html/css for email is a weird mix of HTML3 and HTML5 - meaning some major providers only allow for basic functionality, but other platforms support the bleeding edge while omitting some of the simpler aspects. In the end your demographics will strongly influence where you focus your efforts. The templates from Zurb here are a great basis - as a start on a responsive email boilerplate this will be great value to the community - individuals using this for customization will hopefully push the development of these bases further.
• maqr 14y ago
  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 14y ago
    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-testing/ http://www.onlineaspect.com/2008/01/25/the-value-of-split-te...
    • huhtenberg 14y ago
      That was 4 years ago. Things change way too fast for your sampling to remain relevant for this long.
      • adrianhoward 14y ago
        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 ;)
      • nihonjon 14y ago
        troll elsewhere
    • mindctrl 14y ago
      The DIY guys say text wins. http://diythemes.com/thesis/html-or-text-emails/ http://diythemes.com/thesis/html-or-text-emails/ Personally I prefer short text ones.
  • 14y ago
• charleshaanel 14y ago
  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.emailexperience.org/ http://www.youtube.com/user/EmailExperience http://www.youtube.com/user/EmailExperience
• gaoshan 14y ago
  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 14y ago
    Agreed, the use of the word "untested" is a little off-putting. Just call it "unsupported".
• firefoxman1 14y ago
  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!
• fourstar 14y ago
  I like Zurb. I like using Foundation. I dislike this. If I'm reading an email I want text.
• tommaxwell 14y ago
  Obviously most of the clients that don't support this are built by Microsoft. Nice job, btw.
• laurencei 14y ago
  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.
• sambeau 14y ago
  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/ 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 14y ago
    Outlook is the IE6 of the email design world.
    • Jgrubb 14y ago
      I'd actually say it's more like the IE5 for Mac of the email world.
  • eli 14y ago
    100% agree. Outlook doesn't support responsive CSS... but doesn't it support conditional comments? I think Zurb might be missing an opportunity here.
• smickie 14y ago
  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/ https://www.mailrox.com/
  • nc 14y ago
    It's easier to just scroll rather than pan and zoom.
• jsilence 14y ago
  HTML email is wrong. Period.