Click’s Email Editors allow users a great deal of control over the styling of their emails, but sometimes the email may not be consistent with that initial design once the customer receives it in their inbox. Different email clients all render HTML a bit differently, which can make consistent results a bit difficult to achieve. Microsoft Outlook is a very common email client, but is also an email client that is notorious for its rendering issues.
Outlook’s issues primarily come from the fact that every version of Outlook from 2007 onward uses Microsoft Word to render email HTML, along with the fact that the Classic Outlook client is being phased out. Since Microsoft Word is a tool intended to be used for creating print content rather than emails, this can result in some strange behavior once an email hits the inbox.
Below are a few examples of common rendering issues in Outlook and Classic Outlook. When available, we've provided recommendations on how to avoid them.
Classic Outlook
Classic Outlook is known to have rendering issues that Click is not able to control. These include:
- Tracking parameters stripped from some links.
- Links stripped from buttons.
- Button text is tinted in dark mode.
- Spaces added between sections when forwarding or replying to emails.
- No visible alt-text.
Padding around images is ignored
Outlook sometimes disregards padding property in emails, which can result in surrounding text appearing flush with the edge of the images. There are a few simple options to circumvent this issue:
- If using the Block, Freestyle, or HTML email editors, access the HTML for the image and add the vspace and hspace attributes to the <img> tag. vspace indicates how many pixels of margin space will be added above and below the image, and hspace indicates how many pixels of margin space will be added to the sides of the image.
In addition to modifying the image’s HTML directly, in the Freestyle editor, right clicking on an image and choosing Image Properties will open a menu which allows values to be set for vspace and hspace.
- Open the image in a photo editing program and add a blank border around the image that is the same color as the email’s background. This would need to be updated if the image is going to be used in a separate email with a different-colored background, but it would also guarantee that the space around the image is always rendered properly since the space is a part of the image itself.
Images appear clipped or re-scaled
If an email contains an image that is more than 1728px tall, Outlook will clip off the rest of the image past that point. If possible, try to constrain image heights to less than 1728px, but if not possible, splitting the image into smaller segments and inserting them into the email immediately adjacent to each other will yield the same result visually and will avoid having the image automatically cropped.
Background images do not display
Outlook has inconsistent support for background images in emails and generally will not display them without making some modifications to your template’s HTML first. You can find some recommendations on how to make the necessary changes here.
NOTE: These recommendations will not work in the Drag and Drop editor since this editor does not allow direct access to the template’s HTML.
Animated GIFs do not work
Whereas most email clients support GIFs, Outlook does not. Rather than animating the GIF, Outlook will instead only show the first frame of the GIF as a static image. As such, make sure that the first frame of the GIF contains enough valuable information to still be able to convey your message.
Extra white space
Outlook uses Microsoft Word to render HTML, and while an email is intended to be viewed as a uniform, continuous page, Microsoft Word is a tool primarily intended for creating printed content. This means that Outlook may render a longer email as if it was meant to be printed on multiple pages rather than one long page. At points in the email body where Outlook and Word believe there should be a page break, extra white space can be inserted into the body to denote where content would continue over to the next page (think about times where you have used an image in a Word document, but because it was a bit too tall, Word automatically pushes the image to the second page and leaves a lot of white space on the previous page).
The best way to avoid running into this problem when you send out your email is to make use of the Inbox Preview tool, which will show you how your email will render in a number of different email clients, including Outlook, and to send the email to yourself first using the Test Email feature. If Outlook does add extra white space to your email, there are not many quick fixes to avoid this issue, and reorganizing the content of your email would be the most surefire way to have it display correctly once it is sent out to customers.