It’s time to talk about the elephant in the room that’s probably not rendering correctly.
Microsoft Outlook first hit the scene in 1997 and has been dealing mental damage to digital marketers ever since. If you’ve been in the email campaign game for any amount of time, you know that nine times out of ten, your email will load into an email client correctly, and that tenth time will be when it loads in Outlook.
There are a TON of different Outlook versions, and with that come TONS of ways that your marketing message could arrive mangled. Outlook for desktop in particular is the most stubborn, with newer web versions behaving a little more reasonably. That being said, we have a few helpful hints that will take the marketing emails you send to Outlook users and make them look pretty okay (we’re not promising perfect here).
Let’s Have The Measurements
You need to include height and width attributes, or Outlook is going to display your image at its actual size. If you’re using high-quality images (large and unwieldy in both screen real estate and file size), this can nuke the whole email and make it unreadable. Many versions of Outlook don't support CSS for height and width (because of course they don't), so add in those attributes in line using conditional mso code to make sure your email starts off on the right foot.
GIFs Probably Won’t
Do The Job
Outlook is not a fan of animation. You can have the first frame of the GIF display as a still image, but don’t expect anything like GIFs or any HTML interactive elements to fly with Microsoft Outlook.
Interactive HTML uses the hidden checkbox trick or APM code to work, and neither is supported by Outlook. This means that your toolbox with Outlook is rather limited, and you need to put a lot more thought into your copy, CTAs, and making sure your graphics are displaying properly.
Hover Effects:
Who Needs ‘Em?
Outlook doesn’t, apparently, but this doesn’t mean you shouldn’t include it! Just because Outlook doesn’t display hover effects doesn’t mean you should try to keep your emails accessible to other email clients. Just make sure it isn’t essential to your message when it comes to Outlook.
Use Tables Instead
of < div > Blocks
The width and padding styles that you’d typically apply to your < div > tags won’t help you when it comes to Outlooks. It ignores most of them. Simple fix, though: Use < table > and < td > tags for your content instead.
