

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
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.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
10 thoughts on “How to Create Excellent Emails for Outlook.com”
Comments are closed.
The note about leaving href tags empty or with placeholder URLs is important particularly for testing purposes– I’ve found that if you do this when testing bulletproof buttons, Outlook.com will strip the links but also throw off your layout and fill cells with the wrong colors.
I can’t figure out how to center my content in outlook. I’ve tried all the tricks I can find online, using “Margin: 0 auto;” and alight=”center” but nothing seems to work. Help!
alight=”center” on td works!
wow, thanks for this amazing post about how to create excellent emails for outlook, this is really very helpful for everyone!
I’ve updated the automated emails which get sent to customers through my website and now my Outlook 2007 client won’t display any of the images in my emails anymore. This is only related to emails being received/sent from my website domain while all other addresses/domains seem to work just fine.
I only modified email content like text and spacing, most parts had not had any modification at all for example the site logo, this was showing before but now like all the images is just a red x.
Any clues?
Targeting outlook.com using [owa] doesn’t appear to work for me
Make sure you add a space after the selector so it’s [OWA] .foo not [OWA].foo.
And you might have to add !important
Hi,
Do you know if there is a way that outlook could show the images on email load?
I am sending an email with the main image and when I open it on outlook it does not look good because the image not loaded until the user decide to load the images of the mail
The latest version of Outlook (in my Chrome browser, anyway) displayed a blank email, even though it tested fine here on earlier Outlook versions. We’ve been having other odd issues too since the “new” Outlook – worst one was a blank email with the inserted text “Getting too much mail from [sender]? You can unsubscribe!” with a link to a popup saying that the sender didn’t provide unsubscribe info (patently false) so Microsoft will do it for you. GAAA!