Responsive HTML Email Templates | Hacker News Reader

Responsive HTML Email Templates

htmlemail.io

127 pointstwakefield46 comments

$50 for 8 templates. There's nothing free or open-source on this site. Nothing wrong with that but just setting expectations. I supposed it's not a bad price if you're making money off the marketing campaign.

Can someone point to a "free", basic template that I can use instead of sending plaintext emails? HTML in emails is simply a PITA. If I can make my daily crons looks pretty then I'm all for that.

Even a nice css table similar to bootstrap would solve 99% of all my needs.

Doesn't Facebook essentially use plaintext for emails? Personally, I don't see much reason to go beyond that.

Facebook uses basic HTML for a few of their emails (essentially anything requiring an image).

If you work in ecommerce, images can drastically increase response rates. They really are worth a thousand words.

Agreed, these are very expensive if all they are is responsive email templates. ThemeForest offers similar quality for about $12, and there are lots of free ones available as well:

Zurb - http://foundation.zurb.com/emails.html

Mailgun - http://blog.mailgun.com/transactional-html-email-templates/

Creating a moderately complex layout for Zurb is possible, but the HTML + inlined CSS ends up so large that it gets clipped in gmail.

Email design is hard. It's a bit like designing a website that still has to support IE5 on Windows 3.1.

Hey Matt, Lee here the creator of the templates. I've open sourced a simple basic email here (https://github.com/leemunroe/responsive-html-email-template) and also my Grunt workflow for building emails (https://github.com/leemunroe/grunt-email-workflow) if you'd like to take it for a spin.

Thank you for sharing your workflow. I am sure you will definitely find your customers, since website is enticing and well-designed.

Having worked in email marketing before, making a reliable template that just works in most major webmail platforms requires a LOT more work than doing the same thing for web browsers. If they work (and I haven't tried them, so can't provide first-hand evidence), then they are well worth the money.

Having to do email marketing as one of my job responsibilities, making something that both looks good and works is certainly not a trivial task that can be done on short notice just before you have to send the newsletter out.

If you want responsive, these are my go-to solution:

http://tedgoas.github.io/Cerberus/

I recently put back on my old geezer hat and switched to GNUS for email at work. I yearn for the days that all email was simple text and people actually trimmed long reply chains. Inline responses were also easier in text.

That said, I do realize this is mainly for marketing emails. Or things that need to show charts and the like. I don't instantly despise the idea. But it does amuse me that much of what makes the space difficult, is a combination of a ton of things that were designed to make the space easy. (Though, I question who the target was for most of the ease. Seems many features are made specifically to make it easier to market to me. Not for me to use email.)

One of the best decisions I made was to use a cli email client. Parsing email is much faster and eaiser. And I don't have to look at spam^H^H^H^Hmarketing emails any more.

Any particular one you recommend?

I've been meaning to use Emacs for my e-mail for quite some time now, but I can't get myself to jump through all the hurdles required to get reliable access to GMail.

I personally love mutt, because I can customize it to be vim-like. Most of my co-workers prefer alpine

In Emacs I use mu4e pointed at a local Maildir and sync against an imap server using mbsync (switched away from offlineimap because of UID validity issues, which is apparently offlineimap's only method of tracking messages, may be a flaw with microsoft's imap implementation, but offlineimap can't handle it).

mbsync needs (setq mu4e-change-filenames-when-moving t) so it can properly handle file moves.

Haven't used it against gmail, but because microsoft wants you using outlook only, imap is a bit buggy so you need to set PipelineDepth 1 in your .mbsyncrc IMAPAccount block because it seems that the microsoft imap server has account global variables so multiple threads/connections will step on each other.

And perversely, (setq mu4e-view-prefer-html t) has to be set because many rich html composing clients will send a text version that's completely blank, leaving you staring at a blank body if the client defaulted to text only.

You'll have to find a html rendering command that works for you. Something like (setq mu4e-html2text-command "html2text -utf8 -nobs -width 72")

Or google around for custom commands other people have published.

There is a special hell for people that send blank text parts for email.

I haven't hooked up to gmail, yet. I can't imagine it is harder than hooking up to exchange, though. For that GNUS really hasn't been that bad. I quite enjoy it.

Not sure how "responsive" this is. The litmus test uses the simplest of all the email templates and just looks like centered, possibly tabular content.

https://litmus.com/checklist/emails/public/2e539c3

This different than zurb?

http://foundation.zurb.com/emails/email-templates.html

That's about as responsive as you can get, unfortunately. Outlook and Gmail don't support the CSS box model, so you have to use tables and that really limits what you can do on mobiles.

There are interesting workarounds for Gmail based on use of viewport width. http://emailcodegeek.com/responsive-email-in-gmail/

Yeah, coding HTML emails is basically a whole series of 'interesting workarounds'. I actually quite enjoy it - it's kind of like code golf in that there's no best practice, it's just all hacks on hacks on hacks.

I am not alone!

I don't think media queries work in email clients. Responsive usually just means setting a width for mobile and displaying that same layout centered on anything with a larger view.

There are a bunch of mobile clients and some newer desktop clients that support media queries:

https://litmus.com/help/email-clients/media-query-support/

Yeah, but not all of them. So you either have to get very creative or decide you're ok with having tiny, zoomed-out looking emails in the native Gmail App (which has a significant user base)

Yeah curious to know what this brings that Foundation for Emails does not?

Foundation is free (and at version 2.0 with a decent well-tested workflow).

For an actually free framework for responsive email layout check out https://mjml.io.

Wow! Thanks. Never knew about this before.

MailChimp has all of their email templates licensed under Creative Commons on their github: https://github.com/mailchimp/email-blueprints

(if you're looking for a free, open source alternative)

I worry that since they haven't been updated in awhile, they may have fallen out of date.

I find it amazing that the primary method of communication across many businesses is still mired in a world of compromise and hacks.

Surely the use tables to create presentable emails, rather than simple HTML and CSS bumps up the size of these emails that it would be in their interest to base their rendering on modern standards.

Are those from Lee Munroes github account? Yup.

https://github.com/leemunroe/responsive-html-email-template

Note the copy that says: "Sometimes you need..."

So why on earth are they $50 now?

Hey, this is Lee. Correct. The simple responsive email template is free and open source. If you have the time, or don't have the budget, you could definitely use this as a starting point and create the rest of the templates on top of this. It took me more than a few hours though :-)

OK! So funny I have used that freebie one for a few years. That's why I knew it the second I saw it. That's been a very useful template and I really appreciated finding it on github a long time ago. Use it for transactional emails literally all the time. Thanks for putting it up. By the way for the inlining I use premailer. That's a good service.

Awesome, glad to hear that!

Same thing as when Mailgun introduced their (open source) templates- a company claiming expertise in transactional mailing that seems entirely unaware of Schema.org markup. https://news.ycombinator.com/item?id=8173520 https://developers.google.com/gmail/markup/

But that only works in GMail, right?

And even then only if your domain is whitelisted by Google: https://developers.google.com/gmail/markup/registering-with-...

Ah, but that answers my question about how to get rsvp, events and now cards etc. to work.

Cortana has a huge amount of schema.org integration. Yahoo is onboard but I have no idea what they do, whether email factors in to what they do atm.

I'm insulted Google is whitelisting schema.org markup. Their guidelines also mandate that you already send hundreds of messages a day, which is hostile as fuck and disgusting. That's incredibly poor plutocratic bullshit handling, and flies hard in the face of what the web is. What a pity.

Cerberus is a pretty good open source alternative (in addition to some of the others listed in the comments) - http://tedgoas.github.io/Cerberus/

Don't these look very similar?

http://htmlemail.io/img/preview-plain.jpg

http://mailgun.github.io/transactional-email-templates/actio...

Exactly what I was thinking, most of the templates look straight up taken. Not that it,s illegal (so far as I know, there are licensed to allow that).

Hi, Lee here, I created BOTH of email templates you're referring to. In fact you can use my Grunt workflow to create more https://github.com/leemunroe/grunt-email-workflow/

There are several differences with the templates for sale on HTMLemail.io: More layouts, a 6 column grid, better responsive support for mobile (including Gmail apps), includes high resolution image assets for social media and app store buttons, better support across all clients including Gmail and Outlook.

Another Lee! Thanks for being transparent about the differences and for that awesome Grunt workflow. I'll take a closer look at the for sale templates.

github search for HTML email templates filtered by year will give you way more niceties for free.

Reply on news.ycombinator.com