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