We're stoked that a lot of folks are really digging the new responsive email templates. But one question that we keep getting is "why isn't it supported for Outlook?"
It's a valid question and point. As one reader of our blog cited in the comments section of Friday's post, Campaign Monitor reports that slightly more than 20% of emails are opened in Outlook. They also report that 35.6% of emails are opened on iOS mobile devices.
However, for our own campaigns, we've noticed that Outlook accounts for less than 5% whereas more than 40% view our emails on an iOS device. With that in mind, we rolled the hard six and made the choice of going mobile first with the responsive email templates.
That being said, we tested again today and found the following (in this updated chart):
| Client/Browser | Supported | Issues |
|---|---|---|
| Gmail (Desktop) | ✓ | |
| Gmail (Mobile) | ✓ | If the same email is sent repeatedly Gmail will clip it, causing the layout to appear slightly wonky |
| Gmail (iOS) | ✓ | |
| Gmail (Android) | ✓ | |
| Yahoo Mail (Desktop) | ✓ | |
| Yahoo Mail (Mobile) | ✓ | |
| Mail (iOS) | ✓ | |
| Mail (OSX) | ✓ | |
| Email (Android) | ✓ | |
| Outlook 2003 | ✓ | |
| Outlook Express | ✓ | |
| Outlook 2007, 2010, 2013 | ✗ | |
| Outlook 2011 for Mac | ✓ | |
| Hotmail (Desktop) | ✓ | Headers are green. |
| Hotmail (Mobile) | ✓ | Body is 15px too wide to the right, padding issue. |
| Thunderbird | ✓ | |
| Sparrow (iOS) | ✓ | |
| Sparrow (Desktop) | ✓ | |
| Entourage 2004 | ✓ | |
| Entourage 2008 | ✓ | |
| Windows Mail | ✓ | |
| Live Mail | ✓ |
As you can see, there are quite a few places where the templates are supported, including Outlook 2003 and Windows Mail.
Getting Started With Responsive Email Templates
Another question we've received is: "how do I get started?"
To use the templates effectively, you're going to need an email campaign client, such as Campaign Monitor or Mailchimp. That's because you can't just copy and paste the HTML code into an email. For our campaigns, we prefer to us Campaign Monitor. We've kept the CSS separate, but it all needs to be inline for HTML emails. For Mailchimp, you can use their inliner tool. Campaign Monitor does this automatically for you.
A few points to keep in mind:
- The templates come with a separate CSS stylesheet and HTML file
- Both the CSS and HTML files are uploaded into your campaign client, such as Campaign Monitor or Mailchimp
- The CSS must be inline with the HTML; some clients like Campaign Monitor do this for you
- If you are adding images, a separate folder must be created; in Campaign Monitor, this folder is compressed along with the CSS Stylesheet
Mailchimp has some additional resources to help you on HTML emails and emails on mobile.
We'd like to thank everyone whose provided feedback on the responsive email templates and we'll continue to work to make them even better as the days go on.