Can Email Be Responsive?

[adrian]

I haven't actually read this yet, but I am intrigued, so using this as a bookmark for later

http://alistapart.com/article/can-email-be-responsive

[Raymond Geerts]

Mailchimp has also some good information about this topic.

http://templates.mailchimp.com/development/responsive-email/

One thing to keep in mind is always to have a good fallback template for ancient mail clients.

For example Outlook 2013 and previous versions are using MS Words as render engine, instead of what you would expect Internet Explorer.

https://litmus.com/blog/outlook-2013-still-powered-by-word-now-available-for-email-testing

Besides that, to support some (older) mail clients you have to use inline styling as if you where making a layout design for web 1.0 browsers.

This is always been a problem with templating for mailings when you want it to be compatible with older mail clients.

Some good information about creating email templates can be found here:

http://help.hubspot.com/articles/Best_Practice/email-templates-design-code

So responsive email templates are certainly possible for mail clients (or browser based mail clients) which support media queries.

Altough to over rule all the inline styling from inside the <style> tag you might need to set !important to all the styles in there.

[adrian]

Thanks Raymond,

I built an email template about 10 years ago (all tables and inline styles) that I am still using and remember all about Outlook's html rendering. It actually got worse from one version to the next back then.

I hadn't yet seen anything on responsive options though, so thanks for those other links too!

[teppo]

I built an email template about 10 years ago (all tables and inline styles) that I am still using and remember all about Outlook's html rendering. It actually got worse from one version to the next back then.

I used to have this printed out on my desk, but eventually just gave up. Every single attempt to implement something properly ended with Microsoft pushing out new (and worse) version of Outlook and us doing tons of extra work "fixing" existing newsletters.

The uglier the implementation, better it works and more future-proof it is. It's a screwed up world out there.

Anyway, I've also been meaning to properly check out responsive newsletters and see if there's something to that already, but old wounds still haven't quite healed.. and it's pretty hard to believe that things would've improved that much in such a short time

[Soma]

Email is responsive by default.

[geniestreiche]

In my experience, email making right is a science in itself. When you think different browsers are horrible, yes email is more horrible. There are so many different clients out there, desktop and webmail clients. I think the important things are: always use <table> and only inline styles. Google Mail for example removes all <style>-blocks.

I have some good experiences with Zurb's E-Mail Framework Ink (http://zurb.com/ink/).

Some good resources you can find from MailChimp (http://templates.mailchimp.com) or Campaign Monitor (http://www.campaignmonitor.com/resources/will-it-work/). 

[purwa]

@t

In my experience, email making right is a science in itself. When you think different browsers are horrible, yes email is more horrible. There are so many different clients out there, desktop and webmail clients. I think the important things are: always use <table> and only inline styles. Google Mail for example removes all <style>-blocks.

I have some good experiences with Zurb's E-Mail Framework Ink (http://zurb.com/ink/).

Some good resources you can find from MailChimp (http://templates.mailchimp.com) or Campaign Monitor (http://www.campaignmonitor.com/resources/will-it-work/). 

I tried ink, and the layout break on gmail and entourage (mac) if remember it correctly, switching back to nested table and inline style, the pain is inevitable  .  

[Martijn Geerts]

In mailChimp you can use a debug service. ( I Forget the name of this service ) You can [x] check email clients. From those results a screendump is created and the result is send back to MailChimp. This process takes from 20 minutes till 7 hours and everything in between. Some screenshots only contain the viewport, others the whole newsletter. And there's no way to see the rendered source. Responsive email can it be done? Yes it can. ( for some clients ) But you need time, lot's of time and more time. Debugging newsletters is a big big hell if you asked me. 

[adamspruijt]

Just thought I'd add to this thread a little suggestion. HTML email are a nightmare and I know getting a great design setup and working even decently consistently can be a pain. I use Mailrox (https://www.mailrox.com/) and have had pretty great results with it. Once you get used to the process its pretty quick to use. Not sure what they are going to charge once out of beta but so long as it is reasonable I'll be signing up!

Oh and, LOVE WireMail class, so much clearer to use, I ALWAYS found myself forgetting how to properly send an HTML email. Thanks Ryan!

[Christophe]

http://foundation.zurb.com/emails.html (Formerly Ink)

http://tedgoas.github.io/Cerberus/

[louisstephens]

I love the new Foundation for Emails. If you are using the sass version, it is super easy to set up and start coding. You really don't even have to mess with tables etc as the stack takes care of parsing all of that when you "foundation build". I did a test the other day in litmus with multiple columns etc and I had no issues across the board.