It's painful and frustrating when you've made a stylish email with GIFs, top-notch typography, and great images, only to find during testing that Outlook doesn't show half of your creative work. That's because it has a thousand and one quirks when it comes to rendering emails built in online editors or hand-coded in HTML. In this article, we'll look at the 4 most common problems and how to fix them.

The image doesn't display, and a security message appears instead

If you load an image into your email as a link from some website instead of embedding it directly, Outlook may ignore it. Instead of a nice picture, some users will see a "helpful" message about Microsoft protecting their security.

How to fix it:

  1. Embed the image directly into the email. In code, that looks like: <img src="picture.jpg">. This trick increases the campaign's weight, but even with that change you can still stay within the required size.
  2. Use the ALT tag — this is coded text that the user will see in place of an image that doesn't render. Not the coolest solution, but definitely better than a security message.

Custom fonts get replaced with default ones

Another common headache: Outlook replaces the custom font you've downloaded with some basic Times New Roman or Arial. This ruins the whole design, and the email has to be redone.

How to fix it:

  • Only insert unusual fonts into banners and other images, so the email client can't change them and ruin the visuals.
  • It's best to build the text block using web-safe fonts from the start. It'll be less creative, but the user will definitely see the content of the email.

Rounded buttons turn into squares

This quirk exists too. You make a rounded button in your brand's style — the email client changes its appearance on its own — the user sees a plain square or rectangle. It won't have much effect on CTR or CTOR, but it will ruin the overall design of the campaign.

How to fix it:

  1. Replace the button with an image of a button. In that case, even Outlook will display the element correctly and won't turn rounded corners into sharp ones.
  2. Code the button in HTML using the table method or VML.

Animated GIFs display as static images

Not all versions of Outlook support GIF images yet. Instead of a fun animation, the reader only sees the first frame of the GIF, and that's it. There's practically no way to fix this, but it's possible to work around it gracefully.

How to fix it:

Set up your GIF so the first frame shows the key information — text or an image. This way the reader will still catch your message.

Which versions of the email client support GIF

  • Outlook as part of a Microsoft 365 or Office 2021 subscription.
  • MS Outlook as a mobile app.
  • Version 2003 as an application.
  • For Mac as a program.
  • The web version on smartphones and desktops.

You can work with Outlook, though you'll need to set up your emails to display correctly. It'll take a bit of extra effort, but a great-looking, bug-free campaign is worth the additional time.