Outlook: Can’t live with it, can’t live with it…

6 min readMar 22, 2015

Outlook has long been a problem for anyone and everyone working in email marketing. Since its change from the Internet Explorer rendering engine to Microsoft Word back in 2007, the problems with Outlook have been endless. So much so, a quick Google of ‘why we should stop using Outlook’ retrieves over 135 million hits!

In addition to that, a campaign was created by frustrated designers back in 2009 called fixoutlook.org, which was set up to raise awareness to Microsoft at how poor and frustrating Outlook is. Within 24 hours, it had 20000 tweets from supporters around the world, and the campaign got mentioned on the likes of CNN news and Reuters, as well as being nominated for a .Net Best of Web awards! It certainly isn’t just me who has grew sick of Outlook!

So why do I feel so passionately about this and why should we stop using it? After all, it is the world’s most popular desktop mail application. For now…

Usage

Open rates for Outlook have dropped massively over the past couple of years. In 2011, 43% of emails were opened in Outlook, compared to just 9% in 2015. It is also now just 1% above Apple Mail — a far superior desktop mail app with much greater support for email!

So the first point is that less people are opening email in Outlook. Why’s this? This could be for a number of reasons, the most probable being the surge in popularity of Apple devices, which now accounts for approximately 46% of opens. The significance of this is that Apple devices have far greater support for advanced HTML/CSS. Simply put, they can render much better emails!

So why should email designers be held back by Outlook’s limitations when more people open email on devices that can render more advanced technology? It seems strange that we should ‘dumb down’ email for the minority, rather than designing more progressive emails for the majority of recipients.

Outlook rendering engine

Outlook wasn’t always bad! In fact Outlook 2003 was a decent email client, with a good level of support for email. But something terrible happened between 2003 and the 2007 release, as Microsoft decided to drop Internet Explorer as its rendering engine, and instead use Microsoft Word. No one really knows why, although this post from back in 2007 offers some theories! What we do know though, is that the support for even the more simple HTML/CSS techniques (such as background images, or margins) were dropped, and instead we were left with many sleepless nights just trying to get a block of text to line up with an image…

Microsoft are aware of these frustrations, but have yet to act upon them, despite releasing 2010 and 2013 versions. The nightmare doesn’t look to end either, as the 2015 press release suggests that Word will still be the rendering engine of choice for the next Outlook release…

Lack of support for… almost everything!

Well, maybe that’s a bit extreme, but there is some truth in the statement. Due to the previously mentioned change of rendering engine to Microsoft Word, email support took a huge dip, and even the basic CSS techniques became irrelevant to Outlook. This includes the likes of background images (unless you use this fix…), hover affects, positioning, border-color, display property, animated gifs, CSS3 (including animations and media queries), web fonts… The list is almost endless. And these things do work in the likes of Apple Mail, iPad, or iPhone, so email technology isn’t an excuse!

In addition to this, Outlook has further rendering issues in terms of width and height properties. For instance, fluid images don’t render well in Outlook, and it doesn’t support max-height / min-height properties. However one of the biggest issues relates to setting the height of table cells. Let’s say for example, you want a 5px line-break. You might insert a table with one row, and a height on the table cell of 5px, with a spacer gif/‘styled out’ character. Outlook doesn’t like this… Anything below 15px in height and Outlook will bump it up, meaning your divider lines are suddenly clunky. There is a fix for this however it still makes things difficult for email designers!

Adds many quirks

Not only did the change of rendering engine throw up support issues, but it also added in a number of quirks to the design process. The first thing being the padding that gets added around an email (around 15–20px). This might not seem like a big problem, but if you are wanting things to be pixel perfect then you are going to be disappointed!

Outlook can also be troublesome when it comes to using web fonts. A common problem I’ve found is if you are using, for example, a Google font like ‘Open Sans’, instead of following the font stack and reverting to a specified font like Arial, it reverts to Times New Roman. We have tried numerous fixes for this but nothing seems to work consistently, and it even seems like it’s individual computers that are affected like this, rather than a version of Outlook as a whole (making it difficult to test!). One thing we have found that works is to use MSO statements to overwrite the web font and to use Arial instead. For example:

<! — [if (gte mso 9)|(IE)]><span style=”font-family: Arial, sans-serif;”><![endif] →<! — [if mso]><span style=”font-family: Arial, sans-serif;”><![endif] →

Example title

<! — [if mso]></span><![endif] →<! — [if (gte mso 9)|(IE)]></span><![endif] →

</td>

This works well if you have just one or two instances of the web font, however if your entire email is made up of numerous sections with the web font then your HTML can get messy!

One of the sillier Outlook quirks only appears if you have a long email. You may have noticed seeing gaps rendering in your emails within Outlook. This is because the rendering engine — Word — renders email like it would render a word document. Meaning once the email reaches a certain length, a ‘page break’ is inserted. Why this hasn’t been fixed is beyond me, but it is just another quirk we have to be wary of!

A big issue that I feel will become more noticeable is regarding Outlook on newer Windows computers. You may have noticed your emails appearing zoomed in on some machines, and this is due to the HiDPI display, scaling your emails by 200%, often making them appear broken. There is a fix for this (which is explained here), but once again it adds extra work for email designers, which adds time and cost to the project!

Images…

Unlike most other email clients, Outlook doesn’t download images automatically. This isn’t a new problem, and until recently most email clients didn’t download images automatically either, but they often had good fallbacks. For instance, styled alt text / table cells to explain the image (not only good from an accessibility point of view!) — which led to some quite creative solutions! However… Outlook doesn’t really support alt text. Well it does to an extent, but before the alt text is shown, Outlook inserts a big long explanation message as to why images weren’t downloaded. It also doesn’t support any styling of the alt text or table cells, meaning your emails will look like big white boxes with security messages in. Not exactly engaging or helpful for recipients with visual impairments!

Outlook for Mac

For me, one of the strangest things about Outlook is how well it works for Apple Macs. I just don’t understand why a company (Microsoft) would make a product that works terrible on its own platform, and great on a rival’s (Apple)!

Like Apple Mail, it uses Webkit for rendering, meaning support for the likes of HTML5 video, web fonts, animated gifs, styled alt text… And although it doesn’t automatically download images, overall it works great on a Mac (as far as Microsoft functionality goes anyway…)!

In conclusion…

So, unless you have a high database of Outlook opens (my guess would be mainly B2B companies), my advice would be to stop worrying about the limitations of Outlook which has held email back long enough, and concentrate on the more progressive nature of email!

Next up, why we should drop Gmail…

Originally published at www.communicatorcorp.com.