Outlook How to Know if Email Was Read

Outlook HTML Emails: How to Fix eleven Common Rendering Bug

There'southward ane in every family unit, classroom, and summer campsite: A problem child or a blackness sheep, someone who requires extra attention until they get set straight. For electronic mail developers, that troublemaker is Outlook.

Electronic mail developers have the same feelings about Microsoft Outlook as web developers once had about Internet Explorer (RIP). Just the thought of developing Outlook HTML emails and troubleshooting bug might stir upward frustrating memories and give you acid reflux.

Outlook inboxes have a reputation for rendering emails inconsistently and lacking support for features that email marketers want to use. Some of those Outlook issues have been fixed over the years, only others persist.

Why practise we continue to put up with information technology? Considering we have no pick! Outlook represents one of the "Big 3 electronic mail clients," trailing only Apple tree Mail and Gmail in popularity. Plus, Outlook usage is prominent amid B2B email subscribers.

Bottom line? We're stuck with it.

Permit's have a await at how to code Outlook HTML emails by diving into the nigh common rendering problems every bit well as some ways to solve them.

Spring to a section in this commodity:

Outlook adds unsightly lines to emails
Outlook and blithe GIFs
Outlook ignores margin and padding on images
Outlook adds a border to table cells
Outlook ignores link styling
Resizing non-native images in Outlook
Outlook ignores HTML detail width and height
Font stacks and Times New Roman
CSS background images not supported
Controlling line height in Outlook
Alignment issues in Outlook

11 tips for Outlook HTML email development

So why does Outlook cause so many problems for email developers?

As you read through this list, you'll observe that many of the worst issues are limited to the Windows desktop versions of Outlook (2007-2019). That's because these clients use Microsoft Word as their rendering engine. Conversely, Outlook.com, Outlook mobile apps, Outlook for Mac, and the online version of Outlook 365 utilise WebKit, which is much more reliable for rendering HTML emails.

That's why things like blithe GIFs and the apply of sure media queries work in some versions of Outlook, but non in the Windows desktop versions.

While this isn't an exhaustive listing of the headaches that Outlook email coding tin crusade developers, it includes the biggest blockers standing in the manner of electronic mail campaigns that render equally expected.

1. Outlook adds unsightly lines to emails

This is easily one of the most notorious struggles with Outlook e-mail development. The client volition sometimes add a 1 px line in between elements. Here'south an example of how it looks.

The lines inherit the colour of the background in an e-mail'due south <body>. While it may not be the worst thing in the world, it looks unprofessional and degrades the electronic mail experience, especially if a bunch of these lines appear.

This trouble seems to occur randomly and was near prevalent in Outlook 2016. A few years agone, Electronic mail on Acid theorized that it could be caused by odd-numbered heights.

So how do you fix this Outlook HTML e-mail bug? Nosotros've suggested a few fixes in our commodity on getting rid of lines in Outlook emails:

Accommodate heights and font sizes: Try irresolute from odd to even numbers. Merely switching from a 15px to a 16px font-size could brand the lines disappear.
Add ghost breaks: This is a way to force line breaks in problem clients that is similar to ghost columns, which are used to ready alignment issues.
Use not-breaking spaces: Try placing an before endmost a table cell.
Match the background color: Cover up the lines in Outlook when you change the background to the aforementioned color used in the section/table.
Microsoft specific lawmaking: Add the snippet below to the e-mail's head. It targets Outlook and collapses tabular array borders.

          <!--[if (gte mso 9)|(IE)]>  <way type="text/css">  table {  edge-collapse: collapse;  edge-spacing: 0;  mso-table-lspace: 0pt !important;  mso-table-rspace: 0pt !important; }  </fashion>  <![endif]-->

Developer Holly Bourneville also recommends using images with even-numbered pixel widths and heights. Grab more code snippets for the fixes listed to a higher place and find out what works.

ii. Outlook and animated GIFs

The relationship between Outlook emails and animated GIFS is, well, complicated. Merely it's improved quite a fleck over the years.

While GIFs were a no-become in Outlook for quite some time, in 2019 Microsoft announced that an updated version of Outlook 365 would accept GIF support. Can I E-mail now indicates that animated GIFs work on every Outlook client other than the older Windows desktop versions (2007-2016).

In those cases, Outlook will display only the first frame of an blithe GIF. For that reason, the common advice is to brand certain you first your GIF with a frame that looks acceptable. If your GIF includes a telephone call-to-action or important data, be sure it'southward on that starting time frame.

You lot could also target Outlook clients and display an entirely different all the same image instead. Get the code and detect out how this culling solution for GIFs in Outlook works.

iii. Outlook ignores margin and padding

Nailing the spacing of HTML emails has been a particularly tough claiming for electronic mail developers, and Outlook is one of the worst offenders.

Sure versions of Outlook will remove padding in a variety of situations. One of the most common involves image padding, which when ignored can crusade text to appear flush confronting an image. To go effectually this, wrap the image in a table with margin, padding, or cellpadding depending on how much space you demand.

In general, it'southward safety to use margin or cellpadding with Outlook. This may require you lot to utilize even more nested tables. Learn to love them! Yous could too use images with a edge of congenital-in padding effectually them, but that may event in too much padding in other electronic mail clients.

Desktop versions of Outlook don't support the styling of <div> tags. That means any padding specifications contained in a <div> are pointless. Outlook only respects <table>s, so keep any spacing specifications to those.

Get more than guidance on email spacing techniques and notice some tips for margins and HTML email padding.

iv. Outlook adds a border to tabular array cells

A bug in Outlook 2016 adds a one-pixel border around table cells in emails. This may non exist a major problem unless you demand your email template to line up perfectly.

To become rid of this actress border, use "border-plummet: collapse;" embedded or inline. This CSS holding indicates whether cells have a shared or separate edge. Setting the property to the plummet value means it combines to a single edge.

5. Outlook ignores link styling

There are a couple of situations where Outlook volition not apply styling you've applied to hyperlinks in an email. One is the rare case when y'all use an <a> tag without an href= aspect, which could exist to apply them equally placeholders or anchors.

If you desire Outlook to recognize the link styling in this situation, just wrap the link in a <span> and style the span.

Outlook also removes link styling if y'all add a URL without http:// or https:// in your links.

You lot might use URLs without the http:// or https:// protocol if you're coding upwardly a new email template or sending a campaign out for review before a URL is live. This tin can actually mess things up if you've styled a push link. Outlook throws out your styles and it volition await cleaved.

To avoid this issue, be certain even placeholder and template links include the protocol. Otherwise, you'll need to re-add styling to those links.

half dozen. Resizing not-native images in Outlook

You can't use CSS to resize images in Outlook HTML emails. If you exercise, you may terminate upwardly with something that looks warped and ugly.

If your images are not displaying in their native size (the size they were saved at), make sure to define the height and width using HTML attributes and they will return properly. If you specify the width, Outlook will resize the height accordingly, so the image is not warped. For case:

          <-- This image will be resized to 300px in Outlook -->   <img src="https://www.emailonacid.com/images/photograph.jpg" width="300" way="width:300px;" />   <-- This image will Non be resized in Outlook -->  <img src="https://world wide web.emailonacid.com/images/photo.jpg" mode="width:300px;" />

While other email clients will read the style to determine the width, Outlook only reads the HTML aspect. So, ascertain both.

seven. Outlook ignores HTML item width and acme

As we've already mentioned, Outlook doesn't back up styling within of <div> tags.

So, when an email renders in Outlook, the <div> sections will presume the top of the text inside of them, and 100% width, even if you lot specify a pinnacle/width for them in lawmaking.

Once again, the fix for Outlook HTML emails is to use tables instead. We have seen this with a few other elements, merely the <div> situation is the well-nigh common problem.

8. Font stacks and Times New Roman

When specifying fonts in electronic mail marketing, developers use font stacks to list the preferred typefaces that the client should render. The trouble is, If you include a custom font at the top of your font stack, Outlook will ignore all of your fallback fonts and instead display Times New Roman. (Not absurd, Outlook!)

Nosotros explicate a few ways to fix this problem in our commodity on Outlook and font stacks.

Fix one: Replace the stack using attribute selectors.
Prepare ii: Wrap text in a span.
Gear up 3: Add MSO conditional code.
Gear up 4: Specify a custom font in a media query.

Some other selection nosotros recommend for Outlook 2016 and 2019 is adding media="screen" to the web font link that you've specified in the font stack.

Fix 1 was the almost popular among email geeks who submitted their ain solutions to E-mail on Acid. It works considering Outlook ignores attribute selectors.

Write your font stack, but every bit you normally would, but put your custom font last in the list. Then include the following code in your CSS: "[manner*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !of import; }" This lawmaking will tell the email customer to supervene upon whatever fashion that includes the custom font with the correct stack:

          <html>    <head>      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">      <fashion>        div {font-family: Helvetica, sans-serif, 'Tangerine';}        [fashion*="Tangerine"] { font-family unit: 'Tangerine', Helvetica, serif !important; }      </style>    </head>    <body>      <div manner="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Making Email Cute!</div>      <div fashion="font-family unit: Helvetica, serif;font-size: 48px;">Helvetica</div>      <div style="font-family: 'Times New Roman', serif;font-size: 48px;">Times New Roman</div>    </body>  </html>

Check out the full commodity to get code snippets for the other 3 fixes.

9. CSS groundwork images not supported

While you can use CSS background images with Outlook.com and Outlook 365, they are non supported in most desktop versions of the client.

Prototype backgrounds coded with the CSS property groundwork-prototype may be problematic every bit well. Outlook 2016 and other older versions of the email client can't handle normal paradigm backgrounds.

To make backgrounds work in older versions of Outlook, yous'll need to use some Vector Markup Linguistic communication (VML).

10. Controlling line summit in Outlook

At ane time, emails were rendering taller than expected in Outlook.com because the client was decision-making line-summit using CSS. That'due south not so much of an issue anymore.

Microsoft Function styles (MSO styles) will tighten up your lines just a scrap. If your spacing seems off, requite it a endeavor. Add together "mso-line-height-rule:exactly;" directly before the line-height way, inline or embedded.

xi. Alignment issues in Outlook

All the same another common trouble in various versions of Outlook occurs when developers create two-column. responsive email templates that are meant to stack on mobile devices.

Some desktop versions of Outlook effort to stack content in the columns as well. The result is an email that's out of alignment and may look something like this:

To ready this Outlook HTML electronic mail bug, developers can use what's known as fluid hybrid design for responsive emails. This involves using ghost tables, which are invisible to clients other than Outlook, and constrain columns and so that they display as intended.

Get code snippets and an in-depth explanation of how to use ghost tables to ready Outlook alignment issues.

The reason yous test before you send

Email evolution gets complicated speedily, and for many electronic mail developers, dealing with Outlook tops their list of reasons why.

They say ignorance is elation, only wouldn't you rather know when Outlook is messing upward the campaigns you've coded? We built the Electronic mail on Acid platform to simplify the complexities of email marketing.

With our reliable email previews, you tin can run unlimited tests and catch problems with Outlook HTML emails before they go out to customers and subscribers. Email on Acid gives you lot the power to see into the future and fix things offset.

This post was updated on October 12, 2021. Information technology was also updated in Feb 2019, Apr 2018, and originally published in September 2015.

Author: The Electronic mail on Acid Team

The Electronic mail on Acid content squad is fabricated up of digital marketers, content creators, and directly-upwardly email geeks.

Connect with the states on LinkedIn, follow usa on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Author: The Email on Acid Team

The Electronic mail on Acid content team is fabricated upwards of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow u.s.a. on Facebook, and tweet at @EmailonAcid on Twitter for more sweetness stuff and slap-up convos on email marketing.

laraanimad.blogspot.com

Source: https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/