The top 13 Outlook HTML email display issues (& how to fix them!)
If you’ve ventured into the email realm, you’re probably no stranger to the quirks of Outlook. It’s that one friend who’s consistently late to the party, causing email developers, designers, and marketers worldwide to collectively sigh. Outlook has earned a reputation as the problem child of the email world, responsible for its fair share of missed deadlines and headaches.
But, hey, it’s not all gloom and doom! Outlook might be frustrating, but it’s reliably frustrating. (Is that comforting? We’re trying to make it comforting.) Crafting emails that shine on this challenging platform is pretty much a rite of passage for email creators and developers. It’s where we learn to think outside the box, turning a perfectly aligned button into a badge of honor and a rebellious table into a testament to our problem-solving skills. Yes, Outlook throws curveballs, but isn’t that what makes life exciting?!
(If you’d rather things just worked…check out an internal email platform like Workshop instead! We’ll work with you to fine-tune your email templates to resolve a lot of these problems.)
There is a new version of Outlook that is set to roll out soon (and one that hopefully resolves the bulk of these issues). That being said, adoption for these sorts of things tends to be a bit slow, so you may have to test and troubleshoot your emails in old versions of Outlook for the foreseeable future.
For now, join us as we embrace the intricacies, share insights, and equip ourselves with the tools to conquer Outlook’s challenges!
The top 13 issues with HTML emails in Outlook
Before we embark on this journey to create emails that shine on Outlook, let’s understand why Outlook can be such a pain in the you-know-what.
Outlook’s main problem, behind all of these issues, lies in its inconsistent rendering across versions. Outlook just does not know how to properly render HTML like other email platforms, which is why the email often looks completely fine in your email editor and not so great when it arrives in your employee inboxes.
Here are the top 13 issues we troubleshoot within Outlook:
1. Random White Lines
Outlook’s most infamous issue. These seemingly random white lines can be SO maddening. While there are “fixes” for the issue, Outlook will render the email differently on different screens. We’ve found that many times, even if you make it look perfect on your computer, if someone is using a different screen size than you, they will most likely see different lines.
The fix: This is a tough one. We’ve seen it happen for years with seemingly no rhyme or reason…and disappear just as quickly. While the exact cause remains a mystery, it often relates to heights being odd numbers.
Quick fixes to try:
- Make sure font-size, line-height, padding, margin and any other coded pixel numbers are even instead of odd (seriously)
- Update the content or column backgrounds from transparent to whichever current background color is selected
- Add a ghost break (here’s a how-to on that)
But really, it could also be an issue with padding, transparency, screen resolution/size, or Outlook versioning. If this is something you’re consistently running into, working with a dedicated internal email platform like Workshop can 1.) give you direct access to a support team to help you troubleshoot it and 2.) reduce the amount of times you run into this issue in the first place!
2. Animated GIFs
Older Outlook versions don’t play nice with animated GIFs. These GIFs work beautifully in most email clients, but when you open it in Outlook, all you see is the first frame of your GIF, leaving your message incomplete and your readers confused.
The fix: Ensure crucial information appears in the first frame, or use fallback images.
3. CSS Background Images
Most desktop versions of Outlook don’t support CSS background images. That means that if you meticulously design an email with a stunning background image, you’ll soon realize that Outlook users won’t see it at all.
The fix: Consider using Vector Markup Language (VML) for background images.
4. Ignoring Margin and Padding
Outlook can be finicky with margins and padding. Let’s say you set your email’s padding to perfection, ensuring every element has the right amount of space. However, when your recipients open the email in Outlook, that carefully crafted padding vanishes, making your email look cramped and unprofessional.
The fix: Some versions remove padding, so use margins if possible. For <div> tags, employ the ghost column technique.
5. Adding Borders to Table Cells
Outlook 2016 adds an unwanted 1-pixel border around table cells in emails. A lot of times, your email’s layout looks seamless in most email clients, but in Outlook 2016, a pesky 1-pixel border appears around each table cell, throwing off your design’s aesthetics and alignment.
The fix: Many articles will recommend trying “border-collapse: collapse;” to eliminate it, but we’ve tried this a few times and it’s not completely reliable. In Workshop, you can use this by adding in an HTML block and using the style tags inside:
6. Ignoring Link Styling
Outlook may strip styling from <a> tags without an href value. If you have a nicely styled link, this could mean that when you check your email in Outlook, your link styles vanish, making your links appear plain and uninviting. Classic Outlook.
The fix: Use placeholder links with “http://” or “https://,” or wrap <a> tags in <span> elements for styling.
7. Resizing Non-Native Images
Outlook won’t respect CSS for resizing images. Rude! Even when you try to resize the image, Outlook will decide to ignore your CSS, leaving your images in their native dimensions and disrupting your email’s layout.
The fix: Define width in HTML to ensure proper proportions.
8. Ignoring HTML Item Width and Height
Outlook doesn’t support styling inside <div> tags.
You attempt to style <div> tags within your email for better layout control. However, Outlook disregards your styling efforts, causing your email to lose its intended structure and appearance.
The fix: Use tables instead.
9. Font Stacks and Times New Roman
Outlook can default to Times New Roman if a custom font is at the top of the font stack.
You carefully select a custom font stack for your email, wanting to give it a unique and branded appearance. But when you open it in Outlook, all your efforts are in vain as it defaults to the ubiquitous Times New Roman font, diminishing your email’s distinctiveness.
The fix: Employ attribute selectors or MSO conditional code to fix this.
Not sure what those are/how to use them? Workshop happily supports custom fonts to allow your brand to shine. We’ll work with you to install those fonts and select your preferred fallback font styles. Once installed, your custom font can be used in template or email draft creation!
A few other things to keep in mind for any email platform offering custom fonts:
- Custom font support varies across device and email client used by the email recipient. If your custom font has not been downloaded locally to the recipient’s computer, the custom font will not typically be displayed (the fallback font will be shown). The exceptions to this are: Apple Mail, Outlook for Mac and iOS email clients.
- Custom fonts will not display on mobile versions of your email – your preferred fallback font will be used. (The fallback font options are Arial, Courier, Georgia, Helvetica, Lucida Sans, Tahoma, Times New Roman, Trebuchet MS, and Verdana.)
10. Controlling Line Height
You strive for consistent line heights throughout your email, creating a polished and readable look. However, Outlook occasionally throws your line spacing off, making your email appear messy and unprofessional.
The fix: Use “mso-line-height-rule:exactly;” for consistent line heights in Outlook. In Workshop, you can use this by adding in an HTML block and using the style tags inside:
11. Email Alignment Issues
You craft a responsive email design that’s meant to stack columns neatly on mobile devices. However, when you open it in Outlook, columns misalign and disrupt your carefully planned layout.
The fix: Wrapping columns in an Outlook-specific ghost table usually resolves alignment issues.
12. Rounded Corners Aren’t Displaying
Outlook Desktop does not support rounded corners. Workshop is able to employ a workaround for buttons and icons so the border radius setting does work on those elements for all email clients. However, we’re not able to control how Outlook Desktop renders this content on the full content areas.
The fix: There really isn’t one for this!
13. Broken or Cutoff Links
Characters like spaces, quotation marks, apostrophes, and ampersands can lead to URL hiccups. If you try to include one of these troublemakers in a web address, it’s a recipe for a link that just won’t cooperate.
The fix: Bitly.com is a great tool for cleaning up your links. Here’s how it works: simply paste the troublesome URL into Bitly, and voilà, it magically transforms into a shortened link. You can then use this streamlined link in your email builder. Problem solved!
If you prefer a DIY approach, percent codes are your go-to. These codes replace those text characters and make sure your link will work properly.
To work this magic, follow these steps:
- Locate the troublesome character within the URL. If it’s an ampersand (&) or apostrophe (‘), you’re in the right place.
- Swap out the pesky character with its percent code counterpart:
- For ampersand (&), use “%26” in the URL.
- For apostrophe (‘), deploy “%27” in the URL
Why Workshop is the best tool for creating & sending internal HTML emails
Obviously, a lot of these issues are focused on how emails render in Outlook, but the problems with using Outlook for internal communications don’t stop there. Of course, that’s an entirely different post. Should you use an Outlook plugin for internal communications? Dig into the answer here.
You can also get a really quick demonstration of how Workshop compares to your current tool (whether you’re sending straight out of Outlook or using a plugin-based solution). Just select a time that works for you here!