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]
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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 :/...
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!
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.
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.
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.
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/
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.
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.
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?
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 :(
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.
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.
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