12 Techniques for Excellent Emails in Outlook.com

Geoff Phillips | 2013-11-25T19:46:13+00:00 | email on acid logo

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. Emails in Outlook.com aren’t centered by default.
  2. Recommended embedded CSS for Outlook.com.
  3. Margins aren’t supported in Outlook.com.
  4. Outlook.com makes headers green by default.
  5. RGB borders aren’t supported in Outlook.com.
  6. The “blank email” bug.
  7. Outlook.com enforces 131% line-height.
  8. The Outlook.com doctype creates space under images.
  9. Outlook.com can screw up spacing on small fonts.
  10. Outlook.com converts some symbols to images.
  11. Outlook.com won’t display images that are too wide.
  12. Floats don’t work in Outlook.com.

1. Emails in Outlook.com aren’t centered by default.

Outlook.com places your email inside a div with a class named “ExternalClass” – here are the properties they have set on that class:

.ExternalClass{display:inline-block; line-height: 131%};

This has no effect on your email when using IE but every other browser the email will not be centered.

To overwrite this simply include this in your embedded CSS:

.ExternalClass {width: 100%;}

2. Recommended embedded CSS for Outlook.com.

This code is a one-stop-shop for a number of Outlook.com fixes. Remember to remove the comments, or you’ll get the blank email bug!

<style type="text/css">
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Outlook.com************/
.ExternalClass {width: 100%;}
</style> 

3. Margins aren’t supported in Outlook.com.

Yeah, you did read that right! It does not support any of the “margin” elements, including “margin-top,” “margin-bottom,” “margin-left” and “margin-right.”  This, coupled with the Outlook 2007 and 2010’s “padding” issues on paragraphs and spans can make life difficult.

 

4. Outlook.com makes headers green by default.

Microsoft likes the color of money so much, they added this to Outlook.com’s default CSS:

h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}

To overwrite it, use the same code in your embedded CSS and change the color:

<style type="text/css">
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
</style>

5. RGB borders aren’t supported in Outlook.com.

Outlook.com does not support border color in this format: rgb(167, 194, 117) – it seems that the entire “border” declaration along with properties are ignored if you use this method for border color, same for border-bottom, right, left, top.

6. The “blank email” bug.

If you include any HTML code in your style block, even inside comment tags, Outlook.com will display a blank white email. This is because the display breaks in the style block, before any of the HTML in the body of your email is read. To avoid this, do not include HTML in your style block.

7. Outlook.com enforces 131% line-height.

Outlook.com includes the following in their linked style sheet:

* {line-height: 131%}

To overwrite it, use the following in your embedded CSS:

.ExternalClass * {line-height: 100%} 

“.ExternalClass” is required and it is specific for Outlook.com only.  They wrap your layout inside a div with a class= “ExternalClass” so there is no need to include a reference to it other than in your embedded CSS.

Here is more on that topic: http://www.emailonacid.com/forum/viewthread/43/

8. The Outlook.com doctype creates space under images.

Here are a few workarounds (these work in Gmail and Yahoo as well):

1.) Add style display:block to the image element

<img src="test.jpg" style="display:block">

2.) Add align absbottom in the image element

<img src="test.jpg" align="absbottom">

3.) Add align texttop to the image element

<img src="test.jpg" align=" texttop ">

4.) Add line-height 10px or lower in the containing TD

<td style="line-height:10px"> 

5.) Add font-size 6px or lower in the containing TD

<td style="font-size:6px"> 

For more workarounds check out this blog article: 12 Fixes for Image Spacing

9. Outlook.com can screw up spacing on small fonts.

This one is also because of the DOCTYPE. Try putting your font inside a paragraph tag instead of using a font or span tag.  Another way to get around this is to define a line-height and/or font-size in the containing TD.

10. Outlook.com converts some symbols to images.

Outlook.com converts the following symbols into large image representations of the symbol.

® (®), ™ (™), ©(©), ♠ (♠), ♣ (♣), ♦ (♦) ♥ (♥).

There are two possible fixes:

Option 1.) Add this to your embedded styles:

<style type="text/css">
.ExternalClass .ecxhm { display:none; }
.ExternalClass .ecxhm2 {
    display: inline !important;
    font-size: 11px !important;
    color:#666 !important;
}
</style> 

Here’s your html:

<span class="hm">®</span>
<span class="hm2" style="display:none; font-size:0; color:#FFF">(R)</span>

The second version (class hm2) will only display in Outlook.com, all other clients will display the first class.

Here’s more on that.

 

Option 2.) Add this to your embedded:

<style>
.hmfix img{
    width:10px !important;
   height:10px !important;
   }
</style>

Then reference your symbols like this:

<span class="hmfix">©</span>

11. Outlook.com won’t display images that are too wide.

Don’t get stuck with Outlook.com’s “WIDE LOAD” sticker. If your email exceeds the reader’s browser window width minus 370px, your email will get cut off along the right side and a yellow box will appear saying the following:

“This message is too wide to fit your screen.  Show full message…”

In general, it’s best to keep your email under 630px wide. This would presume that your average user will have their browser window sized to at least 1000px wide.

Here’s more on that topic…

12. Floats don’t work in Outlook.com.

This should come as no surprise to you veteran coders out there, but Outlook.com doesn’t support floating elements. We recommend using tables and “align” instead.

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

Submit a Comment