Outlook-Proofing Your Account Engagement (Pardot) Email: A Beginner’s Guide
Salesforce tips
If you’ve been doing email marketing in Account Engagement (Pardot) long enough you are likely to have spent a good amount of time designing the most beautiful, appealing, perfect email only to have it destroyed by Outlook.
And this may have you looking at the screen and asking yourself questions like “What did I do wrong?”, “Why is this happening to me?” or “Is this a signal from the Universe to quit this job and go live my dream of raising old English sheepdogs in the countryside?”
Good news – you didn’t do anything wrong; it happens to others, and it can be fixed.
In this blog we’ll provide essential tips and tricks to help you revamp your email template and go from messy to marketable. With our guidance, you’ll have an Outlook-proof Account Engagement (Pardot) email!
As for the third question, don’t let us be the ones to stand between you and your true dreams!
It’s not you, it’s Outlook
If you’re still here / still in the job / not in the countryside yet – we have some more answers for you.
The reason why some Outlook versions don’t render your emails well is that they use Word as a rendering machine (mostly the pc desktop app versions). As a result, it doesn’t recognize some of the most basic styles that browser-based email clients would display perfectly.
More technical email designers are aware of these issues and can fix them with some pieces of code here and there, but if you’re not fluent in HTML, it can be a bit tricky to do so in Account Engagement (Pardot)
Keep reading as we explore common issues you may face with Account Engagement (Pardot) email templates in Outlook and provide step-by-step instructions on how to fix them. From fixing image display problems to troubleshooting formatting and alignment issues, we’ll cover it all. So, let’s dive in and transform your messy email into a masterpiece!
Tip 1: Picture Perfect
Rendering: The most common challenge with images in Outlook is that they display gigantic in the email, moving the other elements in your email out of place. To fix this in your Account Engagement (Pardot) emails, all you need to do is upload your images to your CMS (or wherever you are storing them) already cropped to the size you want them. We recommend a width no bigger than 650px for hero images.
(example of image rendering poorly)
GIFS: Outlook doesn’t play gifs, but don’t let this stop you from using gifs since they can look awesome in your emails and all of the other email clients will show them perfectly. The trick here is to put your message or CTA in the first frame of the gif since is the picture that Outlook will show.
Alt Text: Outlook also doesn’t display images by default, unless the user turns that feature on. Instead of your image, there will be a security message. Whilst, you can’t override this feature, using ALT text for your images will let you control the text shown. ALT text is a fundamental element of any piece of work for accessibility reasons, SEO purposes and of course user experience.
Tip 2: Update background colours
One area of email design this is increasingly problematic in Outlook is background colours. You may find that sometimes sections lose their background colour even when displaying in the email preview and other email clients. This is due to Outlook not always reading fine CSS. There is an easy way to fix this and that is to ensure you always give the rows in your emails a background colour.
(How to fix background colour’s with CSS)
Outlook uses the Microsoft Word rendering engine to display HTML emails, which means that it doesn’t support some HTML and CSS properties, including the background-image property. This means its wise to plan your emails designs in a way that will look good with or without them.
Image 1: Without background Image 2: With background
Tip 3: Code your text boxes
Whether it’s sorting out alignment issues, buttons or text boxes – it is frustrating to have to manually put code fixes in place for Outlook. The two major issues with text can be solved in your Account Engagement (Pardot) templates with a bit of custom coding, outlined below.
The first one is padding – Outlook doesn’t recognize padding in divs, so even though you have the option to add padding in the editor, these won’t be recognised by Outlook. There is no shortcut to fix this and you will need a bit of code. The idea is to put your text inside a table and add the paddings to it. Here’s an example of the code to manage that.
Something similar happens to fonts and text colours. Outlook won’t always recognize the CSS you input in your template and you will need to add the styles inline. This is also easily achieved with a small piece of code that doesn’t need a deep knowledge of HTML to be edited.
Simply add the color, font family or whatever styles you want to the table, Outlook will recognise it and render it for you.
Once you have achieved the style you like in your text all you have to do is copy and paste the code in every text block you will use or clone it to elsewhere in your template.
Tip 4: Accept that Outlook will win on buttons
Buttons look much nicer with those rounded corners that make them look softer, right? But Outlook will always make them sharp. Like background images, here’s another case where Outlook will simply not render them the right way, no mater what you do. Our advice is that you make the buttons look how you like them better, they will be rendered well in any other email client so just take a deep breath and let outlook be this time.
Image 1: Without padding Image 2: With padding
My guide ends here. Good luck with your email creation and I hope my tips help give you the results you want!
About the author.
María José Abella (MJ) is a Marketing Cloud Consultant with Giveclarity based in Madrid, Spain. She comes from a background of web design and digital marketing and she’s been working with Marketing Cloud for several years. She’s a comic book fan and will gladly explain to anyone who asks why Wonder Woman is the best superhero ever!