Unlike other email clients, Outlook 2007, 2010 and 2013 use Microsoft Word to render emails. The result of this is poor support for css and if the height of the email becomes larger than a ‘page’ in Word, Outlook will automatically add a page break which can add unwanted spacing in the email.
Spacing
Outlook ignores set margins on elements, use padding instead.
That being said, some versions of Outlook will ignore both padding and margins on an image. You can either add a border using photo editing software and upload the image to your campaign, or create an empty cell with a set width. This will force Outlook to show the required spacing. If going for the empty cell approach, you need to ensure you declare both the font size and line height as 1px, this will prevent Outlook from inserting its default font size and creating a larger gap than you intended.
Outlook will not pay attention to any float declarations to position content. Instead you should use text-align on table cells, or align on a table.
Images
Background images are not supported in most versions of Outlook. You can use Microsoft’s Vector Markup Language (VML) to target Outlook specifically to show a background image. The syntax is different to HTML but can be embedded within HTML, as below:
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" /> <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'> <div> <![endif]--> <table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;"> <tr> <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;"><span>Text</span></td> </tr> </table> <!--[if gte mso 9]> </div> </v:shape> <![endif]--> </td> </tr> </table> When using a background image, ensure you have set an appropriate fall back colour that will maintain a high contrast between the text and the background if the image cannot be displayed.
Animated gifs have limited support in Outlook. Some versions will only show the first frame as a static image. For this reason it is important to ensure all your important information is contained within the first frame of the animation so that nothing is lost if the animation cannot be played.
It is best practice to ensure that you are uploading your images at the correct size, however if you are using retina images then you need ensure that you declare the size of the image in both the html and the css.
Other CSS limitations
Custom fonts are not supported in some versions of Outlook. If you declare a custom font, you need to ensure that you have a web safe fall-back font that Outlook can use as an alternative. Examples of web safe fonts:
Arial
Comic Sans
Courier New
Georgia
Impact
Palatino
Times New Roman
Trebuchet
Verdana
Text shadow isn’t supported in Outlook – if your design relies on text shadow, consider uploading the text, with the shadow as an image as this guarantees your shadow will be displayed. However, be wary not to use too many images in place of text as email clients look for a good ratio of image to text. Too many images can make them flag your email as spam.
Outlook doesn’t support the opacity css property, ensure you have a suitable fallback if using this property. As above, you can upload an image with the required opacity in place if you rely on this.
Outlook doesn’t support the HTML5 video property. If you wish to place a video in your email, the safest way to do this at the moment is to use an image that links to where the video is hosted online. You can use a gif here to add interest.
Unfortunately the way that Outlook, or other email clients, display HTML email is beyond our control as an Email Service Provider. However, if you use the above workarounds, there is nothing stopping you from creating beautiful looking emails that look great in all major email clients.