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.

Author: Kyle Lapaglia

Author: Kyle Lapaglia

10 thoughts on “How to Create Excellent Emails for”

  1. 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, will strip the links but also throw off your layout and fill cells with the wrong colors.

  2. 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!

  3. wow, thanks for this amazing post about how to create excellent emails for outlook, this is really very helpful for everyone!

  4. 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?

  5. 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

  6. 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!

Comments are closed.