7 ms·

Responsive HTML Email Templates

127 points by twakefield 10y ago

taeric 10y ago
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.)
- CaptSpify 10y ago
  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.
  - TeMPOraL 10y ago
    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.
    - CaptSpify 10y ago
      I personally love mutt, because I can customize it to be vim-like. Most of my co-workers prefer alpine
    - parfe 10y ago
      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.
      - taeric 10y ago
        There is a special hell for people that send blank text parts for email.
    - taeric 10y ago
      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.
buckbova 10y ago
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 https://litmus.com/checklist/emails/public/2e539c3 This different than zurb? http://foundation.zurb.com/emails/email-templates.html http://foundation.zurb.com/emails/email-templates.html
- blowski 10y ago
  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.
  - ommunist 10y ago
    There are interesting workarounds for Gmail based on use of viewport width. http://emailcodegeek.com/responsive-email-in-gmail/ http://emailcodegeek.com/responsive-email-in-gmail/
    - blowski 10y ago
      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.
      - ommunist 10y ago
        I am not alone!
- tronvig 10y ago
  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.
  - 10y ago
matt_wulfeck 10y ago
$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.
- rhizome 10y ago
  Doesn't Facebook essentially use plaintext for emails? Personally, I don't see much reason to go beyond that.
  - JoBrad 10y ago
    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.
- blowski 10y ago
  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 http://foundation.zurb.com/emails.html Mailgun - http://blog.mailgun.com/transactional-html-email-templates/ http://blog.mailgun.com/transactional-html-email-templates/
  - eli 10y ago
    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.
- fonziguy 10y ago
  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 https://github.com/leemunroe/responsive-html-email-template) and also my Grunt workflow for building emails (https://github.com/leemunroe/grunt-email-workflow https://github.com/leemunroe/grunt-email-workflow) if you'd like to take it for a spin.
ommunist 10y ago
github search for HTML email templates filtered by year will give you way more niceties for free.
matt4077 10y ago
For an actually free framework for responsive email layout check out https://mjml.io https://mjml.io.
- Rustydave 10y ago
  Wow! Thanks. Never knew about this before.
rektide 10y ago
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://news.ycombinator.com/item?id=8173520 https://developers.google.com/gmail/markup/ https://developers.google.com/gmail/markup/
- JoBrad 10y ago
  But that only works in GMail, right?
  - eli 10y ago
    And even then only if your domain is whitelisted by Google: https://developers.google.com/gmail/markup/registering-with-google https://developers.google.com/gmail/markup/registering-with-...
    - crucialfelix 10y ago
      Ah, but that answers my question about how to get rsvp, events and now cards etc. to work.
  - rektide 10y ago
    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.
blattus 10y ago
Cerberus is a pretty good open source alternative (in addition to some of the others listed in the comments) - http://tedgoas.github.io/Cerberus/ http://tedgoas.github.io/Cerberus/
jbob2000 10y ago
MailChimp has all of their email templates licensed under Creative Commons on their github: https://github.com/mailchimp/email-blueprints https://github.com/mailchimp/email-blueprints (if you're looking for a free, open source alternative)
- dalanmiller 10y ago
  I worry that since they haven't been updated in awhile, they may have fallen out of date.
KevanM 10y ago
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.
tgarma1234 10y ago
Are those from Lee Munroes github account? Yup. https://github.com/leemunroe/responsive-html-email-template https://github.com/leemunroe/responsive-html-email-template Note the copy that says: "Sometimes you need..." So why on earth are they $50 now?
- fonziguy 10y ago
  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 :-)
  - tgarma1234 10y ago
    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.
    - fonziguy 10y ago
      Awesome, glad to hear that!
leesalminen 10y ago
Don't these look very similar? http://htmlemail.io/img/preview-plain.jpg http://htmlemail.io/img/preview-plain.jpg http://mailgun.github.io/transactional-email-templates/action.html http://mailgun.github.io/transactional-email-templates/actio...
- fideloper 10y ago
  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).
  - fonziguy 10y ago
    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/ 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.
    - leesalminen 10y ago
      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.
deleted 10y ago
[deleted]

127 points by twakefield 10y ago

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

CaptSpify 10y ago
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.
- TeMPOraL 10y ago
  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.
  - CaptSpify 10y ago
    I personally love mutt, because I can customize it to be vim-like. Most of my co-workers prefer alpine
  - parfe 10y ago
    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.
    - taeric 10y ago
      There is a special hell for people that send blank text parts for email.
  - taeric 10y ago
    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.

buckbova 10y ago

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 https://litmus.com/checklist/emails/public/2e539c3 This different than zurb? http://foundation.zurb.com/emails/email-templates.html http://foundation.zurb.com/emails/email-templates.html

blowski 10y ago
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.
- ommunist 10y ago
  There are interesting workarounds for Gmail based on use of viewport width. http://emailcodegeek.com/responsive-email-in-gmail/ http://emailcodegeek.com/responsive-email-in-gmail/
  - blowski 10y ago
    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.
    - ommunist 10y ago
      I am not alone!
tronvig 10y ago
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.
- 10y ago

matt_wulfeck 10y ago

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

rhizome 10y ago
Doesn't Facebook essentially use plaintext for emails? Personally, I don't see much reason to go beyond that.
- JoBrad 10y ago
  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.
blowski 10y ago
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 http://foundation.zurb.com/emails.html Mailgun - http://blog.mailgun.com/transactional-html-email-templates/ http://blog.mailgun.com/transactional-html-email-templates/
- eli 10y ago
  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.
fonziguy 10y ago
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 https://github.com/leemunroe/responsive-html-email-template) and also my Grunt workflow for building emails (https://github.com/leemunroe/grunt-email-workflow https://github.com/leemunroe/grunt-email-workflow) if you'd like to take it for a spin.

ommunist 10y ago

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

matt4077 10y ago

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

Rustydave 10y ago
Wow! Thanks. Never knew about this before.

rektide 10y ago

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://news.ycombinator.com/item?id=8173520 https://developers.google.com/gmail/markup/ https://developers.google.com/gmail/markup/

JoBrad 10y ago
But that only works in GMail, right?
- eli 10y ago
  And even then only if your domain is whitelisted by Google: https://developers.google.com/gmail/markup/registering-with-google https://developers.google.com/gmail/markup/registering-with-...
  - crucialfelix 10y ago
    Ah, but that answers my question about how to get rsvp, events and now cards etc. to work.
- rektide 10y ago
  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.

blattus 10y ago

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

jbob2000 10y ago

MailChimp has all of their email templates licensed under Creative Commons on their github: https://github.com/mailchimp/email-blueprints https://github.com/mailchimp/email-blueprints (if you're looking for a free, open source alternative)

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

KevanM 10y ago

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.

tgarma1234 10y ago

Are those from Lee Munroes github account? Yup. https://github.com/leemunroe/responsive-html-email-template https://github.com/leemunroe/responsive-html-email-template Note the copy that says: "Sometimes you need..." So why on earth are they $50 now?

fonziguy 10y ago
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 :-)
- tgarma1234 10y ago
  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.
  - fonziguy 10y ago
    Awesome, glad to hear that!

leesalminen 10y ago

Don't these look very similar? http://htmlemail.io/img/preview-plain.jpg http://htmlemail.io/img/preview-plain.jpg http://mailgun.github.io/transactional-email-templates/action.html http://mailgun.github.io/transactional-email-templates/actio...

fideloper 10y ago
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).
- fonziguy 10y ago
  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/ 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.
  - leesalminen 10y ago
    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.

deleted 10y ago

[deleted]