Microsoft Outlook Version Targeting

For each Microsoft Outlook client, there is a version number. Here is the rundown. This knowledge allows the targeting of specific problems.

All of Outlook

If MSO
<!--[if mso]>CONTENT<![endif]-->
If not MSO
<!--[if !mso]><!-->CONTENT<!--<![endif]-->

Greater than or less than a specified version

Greater than
<!--[if (gt mso 9)]>CONTENT<![endif]-->
Greater than or equal to
<!--[if (gte mso 9)]>CONTENT<![endif]-->
Less than
<!--[if (lt mso 16)]>CONTENT<![endif]-->
Less than or equal to
<!--[if (lte mso 16)]>CONTENT<![endif]-->

Outlook and IE

<!--[if mso|(IE)]>CONTENT<![endif]-->

Version 8 (Outlook 97 and Outlook 98)

<!--[if (mso 8)]>CONTENT<![endif]-->

Version 9 (Outlook 2000)

<!--[if (mso 9)]>CONTENT<![endif]-->

Version 10 (Outlook 2002)

<!--[if (mso 10)]>CONTENT<![endif]-->

Version 11 (Office Outlook 2003)

<!--[if (mso 11)]>CONTENT<![endif]-->

Version 12 (Office Outlook 2007 and Outlook 2008 for Mac)

<!--[if (mso 12)]>CONTENT<![endif]-->

Version 14 (Outlook 2010 and Outlook 2011 for Mac)

<!--[if (mso 14)]>CONTENT<![endif]-->

Version 15 (Outlook 2013)

<!--[if (mso 15)]>CONTENT<![endif]-->

Version 16 (Outlook 2016)

<!--[if (mso 16)]>CONTENT<![endif]-->

“A Tag” // href // Link

Make sure the URL has http:// or https://. Include target=”_blank” for the instances where a user has navigated to the “View Online” version of the email.

Underline

<a href="http://tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:underline;">Structure of an A Tag</a>

No Underline

<a href="http://tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:none;">Structure of an A Tag</a>

Mailto

<a href="mailto:email@tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Mailto with Subject Line

<a href="mailto:email@tabletrtd.com?subject=table%20tr%20td%20Loves%20You!" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Mailto with Subject Line / CC / BCC

<a href="mailto:email@tabletrtd.com?cc=email@tabletrtd.com&bcc=email@tabletrtd.com&subject=table%20tr%20td%20Loves%20You!" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Telephone

<a href="tel:555-555-5555" target="_blank" style="color:#3182c1; text-decoration:underline;">This will launch a Phone Call</a>.

Telephone with Country Code

Note: Telephone Tags do not require a country code, but it is good practice to include it.

<a href="tel:+1-555-555-5555" target="_blank" style="color:#3182c1; text-decoration:underline;">This will launch a Phone Call</a>.

Jump Link

Note: Use an “id” on the <td> and a “name” on the <a> (href) tag. There must be a pound sign (#) before the value name in the href field.

Link
<a href="#JumpLinkSection">Jump To Jump Link Section</a>

Destination
<td align="left" valign="top" id="JumpLinkSection"><a href="http://tabletrtd.com" name="JumpLinkSection">This is the Jump Link Section!</a></td>

Keep Black Link From Turning Blue

Black fonts using Hex Code #000000 that are linked will turn blue in some email clients. Update all #000000 Hex Codes to be #000001, and the Font will remain Black in all email clients.

Image Tag Hacks

Spacer with &nbsp; (no image needed)

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
 <tr>
   <td height="20" align="left" valign="top" style="height:20px; font-size:0; line-height:1px;">&nbsp;</td>
 </tr>
</table>

Short Image (under 20px high)

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:10px;"><img src="http://placehold.it/500x10" alt="" width="500" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Height

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td height="20" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="20" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Height (under 20px high)

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Width

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td width="20" align="left" valign="top"><img src="images/spacer.gif" alt="" width="20" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Full Width (<hr />)

<table bgcolor="#000001" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td height="1" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

Disable Download Arrow in Gmail

If that little download arrow is showing up on an image in Gmail, the cause is that your image is either 250px wide or 250px high. The quick fix for this is to toss a link around the image and the little arrow will disappear.

Superscripting Guide

Superscript solutions for all types of requirements.

No Superscript
&reg;

Standard Superscript
<sup>&reg;</sup>

Flexible Superscript
<sup style="font-size:9px; line-height:0;">&reg;</sup>

Bulletproof Superscript
<sup style="font-size:9px; line-height:0;"><!--[if (gte mso 9) | (IE 7)]><span style="font-size: 12px; vertical-align: 3px;"><![endif]-->&reg;<!--[if (gte mso 9) | (IE 7)]></span><![endif]--></sup>

Background Color on Entire Email

Here is the code.

<body bgcolor="#eeeeee" style="margin:0; padding:0; width:100% !important; background-color:#eeeeee;">
<div align="center" style="background-color:#ffffff;">
  Build Email Here
</div>
</body>

Here is the breakdown.

bgcolor=”#eeeeee” on <body>
Works everywhere except:

  • Gmail App on Android
  • AOL Web Clients
  • Gmail Web Clients
  • Google Apps Web Clients
  • Yahoo! Mail Web Clients

style=”background-color:#eeeeee;” on <body>
Works everywhere except:

  • Android 4.4
  • Yahoo! Mail Web Clients

style=”background-color:#eeeeee;” on <div>
Leaves white padding around entire email in:

  • Outlook 2007
  • Outlook 2010
  • Outlook 2013
  • Outlook 2016

Convert High Bit Characters to HTML ASCII Codes

&nbsp; ( ) non-breaking space - Mostly used to "glue" the last two words of a headline or paragraph together to avoid "orphans" or "widows".

&reg; (®) registered trademark - Also referred to as an "R ball". This character becomes exponentially more difficult to handle when you want to superscript.

&trade; (™) trademark - This character is already superscripted, and is easy to toss into an email.

&#8212; (—) m-dash (old-school) - This dash is the width of an "m".

&mdash; (—) m-dash (new-school) - This dash is the width of an "m".

&#8211; (–) n-dash (old-school) - This dash is the width of an "n".

&ndash; (–) n-dash (new-school) - This dash is the width of an "n".

&bull; (•) bullet - When creating a bulleted list, be sure to use this code instead of the dark circle character.

&#8209; (‑) non-breaking hyphen - This character will glue hyphenated items together and treat them as one word. Add this to phone numbers (or any hyphenated words) and they will stop breaking onto two lines.

&#8250; (›) greater than arrow - This is a good looking right pointing greater than arrow.

&#9656; (▸) filled in triangle arrow - This is a good looking right pointing filled in arrow that does not turn into an emoji on iPhone.

&ldquo;/&rdquo; (“/”) left/right double quote - Replace any quote marks with the corresponding left or right quote mark. First, because a quote mark from a keyboard is HTML code, and can cause rendering issues. Secondly, because of typography. Quotes look better when they are angled left or right.

&lsquo;/&rsquo; (‘/’) left/right single quote - Replace any apostrophe or single quote marks with the corresponding left or right single quote mark. This is because of typography. Apostrophes and single quote marks look better when they are angled left or right.

&euro; (€) Euro