Support for HTML 5 elements in email

By Ros Hodgekiss on 8th August 2013

HTML 5 - is it really too soon to be using it in HTML email? As <canvas>, <audio> and <video> are being increasingly used on the web, we look at how the most popular email clients have adopted these elements, then whether you should use them in your email campaigns.

Does the idea of playing video or music directly from the inbox sound really too good to be true? Off the bat, you might be skeptical about CSS support in email - and duly so. It has already been reported that many email clients like Outlook and Gmail either ignore, or strip <!DOCTYPE> declaration used in HTML 5... Which doesn't bode well. However, we thought we'd put the most popular email clients to the test and see how they responded to the use of <canvas>, <audio> and <video> in email content - here are our results:

Support for: <canvas> <audio> <video>
Outlook.com Yes Info Info
Yahoo! Mail No No No
Gmail No No No
Outlook '07 / '10 / ‘13 No No No
Outlook '03 / Express / Mail No No No
Windows Live Mail 2011 No No No
Apple Mail 6.5 No Yes Yes
iPhone, iPad (iOS 7) Yes Yes Yes
Android 4 (Default client) No No No
Gmail (iOS / Android) No No No

Is it really too soon to use HTML 5?

Apart from a spluttering attempt at HTML 5 support in Outlook.com (as previously observed), it seems that support for these HTML 5 elements goes no further than WebKit-powered email clients like those shipped with Apple devices. That said, many email clients do display fallback content for one or more of these elements - for example, even Gmail displays any fallbacks supplied within <canvas> and <audio> (but not for <video>). For example, let's say you're sending an email campaign to promote a band - you could display a music player within an email campaign using the <audio> tag, but also provide an image and a link to view the media in a browser, in the common instance that <audio> isn't supported in the email client.

Just like with the Panic email newsletter we picked through not so long ago, the bottom line is to know which email clients your subscribers are using, always provide fallbacks and test thoroughly. Crossing your fingers is also a legitimate strategy.

Coming soon: An updated guide to CSS support in email

We've been cheerily working on an update to our popular Guide to CSS Support in Email and thought we'd share some of our early observations with you. As the new guide is still a few weeks' away, hopefully these findings have provided a taste for things to come. For one, we're extending beyond simply CSS properties, to provide an at-a-glance overview of support for commonplace rules like @media and @font-face, not to mention, coverage of some of the most popular email clients. To find out when our updated guide goes live, be sure to follow this blog using the 'Subscribe' button to your right. Happy coding!

5 Comments

  • Jarrod
    10th August

    Ros have you guys looked into companies like MovableInk? Their video tags replace video with (surprisingly long) animated gifs if the client detected is not one of the supported ones.

    Also, thought about using Disqus on Campaign Monitor? :)

  • Ros Hodgekiss
    10th August

    Hey there Jarrod - that’s a clever feature they have there! Certainly one for us to think about, if the demand presents itself for video integration in email. Might be one for our friends at Wistia to think about, too.

    Ah, our poor comments - I know, Discus could be an improvement, especially in light of how code is handled (we generally ask folks to post on our Forums, instead). It has certainly been considered and we’ll see what we can do about this.

    Mind me asking, what do you think the main advantage in using Disqus could be, over our current commenting system? Just so we can make a case here :)

  • JP Holecka
    11th August

    Discus is a great platform for comments without a doubt. I would caveat that with the fact it’s hard to get your data out if you want to switch to another system. The other thing to consider is that you are on another company’s product and product road map with less control over features being added and retired. Just a few things to consider befor making the jump.

  • Matt Bullock
    12th August

    I have tested video in email for a certain streaming movie site for IOS 7 developer and outlook.com and I think it is something that will help conversion rates.

  • Ros Hodgekiss
    13th August

    JP - Thank you so much, the data thing is certainly something for us to be mindful of here. Personally, I also don’t want the idea of having to “log in” creating a hurdle to commenting here, so keen to weigh the pros and cons.

    Matt - That’s excellent! If you do publish your findings, please be sure to send us a link :)

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account