Coding emails for

How to Create Excellent Emails for

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, has grown by leaps and bounds. Despite the facelift, Hotmail and 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 users, make sure you check out our list of must-have tips below:

  1. adds spaces under images
  2. Margins are back
  3. Background images don't repeat
  4. and links
  5. The "blank email" bug is no more
  6. Media queries are out (for now)
  7. You can target

1. adds spaces under images.

Like many webmail clients, you may find space appearing under your images in The fix, which is quite common in the email development world, is simple. Add the style below:


This code should completely remove the floating space below images.


2. Margins do work in

Years ago, we believed that margins didn't work in We later learned that wasn't quite true; thanks to a weird bug with, you needed to include a capital letter in your margin declaration.

However, with the recent changes to, 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 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:


Rather than CSS:

style="background:();" will only support backgrounds declared with HTML.


4. You must include http:// or https:// in your links.

The way 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 will display your link in the email. You'll also need to make sure your href tags aren't empty, as will strip those but leave the content. See the example below:

<a href="">Click me!</a>

Will be displayed as []Click me!

<a href="">Click me!</a>

Will be displayed as Click me!


5. The "blank email" bug has been fixed.

Previously, would be very selective with what it displayed. Aptly named the "blank email bug," this bug would cause 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 has sharpened up quite a bit, and this is no longer an issue.


6. does not recognize media queries (for now).

Unfortunately, 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 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

Pioneered by the incredible Rémi Parmentier, there is now a way to specifically target code for 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 See the example below:

[owa] .foo { color:red; }

Will become:

.rps_a113 .x_foo { color:red; } 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.