Techniques for Excellent Emails in Outlook.com

Mar 2017 Update:
This article has been updated to address updates. Outlook.com has come on leaps and bounds since this article was originally published. As a result, this article is drastically different to the one first published.

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. Check out our list of must-know tips for Outlook.com, below.

  1. Outlook.com adds spaces under images.
  2. Margins are back
  3. Background images don’t repeat.
  4. Outlook.com and links
  5. The “blank email” bug is no more.
  6. Media Queries are out.
  7. You can target Outlook.com

1. Outlook.com adds spaces under images.

Like many webmails, you may find space appearing under your images in Outlook.com. The fix, which is quite common in the email development world, is fairly simple. Simply add the style below.

style="display:block;"

This should completely remove the floating space below images.

2. Margins are back.

When this article was originally posted four years ago, we were of the belief that margins just didn’t work in Outlook.com. We later learned that wasn’t quite true, thanks to a weird bug with Outlook.com you’d need to include a capital letter in your margin declaration.

With the changes 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.

You can use background images in Outlook.com which, in itself, is good news! However, there are a few considerations to use. The following CSS will not be supported:

background-repeat: repeat;

It shouldn’t be a major issue for anyone adding background images. You’ll just need to make sure your images are large enough to cover the area. It’s also worth noting that you’ll need to declare your background images using HTML:

background=""

Rather than CSS:

style="background:();"

As Outlook.com will only support backgrounds declared with HTML, ignoring those done with CSS.

4. Outlook.com and links.

This is currently one of the most common bugs with Outlook.com; the way it handles links. Whenever adding a link in your email, you should ensure the link includes http:// or https:// otherwise Outlook.com will display your link in the email. You’ll also need to ensure your href on a tags aren’t empty, as Outlook.com will strip those but leave the content. Please see the example below.

Click me!

Will be displayed as [example.com]Click me!

Click me!

Will be displayed as Click me!

5. The “blank email” bug is no more.

Previously, Outlook.com would be very selective with what it allowed through 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 block. Thankfully, since then Outlook.com have sharpened up quite a bit and this is no longer happening!

6. Media Queries are out.

Some bad news, Outlook.com will not respect Media Queries. Although Media Queries are primarily used for handling mobile responsiveness, they have a lot of uses in coding for webmails and desktop clients too. Media Queries can be used for webkit targeting, progressive enhancement, and interactive email, to name just a few.

7. You can target Outlook.com.

Pioneered by the incredible Rémi Parmentier, there is now a method you can specifically target Outlook.com. To put the hack into easy to understand terms, 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; }

While you can see Outlook will respect it, it will be ignored by other clients, Very cool! Thanks again to Remi for such an amazing method.

Noticed anything we’re missing? Let us know in the comments below, and we’ll add it to our list!

Don’t guess, test

The changes to this article are the perfect example of how email clients are ever changing. It’s important constantly test your emails, what worked yesterday might not work today. This is why we’re offering you a 7 day free trial of our email testing.

.pre {margin-left: 20px;}
.anchor_link {text-decoration: none; color: black;}

Leave a Reply