Open Source Email Templates

https://www.sendwithus.com/resources/templates

by bvanvugt • 12 years ago

390 60 12 years ago

wesleycyu• 12 years ago

Awesome responsive email templates. More info here: https://www.sendwithus.com/resources/templates/about

mrmch9• 12 years ago

sendwithus cofounder; we've had a template gallery internally in the product since launch, but we felt that these templates were something that everyone should be able to use.

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

j_s• 12 years ago

Awesome, I think you just became the Bootstrap of email by default!

mrmch9• 12 years ago

Thanks, that's super flattering for the whole sendwithus team!

guynamedloren• 12 years ago

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/

eltondegeneres• 12 years ago

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?

mrmch9• 12 years ago

The way we intend this is that if you redistribute the templates (say you host your own template gallery, or put them together as a zip you send people), then attribution would be nice.

If you're using the templates to send email, no attribution is required.

rodriguezcommaj3• 12 years ago

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!

mrmch9• 12 years ago

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.

dehmlow• 12 years ago

Ah you guys are the bomb! I might have to fork some of your templates for our year 2005 looking emails..

wuliwong3• 12 years ago

Thanks for this, I have been looking for email templates for a little while.

hobarrera• 12 years ago

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

eli3• 12 years ago

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

mrmch9• 12 years ago

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.

eli3• 12 years ago

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.

rodriguezcommaj3• 12 years ago

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

rquantz• 12 years ago

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.

troymcginnis3• 12 years ago

Glad that you appreciate them! Feel free to use them or contribute to them to your hearts content :)

programminggeek• 12 years ago

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.

mrmch9• 12 years ago

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

troymcginnis3• 12 years ago

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.

prostoalex• 12 years ago

Conversion is content-dependent. What works for a link of the day newsletter won't work for someone like fab.com

wuliwong3• 12 years ago

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.

ramoq• 12 years ago

Excellent job. For those interested in just seeing (no source) really well designed emails can alwasy check out: http://reallygoodemails.com/

nichodges2• 12 years ago

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.

mrmch9• 12 years ago

Glad we could help out!

nichodges2• 12 years ago

Also I'm sure you'd track this, but from an audience-of-one I can say this is great content marketing! I've used SendGrid previously on a few side projects, and will now definitely be checking out your service.

thehal842• 12 years ago

Very nice! Just a shame most of these will not work with gmail since it blocks internal style sheets.

mrmch9• 12 years ago

That's why all the CSS is inlined for you as well :)

thehal842• 12 years ago

Nice, i missed that while glancing at it on git. I've starred the repo and appreciate the contributions everyone has made to it.

kronik3r• 12 years ago

i solved the problem by inelining the css, by using the Zurb inliner http://zurb.com/ink/inliner.php.

Aldo_MX4• 12 years ago

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

troymcginnis3• 12 years ago

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!

Aldo_MX4• 12 years ago

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

eli3• 12 years ago

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

rodriguezcommaj3• 12 years ago

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.

Aldo_MX4• 12 years ago

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/

JoshTriplett• 12 years ago

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.

danieltillett5• 12 years ago

Great suggestion. You would think this would be built into the templates.

wuliwong3• 12 years ago

They are open source, so...

sah88• 12 years ago

Mail Chimp has a tool for this.

http://templates.mailchimp.com/resources/html-to-text/

adhsu01• 12 years ago

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.

danieltillett5• 12 years ago

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?

erichurkman• 12 years ago

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.

danieltillett5• 12 years ago

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 :(

_fluffy• 12 years ago

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.

_asciiker_• 12 years ago

very misleading title for a commercial solution.

cbr• 12 years ago

It's under the Apache license and all; what more do you want?

Open Source Email Templates

Related Stories