Support for HTML 5 elements in email

This is a syndicated post. Read the original at Campaign Monitor Blog .

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!