How to Create Excellent Emails for Outlook.com
This post was updated on January 29, 2019. It was originally published in November 2013 and updated in April 2018.
Since Microsoft migrated all of their users from the old Hotmail platform, Outlook.com has grown by leaps and bounds. Despite the facelift, Hotmail and Outlook.com are almost identical under the hood and this tricky client is still giving everybody a run for their money.
Tricky clients like Outlook are one of the most important reasons to test your email before you hit "send." It's also crucial to look at your email analytics to find out what email clients your subscribers are using, so you know what type of code and workarounds you may need. Luckily, Email on Acid can help you do both.
If you find yourself coding for Outlook.com users, make sure you check out our list of must-have tips below:
- Outlook.com adds spaces under images
- Margins are back
- Background images don't repeat
- Outlook.com and links
- The "blank email" bug is no more
- Media queries are out (for now)
- You can target Outlook.com
Table of content
- 1. Outlook.com adds spaces under images.
- 2. Margins do work in Outlook.com.
- 3. Background images don't repeat.
- 4. You must include http:// or https:// in your links.
- 5. The Outlook.com "blank email" bug has been fixed.
- 6. Outlook.com does not recognize media queries (for now).
- 7. You can target Outlook.com.
-
01
Don't guess, test
1. Outlook.com adds spaces under images.
Like many webmail clients, you may find space appearing under your images in Outlook.com. The fix, which is quite common in the email development world, is simple. Add the style below:
style="display:block;"This code should completely remove the floating space below images.
2. Margins do work in Outlook.com.
Years ago, we believed that margins didn't work in Outlook.com. We later learned that wasn't quite true; thanks to a weird bug with Outlook.com, you needed to include a capital letter in your margin declaration.
However, with the recent changes to Outlook.com, have made to their webmail, we're now happy to report that you can use margins just as you would anywhere else!
3. Background images don't repeat.
Good news: You can use background images in Outlook.com. However, there are a few caveats to consider. First, the repeating background CSS is not supported:d
background-repeat: repeat;This shouldn't be a major issue for anyone adding background images, but you'll need to make sure your images are large enough to cover the area, rather than repeating the image. It's also worth noting that you'll need to declare your background images using HTML:
background=""Rather than CSS:
style="background:();"Outlook.com will only support backgrounds declared with HTML.
4. You must include http:// or https:// in your links.
The way Outlook.com handles links is one of the most common and frustrating bugs. Whenever adding a link in your email, you need to include http:// or https:// otherwise Outlook.com will display your link in the email. You'll also need to make sure your href tags aren't empty, as Outlook.com will strip those but leave the content. See the example below:
<a href="www.example.com">Click me!</a>Will be displayed as [example.com]Click me!
<a href="http://www.example.com">Click me!</a>Will be displayed as Click me!
5. The Outlook.com "blank email" bug has been fixed.
Previously, Outlook.com would be very selective with what it displayed. Aptly named the "blank email bug," this bug would cause Outlook.com to show a blank white email, rather than your content. It would do this if you included any HTML, comments, or emojis in your <style> block. Thankfully, since then Outlook.com has sharpened up quite a bit, and this is no longer an issue.
6. Outlook.com does not recognize media queries (for now).
Unfortunately, Outlook.com will not respect media queries. Although media queries are primarily used for creating responsive email, they have a lot of uses in coding for webmail and desktop clients, too. Media queries can be used for webkit targeting, progressive enhancement, and interactive email, to name just a few.
There may be a light at the end of the tunnel, though. In late 2018, Rémi Parmentier noticed that Outlook.com was starting to test out support for media queries. We may see media query support soon enough.
You can check out our tips and tricks section for workarounds to help with this issue.
7. You can target Outlook.com.
Pioneered by the incredible Rémi Parmentier, there is now a way to specifically target code for Outlook.com.
Outlook.com will prefix styles in their own special way. This means that you can include a style that will be ignored by all other email clients, but prefixed and parsed by Outlook.com. See the example below:
[owa] .foo { color:red; }Will become:
.rps_a113 .x_foo { color:red; }Outlook.com will recognize this code, but it will be ignored by other clients. Thanks again to Remi for this helpful hack.
Are we missing anything? Let us know in the comments below, or hit us up on Facebook or Twitter, and we'll add it to our list!!
Don't guess, test
The updates to this article are a perfect example of how email clients are constantly changing, which is why it's important to test your email every time; what worked yesterday might not work today. Email on Acid offers unlimited email testing on more than 70 clients and devices, so you can make sure your email looks good before it hits the inbox. Want to see for yourself? Take advantage of our free, seven-day trial.
