Microsoft Interactive Email That Does Not Work on Microsoft Email Clients

I came across this interactive email featuring Microsoft Surface computers. The email uses an interactive accordion to display a list of Surface devices that expand and collapse when the recipient taps or clicks on an arrow within the accordion. I thought that this email was very well executed – it was simple and the interactivity enhanced the experience of the email.


View the email here.

Here’s the irony. Besides Outlook for the Mac, this interactive email does not work on ANY of Microsoft’s email clients including Windows Mail on the Surface!

Microsoft, its time to support HTML5 in Outlook for Windows!

I understand the need for Office compatibility, but as I’ve written over and over again, the solution is simple – support a HTML5 header in Outlook. If that header is present, render the email in IE or Edge or Chrome, anything but Word.

<meta http-equiv="X-Email-Render" content="HTML5">

Emails generated by Outlook won’t contain the header and will continue to be rendered in Word with all the Office compatibility goodness – and everyone is happy.

PS. Here’s a tip. Trial the header support on the Outlook client for Windows Phone. Nobody’s using it anyways.

Latest Comments
  1. Don

    Not the first interactive email for a Microsoft product that I’ve seen – I’ve coded a few of them myself. It’s weird coding something that you know won’t work on the email client that the customer will be viewing it on. Especially frustrating explaining to them why it worked when it was on the staging server for review, but then didn’t work when they opened in it Outlook. Them: “Hey where did the button go that scrolls the content?” Me: “You’ll have to open it on, Gmail, or your iPhone (because I know you all have iPhones at Microsoft) if you want to see the button and the scrolling content” :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">