Targeting Outlook 365
For years Email Marketers have battled with Microsoft’s email client outlook. Those with decades worth of experience to the newbies to the game know the struggles of trying to get your email design to look perfect in every version of outlook. From Outlook 2003 through to the most recent Outlook 2019 / Outlook 365.
Recently Outlook 19 / 365 has taken a stride to catch up with its competitors, such as Apple Mail and Thunderbird, by FINALLY supporting animated gifs.
Hallelujah!
This is a big step as Outlook currently holds the 3rd position in the Email Client Market Share which is still above WebKit email clients like Apple Mail.
In the past when Email Marketers had a brilliant design which included gifs or interactive functionality, they had to code in fallbacks to show the Outlook email clients as their rendering engine didn’t support them. This involved using Vector Markup Language (VML) code which is used to hide unsupported elements and show an Outlook friendly version. There are conditions you can specify in the VML to target specific Outlook clients.
Each Outlook email client has a specific version number tied to it. For example, Outlook 2003 is version number 11. Therefore, if I wanted to target this specific email client I could use <!- -[if mso 11]>. However, the current version is still classed as MSO 16 and cannot be targeted by using this method. A full list of Outlook email clients and version numbers is available here.
With new features come more problems. Recently fellow Email Geek Anne Tomlin wanted to target this new version of Outlook as there were some padding/layout issues. This led Rémi Parmentier and me to try and find a solution. Rémi pointed out that the latest version of Outlook also support Scalable Vector Graphics (SVG) but they show as backward compatible. Therefore, there must be something that Outlook adds to make it that way.
To test this theory I sent Rémi an email with different SVG images contained in it using different methods. One using the SVG icons that have been added to the new Outlook’s insert ribbon.
Two. Created an SVG File and inserted it manually.
Three. Using an old insert HTML as text method to put SVG code into Outlook and send it.
Each time Outlook converted these SVGs into JPGs, a common image format that is supported on all email clients. The output code can be seen below:
Therefore the hunt continues for a solution to target the latest version of Outlook. If you have any ideas on how to do this feel free to reach out to me on Twitter or the EmailGeeks Slack Group.
