Open Source Email Templates(sendwithus.com)
sendwithus.com
Open Source Email Templates
https://www.sendwithus.com/resources/templates
63 comments
The "alt" attributes on images (at least on the few templates I saw), are pretty bad. For example, here [0] all the social icons have an alt of "social icon". Have you guys even tried looking at these templates on a non-html email client? Clearly not.
[0] https://github.com/sendwithus/templates/blob/master/template...
[0] https://github.com/sendwithus/templates/blob/master/template...
Awesome, I think you just became the Bootstrap of email by default!
See Zurb Ink, which is also open sourced, but might be a bit closer to Bootstrap as it also has a framework.
http://zurb.com/ink/
http://zurb.com/ink/
That looks pretty good, thanks for the share.
Thanks, that's super flattering for the whole sendwithus team!
These templates are really nice, but the license choice confuses me a bit. Apache 2.0 requires attribution, but there aren't license headers in any of the templates. How should I properly attribute sendwithus when using this template?
Great work, Matt. I think you guys did a great job with these, especially having multiple layouts for each template to handle different use cases. A lot of people make the mistake of thinking that one layout works for every situation—it's nice to see you guys helping to remedy that misconception.
Chuffed to see you using Litmus, too!
Chuffed to see you using Litmus, too!
Thanks! This was a team effort, not just me :)
We like the idea of "purpose driven" templates, and that's why we've designed that way. Who thinks "I want a 3 column email template"? Most people think "I need to send a notification email". That's what we tried to design for.
We like the idea of "purpose driven" templates, and that's why we've designed that way. Who thinks "I want a 3 column email template"? Most people think "I need to send a notification email". That's what we tried to design for.
> Who thinks "I want a 3 column email template"?
People who send out monthly e-mail newsletters and the like. Sadly, that's a use-case that isn't really included.
Other than that - very nice approach.
People who send out monthly e-mail newsletters and the like. Sadly, that's a use-case that isn't really included.
Other than that - very nice approach.
Ah you guys are the bomb! I might have to fork some of your templates for our year 2005 looking emails..
Thanks for this, I have been looking for email templates for a little while.
You know what's funny? Often the highest converting and best user experience emails are... just text and links.
Yep, all the branded shenanigans and responsive mumbojumbo doesn't necessarily beat just sending an email in its native form.
As it turns out, most of the logos and branding are self serving and nobody cares. Many of the most profitable email lists on the internet have no style at all, are long form text, have plain blue links, and they make millions of dollars in sales.
This is a cool project, but don't forget to treat email in its native form.
Yep, all the branded shenanigans and responsive mumbojumbo doesn't necessarily beat just sending an email in its native form.
As it turns out, most of the logos and branding are self serving and nobody cares. Many of the most profitable email lists on the internet have no style at all, are long form text, have plain blue links, and they make millions of dollars in sales.
This is a cool project, but don't forget to treat email in its native form.
We always encourage people to A/B test plain text versus HTML, and from the results seen it's entirely dependent on the audience.
If you're emailing developers, keep it clean/plain. Many consumers appreciate if an email "looks/feels like the website".
If you're emailing developers, keep it clean/plain. Many consumers appreciate if an email "looks/feels like the website".
Totally excellent point! It really depends on who your customers are, what your product is, and what your email is about. We encourage everyone to experiment with your ideas and see what works best for your customers :)
I think you'd be surprised to see how different customers respond to different styles and types of email.
I think you'd be surprised to see how different customers respond to different styles and types of email.
For me, simply the development of brand recognition alone is reason enough to want to include a nice, visible logo and some aesthetic design in the email. I'm not entirely focused on "conversions" in email. It is part of a much larger user experience where everywhere customers interact with something I've made, I want it to communicate a cohesive message and also imprint my brand into their mind. Obviously, you should degrade to plain text well. But maybe what seems obvious to me, isn't.
Conversion is content-dependent. What works for a link of the day newsletter won't work for someone like fab.com
If you build emails based on these, please make sure you send them multipart/alternative with a text/plain version as well. And in particular, make sure that text/plain version isn't just "go read the HTML", or worse a copy of the HTML complete with tags.
Mail Chimp has a tool for this.
http://templates.mailchimp.com/resources/html-to-text/
http://templates.mailchimp.com/resources/html-to-text/
Great suggestion. You would think this would be built into the templates.
They are open source, so...
This is amazing, although I can't help but feel skeptical every time I read the word responsive next to the word e-mail considering only Thunderbird and Apple Mail speak responsive.
Sadly, email design is like travelling to a twisted dimension.
The most effective markup for layouts are the dreaded tables, the most effective way to style your markup is with inline styles, and the most used email client (Microsoft Outlook 2007~13) has an engine exponentially worse than Trident from Internet Explorer 6[1].
And don't get me started with Android/Gmail because Google seems devoted in beating Microsoft with the worst experience for email design.
[1] http://msdn.microsoft.com/en-us/library/aa338201(v=office.12...
Sadly, email design is like travelling to a twisted dimension.
The most effective markup for layouts are the dreaded tables, the most effective way to style your markup is with inline styles, and the most used email client (Microsoft Outlook 2007~13) has an engine exponentially worse than Trident from Internet Explorer 6[1].
And don't get me started with Android/Gmail because Google seems devoted in beating Microsoft with the worst experience for email design.
[1] http://msdn.microsoft.com/en-us/library/aa338201(v=office.12...
Actually, you'd be surprised at what you can accomplish in email these days. While there are still problem email clients when it comes to responsive (Gmail, the Gmail mobile app, some Android clients, and a few iOS clients like Mailbox), you can build responsive emails fairly easily.
While it's true that you need to rely on tables, some HTML attributes, and a lot of inline styles - we routinely use classes, media queries, and CSS3 in our emails at Litmus. We've even pulled off HTML5 video backgrounds and some cool stuff with CSS3 animations. All in email.
Outlook definitely has issues, more recently with rendering in Outlook.com, but they are known issues—most with quick fixes.
More importantly, there are a ton of great resources out there. At Litmus, we actually started a community around email design to help people learn and troubleshoot (https://litmus.com/community). If anyone's interested, here are some good email design resources:
Responsive Email Patterns - http://briangraves.github.io/ResponsiveEmailPatterns/ Responsive Email Resources - http://responsiveemailresources.com/ Action Rocket Labs blog - http://labs.actionrocket.co/ Campaign Monitor CSS Support Guide - https://www.campaignmonitor.com/css/ MailChimp Email Design Reference - http://templates.mailchimp.com/
Hell, I even wrote a book on responsive email design (http://modernhtmlemail.com).
Email is definitely its own, weird world - but it's a world that is improving and growing every day. More importantly, it's a world filled with dedicated and clever people that are refining techniques, building tools, and sharing knowledge to make working with email easier than ever.
While it's true that you need to rely on tables, some HTML attributes, and a lot of inline styles - we routinely use classes, media queries, and CSS3 in our emails at Litmus. We've even pulled off HTML5 video backgrounds and some cool stuff with CSS3 animations. All in email.
Outlook definitely has issues, more recently with rendering in Outlook.com, but they are known issues—most with quick fixes.
More importantly, there are a ton of great resources out there. At Litmus, we actually started a community around email design to help people learn and troubleshoot (https://litmus.com/community). If anyone's interested, here are some good email design resources:
Responsive Email Patterns - http://briangraves.github.io/ResponsiveEmailPatterns/ Responsive Email Resources - http://responsiveemailresources.com/ Action Rocket Labs blog - http://labs.actionrocket.co/ Campaign Monitor CSS Support Guide - https://www.campaignmonitor.com/css/ MailChimp Email Design Reference - http://templates.mailchimp.com/
Hell, I even wrote a book on responsive email design (http://modernhtmlemail.com).
Email is definitely its own, weird world - but it's a world that is improving and growing every day. More importantly, it's a world filled with dedicated and clever people that are refining techniques, building tools, and sharing knowledge to make working with email easier than ever.
Actually I'm surprised at what can be accomplished in email these days, but in a negative way (sorry to be too pessimistic).
In the browser I already got my peace of mind back when it comes to cross-browser compatibility, because I can design a website in the browser of my choice, and when I test in other browsers, most of times there are no issues, or the issues are too minimal to get upset by having to fix them.
It's cool to have a place with an active community where someone can find tools, resources, workarounds, etc., but that is just a way to alleviate the problem.
An e-mail standard proposal[1] already exists, but providers (especially Google) doesn't seem too motivated to adhere to that standard :/...
[1] http://www.email-standards.org/
In the browser I already got my peace of mind back when it comes to cross-browser compatibility, because I can design a website in the browser of my choice, and when I test in other browsers, most of times there are no issues, or the issues are too minimal to get upset by having to fix them.
It's cool to have a place with an active community where someone can find tools, resources, workarounds, etc., but that is just a way to alleviate the problem.
An e-mail standard proposal[1] already exists, but providers (especially Google) doesn't seem too motivated to adhere to that standard :/...
[1] http://www.email-standards.org/
It's a wonderfully painful reminder of what the web was like back in the 90's - isn't it?! Hopefully these open source templates will help lessen the pain and encourage more people to contribute and create their own awesome templates!
I can guarantee you that the web from the 90's was <BLINK><FONT COLOR="#00FF00">less frustrating</FONT></BLINK>.
But at least there are some nice tools[1] that lessen the pain :)
[1] https://pypi.python.org/pypi/inlinestyler
But at least there are some nice tools[1] that lessen the pain :)
[1] https://pypi.python.org/pypi/inlinestyler
I tried using python inlinesytler not too long ago, and found it didnt work well preserving some styles like media queries.
The only thing that I found worked reliably was juice[1], which is a node.js library.
[1]: https://github.com/andrewrk/juice
The only thing that I found worked reliably was juice[1], which is a node.js library.
[1]: https://github.com/andrewrk/juice
I don't know man. Writing custom XmlHttpRequest methods for each browser was <MARQUEE>pretty bad!</MARQUEE>.
iPhone might be the most used email client, especially for consumer messages. And Outlook rendering is terrible, but it supports conditional comments[1] that let you target code only to Outlook or hide it only from Outlook.
[1] http://esd.io/blog/html-email-buttons-conditional-comments.h...
[1] http://esd.io/blog/html-email-buttons-conditional-comments.h...
I can't tell you how many times I've wanted something like this. The pain of writing and testing html email is pretty huge, and the only people doing an even halfway decent job with them seem to be the proprietary email campaign companies, and until now they don't seem interested in making them as accessible as this.
Plus, these templates look pretty slick.
Plus, these templates look pretty slick.
Glad that you appreciate them! Feel free to use them or contribute to them to your hearts content :)
They are much less fully fleshed out, but Zurb Ink has some sample templates along with a whole system for responsive email design: http://zurb.com/ink/templates.php
The Zurb Ink templates are great! We use them as a base for some of our templates as well.
The process of going from the Zurb template to something you might want to actually use often means people break the responsive elements of the template -- something we're hoping to avoid with this template gallery.
The process of going from the Zurb template to something you might want to actually use often means people break the responsive elements of the template -- something we're hoping to avoid with this template gallery.
Yup definitely agree with that. I think Ink might be the future of email design, bUt it's still pretty rough in real world use today.
I'll take a closer look at these templates. Thanks.
I'll take a closer look at these templates. Thanks.
Ink is cool. There are a surprising number of templates out there now, too. Brian Graves has a great site of resources with a template section at http://responsiveemailresources.com/
I also released one based on the template we use at Litmus to accompany an article in A List Apart. Article - http://alistapart.com/article/can-email-be-responsive Template - https://github.com/alistapart/salted
I also released one based on the template we use at Litmus to accompany an article in A List Apart. Article - http://alistapart.com/article/can-email-be-responsive Template - https://github.com/alistapart/salted
This is great. Thanks a lot for sharing. We're working on html emails for our own project and it's shocking how arcane and backwards this entire thing is. Hopefully these templates will save us a lot of time.
These are great. I'm a week off shipping a product that is primarily delivered via email, to C-suite'ers. Most of these people check all email on their phone, so these are an amazing help in shipping the MVP.
Excellent job. For those interested in just seeing (no source) really well designed emails can alwasy check out: http://reallygoodemails.com/
Awesome responsive email templates. More info here: https://www.sendwithus.com/resources/templates/about
In my endless fight with Microsoft’s worse than useless spam filters (my how I hate hotmail and her ugly sisters), how does using a common template like this affect the false positive junk mail rate?
On this topic does anyone have any trick suggestion beyond the obvious (spf, dkim, etc) to keep emails away from Microsoft’s junk mail filter?
On this topic does anyone have any trick suggestion beyond the obvious (spf, dkim, etc) to keep emails away from Microsoft’s junk mail filter?
Anecdotal, but I have had better luck sending through an email provider to Hotmail (and Outlook.com and friends) rather than setting up my own outbound SMTP. I've used both Mailgun and Mandrill – of course, make sure you set up SPF and DKIM with the provider, too.
Yes I already do this - still doesn’t solve the hotmail junk filter hell.
The emails I send are not newsletter, just invoices and the like. They go through fine to gmail, yahoo, etc, but for no known reason Microsoft’s useless filters marks them as spam. Of course the average hotmail user never thinks to look in their junk mail folder no matter how many times they are told :(
The emails I send are not newsletter, just invoices and the like. They go through fine to gmail, yahoo, etc, but for no known reason Microsoft’s useless filters marks them as spam. Of course the average hotmail user never thinks to look in their junk mail folder no matter how many times they are told :(
Interesting, I had no issues with GMail and Hotmail/Live/Outlook.com but with Yahoo. A handful of Yahoo user that mark their own registration email as junk is enough that Yahoo add the domain to their junk filter. It doesn't help that Yahoo has a very prominent "Spam" button in their UI (in GMail & Outlook it's on a drop-down menu).
I have issues on occasion with yahoo, but it is only for a week or so at a time. Microsoft consistently gives me issues. Of course all my test emails to my hotmail test accounts go through without any issue. From what I have been able to determine the filter only appears to be trigged on a certain percentage of email accounts.
Hotmail has a dedicated abuse team, why not try getting in touch? There's no reason a legitimate invoice email shouldn't be getting through!
I have tried this and never got a response as to why. I have a feeling that their abuse team doesn’t even know what their filters are trigged on.
Very nice! Just a shame most of these will not work with gmail since it blocks internal style sheets.
i solved the problem by inelining the css, by using the Zurb inliner http://zurb.com/ink/inliner.php.
[deleted]
When I saw "open source mail templates" I thought it'd be things like ways of insulting people who report bugs or provide patches, or calling everyone idiots for not wrapping their plain-text emails at 72 columns, or whatever.
very misleading title for a commercial solution.
It's under the Apache license and all; what more do you want?
We didn't want to launch "just another template gallery", like many others, so we've made these open source. Contribute a pull request on github[0], we'll merge it, run it through Litmus and make sure it's still responsive. You can read about it on the 'about' page[1]
[0] https://github.com/sendwithus/templates
[1] https://www.sendwithus.com/resources/templates/about