Some of the tips provided in this article assume that you have a working knowledge of HTML. Please remember that Pardot Support is unable to help troubleshoot custom code.You may have had some issues with your HTML emails looking great in email clients like Gmail or Apple Mail but rendering poorly in Outlook. Newer versions of Outlook use Microsoft Word to render HTML, which can sometimes mess with your formatting and turn a beautiful email into a broken one.
Although you can't anticipate every formatting issue that could happen, there are a few things you do to avoid having your emails looking too terrible in Outlook.
What Outlook Doesn't SupportOutlook does not support the following features, so try to avoid them where you can:
- Animated GIFs. Outlook only displays the first frame of GIFs.
- Background Images. Outlook will not display them.
- CSS in the <head> tag. If you need to use CSS in your emails, make it inline, but keep in mind that there are several CSS attributes that Outlook doesn't support.
- Padding for <div>, <p>, and <a> tags. Outlook ignores it. Use hspace or vspace attributes on images or tables to format your content.
- Width for <div> and <p> tags. Outlook ignores it. Use hspace or vspace attributes on images or tables to format your content.
Other Issues with Outlook and HTML Emails
Line spacing issuesIf you don't specify a line height, Outlook will choose one for you. This shouldn't be a problem if you're using one of Pardot's stock templates. You can specify line height in your email or template HTML, or use the Custom Formatting Options in the WYSIWYG editor.
Long Emails Get Cut OffIf your email is very long (roughly 1800 pixels), Outlook will insert a page break in the email, which can break your formatting and cut off your email. This is because Outlook uses Word to render emails, and thinks that anything that long needs a page break to help with printing. This is not a problem with Outlook 2013, but can occur with Outlook 2007 and 2010.
You have a few options to avoid this happening to your emails:
- Make your emails shorter. 1800 pixels is roughly 24 inches tall.
- If your email is breaking in a specific place, add <style="page-break-before: always" > to an element right before the place your email breaking.
- Put your content in stacked tables, and make sure each table is shorter than 1800 pixels.