September 25, 2025
Should you’ve spent any time within the electronic mail world you’re in all probability conscious of Outlook’s status. Sometimes called the issue little one of the e-mail world, Outlook has been the reason for many frustrations, missed deadlines, and complications for electronic mail builders, designers, and entrepreneurs around the globe.
Point out Outlook to an electronic mail developer and also you’ll be met with rolling eyes and maybe a number of expletives. Irrespective of what number of Outlook coding guides you learn, there’s all the time one thing to throw a wrench within the gears.
Nevertheless, it doesn’t all need to be unfavourable! Though Outlook stirs these deep feelings in us, it’s like that one pal all of us have that you realize goes to show up 45 minutes later than anticipated, it could be extremely irritating nevertheless it’s additionally reliably irritating.
Coding emails that look nice on Outlook is a ceremony of passage for all electronic mail builders; Outlook pushes us to assume outdoors the field to create stunning emails that face up to its quirks. It’s a playground the place a superbly aligned button turns into a badge of honor, and a desk that refuses to cooperate transforms right into a testomony of our problem-solving expertise. Certain, it could throw us a curveball from time to time, however isn’t that what makes life thrilling?
Be a part of us as we delve into the intricacies, share insights, and equip ourselves with the instruments essential to beat the challenges introduced by Outlook.
To undertake the ceremony of passage that’s creating emails that also look nice in Outlook it’s vital for us to grasp why Outlook will be such a thorn in our facet.
One of many predominant points with Outlook is its inconsistent rendering throughout totally different variations. Outlook CSS assist isn’t nice and right here’s why…
The desktop variations of Outlook, particularly these predating Outlook 2013, make use of the Phrase rendering engine as a substitute of a devoted HTML rendering engine. This engine, initially designed for phrase processing, has limitations in deciphering fashionable HTML and CSS strategies generally utilized in electronic mail design.
Though Outlook is now not the powerhouse it was as soon as by way of electronic mail shopper market share, usurped in recent times by Apple/iOS Mail and Gmail, it nonetheless instructions a wholesome common 5%* of the market significantly in company environments. It’s nonetheless crucial to make your emails look nice on Outlook.
*That is simply a mean. Your electronic mail lists might differ, we all the time suggest checking your personal analytics to see who’s opening your emails on which purchasers.
Let’s discover greatest practices and methods for optimizing HTML emails particularly for Outlook, enabling builders to beat the challenges related to it.
1. Outlook provides random white traces to emails
That is by far essentially the most infamous and problematic Outlook situation that exists. Nothing beats ending up your stunning, intricate electronic mail design, passing it via your electronic mail rendering exams and seeing a random white line in your Outlook check.
Whereas it will not be essentially the most egregious design break, the way in which it appears to occur at random, and the fixes we have now to make use of, make it an virtually rage-inducing bug. Regardless of Microsoft being totally conscious of the bug, we’ve seen no fixes on Outlook’s finish.
So, why do these white traces seem in your Outlook emails? Though we don’t know the precise cause for this odd conduct, the main principle is that it has to do with heights which might be odd numbers.
If these white traces are inflicting you a headache there are some potential fast fixes that can assist you eliminate them, at the least quickly:
Change up your font sizes and heights.
For some of us, the repair is so simple as altering font sizes from odd numbers to even numbers. For instance, when you’ve got a font dimension of 13px or 15px, attempt changing it to 14px.
You may as well attempt manually altering heights, font sizes and line-heights to attain the identical consequence.
Add a ghost break.
Typically including a ghost break will quickly repair the rogue white traces in Outlook. Much like ghost columns, a ghost break is a line break that we add focused solely in direction of Outlook.
Match the background colour.
Should you simply want a really fast repair and your design permits for it, you possibly can match the background colour in your downside part to the containing part/desk.
It’s the definition of portray over the cracks, nevertheless it definitely works for a fast, no-mess repair.
Add some Microsoft particular code
Should you’ve exhausted your different choices you possibly can do that code snippet immediately in your code’s head part. Right here we’re concentrating on Outlook and collapsing desk borders.
This may increasingly have a extra drastic impact on how your electronic mail renders, so when you’re going to do this out it’s vital to totally check your electronic mail on all variations of Outlook.
Outlook white traces nonetheless bought you down?
If not one of the above helped repair your white traces or when you’re to learn extra about how and why these traces happen we wrote an in-depth article taking a deeper dive into it. We additionally suggest trying out this sensible article from our buddies over at ActionRocket.
2. Outlook lacks assist for animated GIFs.
Does Outlook assist GIFs? That is dependent upon the model during which your animation is opened. Outlook and its lack of assist for animated GIFs has long-been a sore level for a lot of designers.
Whereas the newer variations of Outlook now have GIF assist, the older Home windows desktop variations (2007-2016) will nonetheless solely render the primary body of an animated GIF.
In case your GIF features a call-to-action or any data that’s very important to the e-mail’s messaging, it is best to all the time attempt to embrace it within the first body. If that isn’t potential you possibly can all the time make use of this method to indicate a GIF in most electronic mail purchasers, however conceal it and present a static fallback picture in Outlook.
3. CSS background photos not supported.
Some time again Microsoft added CSS background picture assist to Outlook 365 and Outlook.com, however we nonetheless lack assist for these in most desktop variations of Outlook, and we don’t anticipate this being modified any time quickly.
In order for you your background photos to work on Outlook 2016 and different older desktop variations you’ll must dive into the world of Vector Markup Language (VML).
VML will mean you can get these stunning background photos engaged on Outlook however will add a layer of complexity to your electronic mail coding course of. In the end, every electronic mail is totally different and infrequently your electronic mail designs will nonetheless work with out your background photos loading, it’s all the way down to you to resolve if the additional effort of VML is price if on your particular wants.
4. Outlook ignores margin and padding.
One of many persistent challenges confronted by electronic mail builders when coding for Outlook is its tendency to disregard margin and padding properties.
Sure variations of Outlook will take away padding in numerous conditions, although you’ll have extra luck with margins. It’s additionally vital to do not forget that each desktop model of Outlook received’t assist the styling of <div> tags, so when you’re utilizing
The way you deal with your spacing in your electronic mail code is vital and when you’re having bother getting the spacing you need in Outlook you possibly can take a deeper dive into margins and padding in HTML electronic mail.
5. Outlook provides a border to desk cells.
A bug in Outlook 2016 provides a 1-pixel border round desk cells in emails. This will not be a serious downside except you want your electronic mail template to line up completely.
To eliminate this additional border, use “border-collapse: collapse;” embedded or inline. This CSS property signifies whether or not cells have a shared or separate border. Setting the property to the collapse worth means it combines to a single border.
6. Outlook ignores hyperlink styling.
In sure circumstances Outlook is not going to apply the hyperlink styling you’ve utilized to your hyperlinks.
Particularly, Outlook will strip the styling from tags with out an href worth or hyperlinks that don’t have https:// or https://, which will be annoying when you’re utilizing them as anchors to navigate the e-mail, utilizing mailto hyperlinks, or utilizing placeholder hyperlinks for testing functions.
If you should check an electronic mail earlier than you have got stay URLs for that electronic mail, think about using a placeholder hyperlink that features a https:// or httsp:// protocol.
Should you discover that Outlook is stripping your kinds from a mailto or inside anchor hyperlink, merely wrap the tag in a and apply your styling to the encompassing span.
7. Resizing non-native photos in Outlook.
Outlook will all the time attempt to render your photos at their native dimensions which will be annoying if you’re creating bigger photos and scaling them down, a typical method for prime DPI gadgets.
Whereas most electronic mail purchasers will respect your CSS, Outlook is not going to respect CSS to resize photos. That’s why it’s vital when resizing photos to outline the attributes in HTML for Outlook. You’ll solely must outline the width, Outlook will resize the peak accordingly to keep up the right picture proportions.
<-- This picture will probably be resized to 300px in Outlook -->
![]("https://www.emailonacid.com/images/photo.jpg")
<-- This picture will NOT be resized in Outlook -->
Should you’re seeing photos that don’t look nice in Outlook make sure you examine that you simply’ve outlined the proper width within the HTML.
8. Outlook ignores HTML merchandise width and peak.
As we’ve already talked about, Outlook doesn’t assist styling within
So, when an electronic mail renders in Outlook, the
As soon as once more, the repair for Outlook HTML emails is to make use of tables as a substitute. Now we have seen this with a number of different components, however the
9. Font stacks and Instances New Roman.
On the subject of font rendering, Outlook presents a singular problem for electronic mail builders on account of its restricted assist for net fonts and reliance on font stacks. In contrast to most electronic mail purchasers, Outlook doesn't have built-in assist for downloading and displaying customized net fonts immediately from exterior sources.
Additional to this, when you embrace a customized font on the prime of your font stack, Outlook will ignore all your fallback fonts and as a substitute show Instances New Roman. (Thanks, Outlook!)
- Repair 1: Change the stack utilizing attribute selectors.
- Repair 2: Wrap textual content in a span.
- Repair 3: Add MSO conditional code.
- Repair 4: Specify a customized font in a media question.
Repair 1 was the preferred amongst electronic mail geeks who submitted their very own options to E-mail on Acid. It really works as a result of Outlook ignores attribute selectors. This code will inform the e-mail shopper to switch any fashion that features the customized font with the proper stack:
Making E-mail Stunning!
Helvetica
Instances New Roman
If this repair didn’t be just right for you or when you’d prefer to take a extra thorough take a look at font stacks in Outlook we wrote a complete information to font stacks and Outlook.
10. Controlling line peak in Outlook.
At one time, emails had been rendering taller than anticipated in Outlook.com as a result of the shopper was controlling line-height utilizing CSS. That’s not a lot of a difficulty anymore.
Microsoft Workplace kinds (MSO kinds) will tighten up your traces only a bit. In case your spacing appears off, give it a attempt. Add “mso-line-height-rule:precisely;” immediately earlier than the line-height fashion, inline or embedded.
11. E-mail alignment points in Outlook
One other widespread downside with older desktop variations of Outlook is wonky alignment, particularly when attempting to incorporate two or extra columns that are supposed to stack properly on cell gadgets on your responsive designs.
Should you’re encountering points like this along with your format on Outlook fear not! The answer is easy – we flip again to our trusty outdated pal the Ghost Column repair. By wrapping the issue columns in an Outlook particular ghost desk we are able to constrain the columns in order that they show as meant.
To view the total code snippets or take a deep-dive into the world of ghost columns, take a look at our fluid hybrid design information and our clarification of ghost tables.
Along with the 11 widespread challenges mentioned earlier, Outlook’s peculiarities usually require us to implement particular workarounds and changes. These extra steps are essential to make sure optimum rendering and performance in numerous variations of Outlook.
Desk-based layouts.
If it wasn’t for Outlook we’d be capable of ditch the tables and embrace the
Should you’re involved in breaking the mildew and experimenting with emails with out tables, you possibly can take a look at this improbable repo from Mark Robbins on getting off the desk.
You’ll discover within the 11 suggestions and methods above we frequently depend on MSO conditional code to get round Outlook’s difficult restricted assist.
MSO conditional statements are a improbable software permitting us to focus on Outlook desktop variations particularly, even permitting us to focus on particular variations. This permits us to create workarounds for Outlook that will in any other case have us pulling our hair out.
Intensive electronic mail testing
It’s vital to check your electronic mail throughout each machine or electronic mail shopper that your recipients could also be opening on, nevertheless it’s particularly vital to check for Outlook.
Not solely do we have now to make use of numerous whacky work-arounds and intelligent conditional code to make our electronic mail look nice on these variations of Outlook, there’s additionally numerous them!
From Outlook.com, to Outlook 2010, to excessive DPI variations of Outlook 2016, a software like E-mail on Acid’s testing software permits you to immediately see how your electronic mail is rendering throughout each model of Outlook.
Don’t go away your Outlook-specific fixes to guess work, guarantee they appear nice on each model of Outlook and simplify your Outlook electronic mail troubleshooting.
ALT textual content
Whereas we aren’t solely including ALT textual content for Outlook, it’s additionally extraordinarily vital for accessibility and any of your readers who've photos disabled, it’s a key a part of creating emails for Outlook as Outlook customers will all have their photos disabled by default. You continue to need your emails to convey your messaging even when the pictures are disabled.
Correct ALT textual content utilization is usually the important thing consider getting your recipient to click on that “enable photos” button to allow them to see your electronic mail in all its glory.
One of the simplest ways to keep away from HTML emails that look unhealthy in Outlook is to take an in depth take a look at how issues render earlier than you hit ship. You are able to do that with Sinch E-mail on Acid.
Use our electronic mail readiness platform to take a look at Outlook HTML electronic mail previews that come from stay purchasers and gadgets. These screenshots, which embrace electronic mail previews from 100+ purchasers and gadgets, are seeing the way forward for your campaigns in subscribers’ inboxes.
With E-mail on Acid, you get limitless electronic mail testing with each paid plan. That features rather more than Outlook electronic mail previews. You’ll additionally get deliverability and accessibility checks as nicely picture and URL validation and lots of different priceless options.
Don’t let Outlook rendering points derail your electronic mail advertising efforts. Put your greatest campaigns ahead with assist from E-mail on Acid.
