Your Buttons Are Broken: How to Fix Default Act-On Buttons for Outlook

Email development can be one of the most frustrating parts of a marketer’s day-to-day life. Let me make it easier by solving one of the most common issues that affect many emails rendered in Outlook: The Broken Button.

Tell me if you’ve heard this one before.

It’s 8 A.M. Your prized email campaign has just launched.

Not just launched. Your email just launched across 4 different time zones to 500,000 prospective customers.

You’ve done it. You’ve spent hours of pixel-perfect detail work, spent a week reworking copy, sent 25 test messages, looped in other team members for feedback, and even completed a subject line A/B test.

You open up your laptop to see it in your inbox. Right on time. You’ve worked tirelessly for weeks to ensure that this piece of intricate automation delivers your message of marketing gold to every person you can muster.

Then your sales team complains that the message looks bad !

You tested it, you proofed it, you’re whole team looked at it! What is going on?!

And someone shows you that your beautiful call-to-action (with just the right shade of purple) looks like this in their Outlook inbox:

What It Looks Like

What It’s Supposed To Look Like

Ouch.

The Problem is Outlook on a PC

Before we can know the solution, we have to know the problem.

To an email client, your “button” is just a table. This can be present in any tables, including Act-On’s Bullet Proof Buttons.

Outlook is notorious for ignoring styling within table cells, though it usually works fine on a Mac. Since most creative teams are Mac users, these issues can be invisible until it lands in an Outlook for PC inbox (Here is a great article by Litmus on Outlook render issues). In this case, our button is rendering with too much padding on the bottom. It looked sleek and slim in your WYSIWYG editor and on your Mac, but now it is all kinds of sideways. The issue you see above you is caused by a simple issue: Line height.

Line height controls the space around any rendered text. Your call-to-action does in fact have text in it, and that spacing around the text causes what you see. That table grabs the padding and styling, including the line height. Because the text is telling the table it needs a certain amount of space to exist, the table accommodates by pushing itself way farther out then we actually want the table to be.

So how do we fix it?

Fixing it with native Act-On CSS styling

In Act-On, Line Height is controlled by the Line Spacing option in the Message Styling tab. Line Height and Line-Spacing are generally coupled together by default.

This issue only appears when the Line Spacing of an email is set to 1 ½ or higher. This is essentially the breakpoint for the button displaying properly in Outlook and can solve the issues in many other popular email clients.

Make sure it’s not set to Default. This can be higher than you expect it to be and cause all sorts of issues.

Fixing it in HTML

What if you need a specific line height for the rest of your email?

In-line CSS allows us to set the line-height for this specific element. We want to set ours to 1.

An example of the code looks like:

<td style=”line-height:1;”>

But it’s never that easy. You can’t just drop that code randomly into your HTML. You’ll want to make sure the line-height is present on the <td> level. Below is the code for Act-On’s Bulletproof button. (This can be seen by clicking the HTML button in the Rich Text Editor.)

<td class=”aoButtonTable” style=”padding: 10px 20px; text-align: center; background-color: #967bb6; color: #ffffff; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;”><a class=”aoButtonAnchor” style=”word-break: normal; word-wrap: normal; text-decoration: none; color: #ffffff; font-size: 14px; font-weight: bold; font-family: Arial;” href=”http://” target=”_blank”>SAVE MY SEAT</a></td>

The important bit for our purposes is that <td>. This is the Table Data. If we look to the “style”, we can see all of the styling that is present in the button. There, we can drop our line-height: 1. The end product will look like this:

Elements that are styled in-line have priority over styling present in the overall page. If the line-height is set 1 on the <td> level the button will render properly, even with higher Line Spacing. It may need to go on a higher level, but that is very rare.

The great thing about this solution is that it’s marketing program agnostic. This will fix it at the email client’s DNA level.

Side-by-side you can easily see the difference:

Now it looks right!

This will never happen again!

Voila! A beautiful button to align with your beautiful messaging!

Now, those two images are taken from my Desktop and were rendered by Outlook. Did it work on mobile? The only way to be certain that this worked is to test in email client after email client. Even with everything I said, nothing can beat rigorous testing. There’s a litany of services that allow you batch test these things, and I can’t recommend them enough.

Knowing is half the battle.

– G.I. Joe

Breathe easy. Now your button has some backbone and can withstand the depths of different email clients. You know that every detail is important to your customers. Make sure your buttons reflect that as well.

Your Buttons Are Broken: How to Fix Default Act-On Buttons for Outlook