Hello!

OUTLINE

1. Introduction

2. What's The Big Deal With Outlook?

3. How Do We Fix This?

4. STEP 1: New Script Include

5. STEP 2: Update Our Email Script(s)

6. What's The End Result?

1. INTRODUCTION

This article explains how to utilize buttons with rounded corners that are compatible with both Outlook and HTML clients such as Gmail.

These are highly likely to be compatible with most email clients, but I don't want to make that claim without testing. And I don't want to test that, haha!

2. WHAT'S THE BIG DEAL WITH OUTLOOK?

Why single Outlook out from HTML clients, you ask? Good question. Have you seen what Outlook does to ServiceNow's email "buttons"?

Once you get back from the 1990s, which that button brought you back to, I'll explain.

The Outlook Desktop Client uses VML to draw shapes. Not HTML. Interesting, isn't it? Wikipedia calls VML a "depreciated format" used for "legacy reasons only". Haha, I'm sure they have good reasons, but man that complicates things. (I'm guessing they like VML's mysterious, complicated, and undocumented current-use aspect, as it causes a border-to-entry which probably helps keep their product proprietary, making it difficult to copy/imitate their product.) This means that it ends up taking our HTML shapes that we feed to it, does its best to translate the HTML into VML - while dropping a lot of "words" that it cannot comprehend - and we end up with these ugly rectangles with 90 degree edges, and malformed padding and borders.

3. HOW DO WE FIX THIS?

Three words. Outlook Conditional Comments. I'm no expert, I just did a bunch of research on this so that I could stop Outlook's tyranny, as I like to call it. I'm sharing with you what I found in my research and development.

CREDIT WHERE IT'S DUE: Thank you VanAlbert! This gentleman provided the answer to the Rounded corners in outlook without images Stack Exchange question, which I heavily used to produce this solution. I just translated it to ServiceNow speak in a re-usable format, that's all.

If you follow these steps, you too can generate professional, modern looking buttons from ServiceNow that do not break in the Outlook email client, while still remaining compatible with HTML email clients.

4. STEP 1: New Script Include

First, let's create this script include. This has code that detects if the email client is "mso" (Outlook) and uses VML if it is, HTML if it's not. This creates compatibility for Outlook's legacy rendering scheme, while retaining compatibility with our normal HTML clients.

We're housing this in a script include for convenience, to allow easy re-use elsewhere.

Just call one of the two script includes below and feed it the variables (message, size, colors, link, border-radius) that fit your own unique situation, and you've got your own customized button, anywhere you want to include it, easy!

Object:	Script Include
Name:	OutlookRoundedButtonDynamic
Application:	Global
Accessible from:	This application scope only
Client callable:	FALSE
Description:	Script include for creating rounded buttons usingy using VML for the Outlook client, while using HTML for all others.This version dynamically sizes the button to fit the text via the mso-fit-shape-to-text attribute.
Script:	function OutlookRoundedButtonDynamic(Message, FontSize, FontColor, bgColor, BorderRadius, Arcsize, Hyperlink){//FontSize: CAUTION! The text's width grows faster than the autosize does, eventually causing clipping at roughly 30-40px FontSize and 25 characters. //Arcsize: VML uses Arcsize, HTML uses border-radius. 20% arcsize equals roughly 7px border-radius. //Padding: CAUTION! The VML's inset eventually outpaces the autosize, being likely to cause clipping when handled dynamically. Therefore, the HTML padding has been coded to the VML's inset default of 0.1in left/right and 0.05in top/bottom. //Assemble the HTML string in logical pieces, pulling in the Variables var ifmso = '<!--[if mso]>'; //Microsoft Outlook (Outlook Conditional Comments) var thenVML = '' + Message + '/v:textbox/v:roundrect<![endif]--><!--[if !mso]> <!-->'; var elseHTML = '' + Message + ''; var endif = '<!-- <![endif]-->'; //Return the compiled HTML string return ifmso + thenVML + elseHTML + endif;}