Mar 2017 Update:
This article has been updated to address updates. 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, 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. Check out our list of must-know tips for, 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.
  7. You can target

1. adds spaces under images.

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


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 We later learned that wasn’t quite true, thanks to a weird bug with you’d need to include a capital letter in your margin declaration.

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


Rather than CSS:


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

4. and links.

This is currently one of the most common bugs with; the way it handles links. Whenever adding a link in your email, you should ensure the link includes http:// or https:// otherwise will display your link in the email. You’ll also need to ensure your href on a tags aren’t empty, as will strip those but leave the content. Please 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 is no more.

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

6. Media Queries are out.

Some bad news, 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

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

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;}

Original Source



Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.