Outlook Email Buttons
Original Button
When I started at Caesars, one of the first things I noticed was, in Outlook, their buttons were only clickable when you moused over the button text, not the actual button area. That's not technically a button, a button should be clickable anywhere on the button, otherwise it's a text link with color surrounding it. Everyone in the organization used Outlook, and some of our recipients did too, so I decided to undertake creating new buttons that worked properly everywhere.
Original Code
Above is the original button code, it's fairly inconsistent and sloppily written, so this doubled as a chance to tighten up the code, syntax, and consistency.
Starting Point
First step was to just code a button that should work everywhere. A key part of this button was making it responsive to anything written in it. Setting a hard width and height would make the button work everywhere, but I didn't want coworkers who weren't familiar with code to have to guess and change the size of the button every time. I wanted to create something seamless and foolproof.
Half Working...
This was the result of the code above. It worked perfectly in a browser, as it should, but Outlook is a different animal and needs creative solutions to work properly. Outlook wasn't even respecting the background color of the cell, so I needed to figure out how to change that.
Padding in the cell
Since Outlook had a problem with the background filling in on the anchor tag, I tried moving it to the actual containing cell...
We have backgrounds!
Now both buttons had a background. But now both buttons are only clickable on the text.
Very Out Of The Box
I knew the padding would have to be in the anchor tag to work in a browser, but Outlook didn't like that. So I have to find something Outlook does respect. It's a shot in the dark, but I tried using spacers in lieu of padding. There could be ones on all sides and sub in for padding.
Back to the Drawing Board
Absolutely not. That didn't work well in any application, but that was ok, there are lots of ways to accomplish things, and one had to pin Outlook down to displaying correctly. I avoided using VML, Vector Markup Language, something Outlook uses, and conditional statements, because I was still dedicated to simplicity. These buttons were used a lot and I wanted them to take up as little space/bandwidth as possible.
What Happens if...
How would a bordered button work in Outlook? I put a 1px red stroke on the button and sent a test email...
This is interesting
Suddenly Outlook interpreted all the padded space within the button as clickable. There still wasn't a background in Outlook, but I knew from the second test adding a background color to the cell would give a background.
Can Outlook Be Tricked?
Added the background color back to the cell, and obviously Outlook needed something existing outside the padding to make the padded area clickable. The border could simply be 1px and the same color as the button, but what if the border was Opx? Would that trick Outlook into honoring the clickable padding?
Success!
It would. Even with a Opx border, Outlook still makes the entire button clickable, the background filled in, and obviously still worked in browsers. It was a strange solution, but in a way it was elegant and a little clever. It reduced the need for much more complex code, and it worked perfectly well.
Good UX
Now I had a button that worked in Outlook the way a button "should" work. It seems like a minor thing, but that's what good UX is about. Those little quality of life enhancements that add up to make the experience predictable and easy for the user. This button became used in all the thousands of Caesars Entertainment emails, and replaced the old code with a clean, concise block.
