Click to Sign Up for a 7 Day Free Trial!

Email Development

Techniques for Excellent Emails in Outlook.com

Email On Acid

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.

<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 "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 <style> 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.

About the Author

Alex Ilhan

Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism.

Join the Discussion

Hello,
did you ever found out about the display errors occuring when you forward an email (which looked beautyfull) from outlook 2010 to another outlook 2010 account? Or even worse from/to OWA? Tables are moving, mobile elements are not hiding anymore - it really gives me a headache...
denverwahn
Nice post. I was checking constantly this blog and I
am impressed! Extremely helpful information specially the final phase
smile I deal with such info a lot. I used to be seeking this
certain information for a very lengthy time. Thank you and best of
luck.
Mucahit kutukde
Why does it always look like Microsoft is trying their utmost to screw everybody/everydev over?

There are no words for that.
Incredible
Given that .myclass becomes .ExternalClass .ecxmyclass

...to target outlook.com exclusively I added a class to the heading I wanted to affect:

<h1 class="outlookdotcom">

...then added the following css

.ecxoutlookdotcom { padding-top: 10px;}

(margins not supported at all so use padding exclusively for outlook.com instead)
Martin Ford
Hi,
Hoping someone out there can help me figure this out.
Needless to say, Outlook is the bane of my existence. We have an html template that manages to get Outlook 2010 on the PC to render acceptable, but Outlook 2013 on the PC (running Win7) is impossible to figure out. It appears that O2013 increases the font sizes by 1.5x or so, which then breaks the layout and forces the tables to blow past the container width. The fonts are HUGE, I mean my mom could read them w/o glasses, yet in O2010 they are correct (as they are in pretty much anything else).
If anyone has a possible workaround for me to try I would really appreciate it. I am a "designer" who does some code, not the other way around and this whole Outlook email thing makes me want to shoot myself. (if you can't help, I'll need to find a good shrink, and another job! I think I may have PTOS, post-traumatic-outlook-syndrome! LOL).
stephen Guy
We have recently noticed that our emails are not rendering in Outlook.com correctly. If we put more than a couple images it will jumble them up and make them look very bad. One email it took the image and link from one piece and combined it with a bulletproof button from another element. I have yet to find a fix or workaround on any other site.
JessiHD
Hi, Geoff

Great article,

I've been struggling width Outlook.com. One thing i don't understand is why you recommend in your resset p {margin-bottom:0;}, if next paragraph explains Outlook.com don't supports margins.

Also, is "px" missing in that rule?

Maybe i have misunderstood something, sorry in advance
Eva Collados Pascual
Eva,
Good catch! That code is from our boilerplate and shouldn't be in this article. You're right that it wouldn't function.
Geoff Phillips
Hi Geaoff,

Thanks for your response. I've tried everything to get rid of that extra space. Finally i've changed my html structure and used
. But there are situations in which i need to hide some text blocks on mobile, and would like to have it in a separate <td> and this way Outlook ads a .

Also imposible to avoid the blue links text decoration.

I was making an Outlook signature, so the code was preprocesed by outlook before sending. Arrrg.
Eva Collados Pascual
Hi Geoff,
great post, maybe I'm late. tongue laugh
Just a small update: adding font-size in the <td> style, it would affect also the size of the alt image..damn! Anyone with the same problem?
Giulia
Hi Geoff, good article, but i have a question about sendings mails. When i insert html into the mail, if an image is contained in a tag like div or table, the image does not show, only it shows when the parent tag of an image is body, i have embedded css and everything works fine outside outlook. Would you have an idea where is the solution? Thanks.
Victor
Victor,
I have never heard of that particular problem. Have you tried using our testing system? It will analyze your code to find elements that are incompatible with each email client.
Geoff Phillips
Thanks, i am going to try it.
Victor
I'm having a really weird issue where email sent by my app is being rendered incorrectly in Gmail. Specifically, when I do "Show Original" in Gmail to see the source for the email, it is showing a <span> tag cut-off so <s appears on one line and pan> appears on the next line. It is then interpreting the <s as strikethrough so the rest of the email appears in Gmail with strikethrough. The same email looks fine in other email clients.
Adam Sinclair
Great article! #8 display:block; fixed a bit of background showing between an image and the block below it! Thank you!
Brent Carter
Oddly enough only Outlook.com is adding 18px bottom margin to all my tags via this line...
margin: 0 0 1.35em 0;

from this style sheet...
https://a.gfx.ms/wlx_sharedCtrl_yOzMN_fVHUUd5Wu-5E-6wQ2.css

Gmail, Yahoo, and even Outlook 2013 are not affected.
Brent Carter
I know nothing about coding. Where do i go to insert these codes? What codes do i need to use to place an image in the body of an email and have it appear centered and full screen when the recipient opens the email?
Vanessa Acuna
Vanessa,
Most ESPs (Email Service Providers) have a place to enter HTML for your email. I would recommend that you download a template which has a centered image. You can grab our template here: https://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i
Geoff Phillips
Hi,
I've found an issue on outlook.com via mobile browser that I can't fix!
It displays my email much bigger than it should and you can't see the whole newsletter on the screen but you have to move around(zoom out doesn't work!).
How can I fix this issue?
Many thanks!
simona
Great post. The info here is really helpful. I could not find any website hosting CSS snippets for different clients just like CSS templates for different web layouts.
Vikas
Hi,
I qant to send hidden content in email. So i used input hidden field which not supported in outlook and webmail. I want solution that will work in gmail,hotmail,outlook or webmail or any email clients. I want to send hidden content in email and then read it from email..how i can do that? Thanks in advance..
Alpesh
If you had a fixed with site that was non-responsive, then there would be no trickery to achieve this. We're in the age of responsive web design though, so that's a no-go. Fear not! We have some nice CSS at our disposal.
Steve Mark
The new Outlook Mail (Preview), which was previously hotmail, is adding "x_" to the beginning of my classes. It also randomly decides to override text-decoration and color styling. Anyone else experiencing this? So far, I am unable to find a solution.
Liz
I am having a problem in outlook.com and office 365 underlining text that is after a link. Anyone have any experience of this?
marketingdesign
denverwahn
Do you mind if I quote a few of your articles as
long as I provide credit and sources back to your webpage?
My blog site is in the exact same niche as yours and my users would certainly benefit from a lot
of the information you provide here. Please let me
know if this okay with you. Appreciate it!
Best Home Remedies for Autoimmune Diseases
Absolutely. We love our blogs being shared with fellow email lovers.
Mallory Mongeon
When we send newsletter to our mail id I encounter issue in outlook 2010 and 2013.i am getting more space between the text. Help me in resolving it. Thanks.
Senthil
Senthil,
Unfortunately these problems are hard to diagnose without looking at the code. If you'd like to make a post on our forum, somebody from EOA or the community will help you soon.
https://www.emailonacid.com/forum
Geoff Phillips
To create a responsive newsletter that is visually acceptable in any version of Outlook it sometimes requires hours of extra coding on top of the 15 to 20 minutes it takes to create a responsive newsletter that can be displayed without any flaws by pretty much any other email client.

The total ignorance and disregard for any standard other than the one they come up with themselves is mind blowing. The fact that they seem to be very persistent in changing their own standards with almost every new version of Outlook seriously doesn't help.

Personally I think the developers of Outlook deserve a special place in hell, right next to Hitler.
Andrew
Hi, I have an issue with outlook.com. I add an image with style="display:block;" . Outlook add a div with style="display:inline-block;"

Like this :

<td align="center" valign="top" style="padding:0px; margin:0px">
<div style="display: inline-block;">http://www.test.com/test.png</div>
</a></td>

What can I do ?

I tried to but a css style for all div in the head.

Thx
Steve
display:block no longer works for me for Outlook.com or Office 365. Any ideas?
hwickham
My colleague and I have noticed there's a difference in rending in emails from hotmail.com and in this case live.nl addresses. While live.nl works fine with display block on images to remove the space below, I've seen my images (in an email send to my hotmail.com address) being wrapped in divs (and a button tag if the image isn't wrapped in an link). These divs (with style display inline-block) inherit a style from outlook.com itself:

._rp_o5 {
font-size: 15px;
}

Which causes a space of 4px to appear below all images. To remove this we've started adding an extra reset style in the head resetting the font-size of divs (and table, tds and buttons to be sure) to 0px;

It seems to do the trick (for now at least, until the next update probably). I find it very odd that email address from Microsoft themselves render differently in their own program. Especially hotmail.com addresses, which are very popular.

I also find it very odd that until a couple of months ago my Outlook.com app showed the mobile view of my templates and suddenly with an update it stopped working. Around the time the Gmail app started supporting media queries.
Marjolein
Just installed Microsoft Outlook app on Android and logged in with an @outlook.com account. Media queries appear to be supported. I haven't used any special hacks. Rendering appears to be better than Gmail...
Carlito
Hello friends,
I have been through the same problem, what is the provisional solution?

td div{
display:block !important;
}
td > .o365button{
display:none;
}
Thanks!
Douglas Xavier
I noticed that "display:block" doesn't solve the image space issue any more. my solution was to wrap the offending images with a <div> and setting the max-height value equal to the actual image height. If the image is linked you need to make sure the div is wrapped around the <a> tags as well.

<div style="max-height: 200px;">
image.jpg
</div>
Steve Verseckes
Good afternoon, display:block no longer works for me for Outlook.com or Office 365
What is the provisional solution?
Thanks
Douglas Xavier
Marjolein,
I don't suppose you could share the extra reset style code you use as i can't seem to get this to work. Outlook is so frustrating! Many thanks
Simon the Boy Wizard
Hi Simon, I'm using another reset now found on here https://litmus.com/community/discussions/6314-gap-under-images-on-office-365-and-outlook-com
I add a class to every td with an image in it that needs to connect with the content below and add .class-name div, .class-name button { display:block! important} to the reset at the top in the head. That seems to do the trick. Sometimes I need to add an extra reset of font-size:0 to make it work.

Cheers,
Marjolein
Marjolein

Leave a Comment