![\"See](\"https:\/\/cms.enginemailer.com\/WebLITE\/Applications\/blog\/uploaded\/pics\/Blog\/2020\/Feb\/how_to_create_an_html_email_in_outlook\/how_to_create_an_html_email_in_outlook.jpg\")
<\/p>\n<\/p>\n
Why does Outlook frustrate email developers?<\/p>\n
Let’s learn how to code Outlook HTML emails by looking at the most common rendering issues and solutions.<\/p>\n
This isn’t an exhaustive list of Outlook email coding issues, but it covers the most common ones.<\/p>\n
Outlook is one of the worst offenders when it comes to HTML email spacing.<\/p>\n
Outlook removes padding in a variety of situations. Commonly ignored image padding can cause text to appear flush against an image. To avoid this, wrap the image in a table with margin, padding, or cellpadding.<\/p>\n
In general, margin and cellpadding are safe in Outlook. This may necessitate more nested tables. Love them! In other email clients, the padding around the image may be too much.<\/p>\n
Outlook desktop doesn’t support div tag styling. So any padding specified in a div is useless. Outlook only respects table>s, so stick to those.<\/p>\n
Outlook emails and animated GIFS have a complicated relationship. But it’s gotten better over time.<\/p>\n
Microsoft announced in 2019 that a new version of Outlook 365 would support GIFs. As of now, all Outlook clients except the older Windows desktop versions support animated GIFs (2007-2016).<\/p>\n
For animated GIFs, Outlook will only show the first frame. So make sure your GIF starts with a good frame. Your GIF’s first frame should include a call-to-action or important information.<\/p>\n
You could also target Outlook clients with a different still image. Get the code and see how this Outlook GIF solution works.<\/p>\n
In some cases, Outlook will not apply styling to hyperlinks in an email. One use of a> tags without href= attribute is as placeholders or anchors.<\/p>\n
To make Outlook recognize the link styling, simply wrap it in a span and style it.<\/p>\n
If you add a URL without http:\/\/ or https:\/\/, Outlook removes link styling.<\/p>\n
Before publishing a URL, you might use URLs without the http:\/\/ or https:\/\/ protocol to code a new email template or test a campaign. This can wreak havoc on button links. Outlook loses your styles and looks broken.<\/p>\n
To avoid this, include the protocol in all placeholder and template links. If not, you’ll need to restyle those links.<\/p>\n
Emails with table cells have a 1-pixel border in Outlook 2016. This isn’t a big deal unless you need your email template to be perfect.<\/p>\n
Use \u201cborder-collapse: collapse;\u201d embedded or inline to remove it. This CSS property determines whether cells share or not a border. Setting the property to collapse creates a single border.<\/p>\n
Outlook doesn’t support div styling.<\/p>\n
When an email is rendered in Outlook, the div sections will have the same height as the text inside them, even if you specify a height\/width in code.<\/p>\n
Again, tables are the solution for Outlook HTML emails. We’ve seen it with other elements, but the div is the most common.<\/p>\n
Outlook.com used to render emails taller than expected because it controlled line-height with CSS. That’s no longer an issue.<\/p>\n
MSO styles will slightly tighten your lines. Try it if your spacing is off. Add \u201cmso-line-height-rule:exactly;\u201d before the line-height style.<\/p>\n
While CSS background images are supported in Outlook.com and Outlook 365, they are not in most desktop clients.<\/p>\n
A CSS property background-image may also cause issues. Outlook 2016 and older email clients can’t handle regular image backgrounds.<\/p>\n
Using Vector Markup Language (VML) to make Outlook backgrounds work in older versions (VML).<\/p>\n","protected":false},"excerpt":{"rendered":"
Why does Outlook frustrate email developers? Let’s learn how to code Outlook HTML emails by looking at the most common rendering issues and solutions. This isn’t an exhaustive list of Outlook email coding issues, but it covers the most common ones. 1. No margin\/padding in Outlook Outlook is one of the worst offenders when it […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1213","post","type-post","status-publish","format-standard","hentry","category-technical-how-to"],"_links":{"self":[{"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/posts\/1213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/comments?post=1213"}],"version-history":[{"count":1,"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/posts\/1213\/revisions"}],"predecessor-version":[{"id":1214,"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/posts\/1213\/revisions\/1214"}],"wp:attachment":[{"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/media?parent=1213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/categories?post=1213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lite16.com\/blog\/wp-json\/wp\/v2\/tags?post=1213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}