adrian

Can Email Be Responsive?

Recommended Posts

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.

  • Like 4

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Email is responsive by default.

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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 :lol: .  

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.