Tallan Blog

Tallan’s Experts Share Their Knowledge on Technology, Trends and Solutions to Business Challenges

Coding an Email Template

You’ve just been assigned to code an Email Template by your Project Manager, and you have no idea where to start. If you are put in this unfortunate position, you should first ask if you can simply use an already established email service, which includes support. If that proves to be fruitless, you will have to write your own. Writing email templates gets frustrating fast due to its incompatibility with CSS and the inconsistency between Email clients such as Gmail vs. Outlook.

CSS Incompatibility

The first step with dealing with CSS incompatibility is to break the cardinal rule of front-end development completely; you have to inline-style your CSS code. I can feel your contempt for me right now, but it’s the only way to guarantee your styling is rendered properly. 

Example:
CSS in-line style

Tables          

When creating the layout for the HTML code, you want to be displayed in the Email, use tables. Outlook doesn’t support flexbox or float, so if you want a grid that aligns together, your best bet is a table.

For example; if you wanted a grid displaying four NBA teams under a header that said Teams and you wanted to achieve this with just DIVs, it wouldn’t display properly in an Email template even though it would render in Web Browsers as shown below:

Email Style DIVs

This outputs an email that looks like this:

Email Template Output
However if you place that code in a Table Layout, you will get what you wanted:

Tables Template

This outputs an email that looks like this:

Email Template Output 2

Buttons

Everyone knows how essential Calls-To-Actions are for Emails; how else would you drive user traffic to your desired URL. It’s preferable to programmatically create buttons as opposed to using images because it allows changes to be made more easily. However, getting buttons to display correctly on Outlook is exceptionally frustrating. This cope snippet below works perfectly fine on Gmail but looks completely off in Outlook:

unmatched Code Outlook v Gmail

This displays in Gmail like so:

Gmail CTA

But, this displays in Outlook like so:

Outlook CTA

The issue causing this behavior is that Outlook doesn’t recognize link tags as block elements, so placing the styling directly in the anchor tag does not work. The solution is to move the button styling over to the <td> wrapping the anchor tag as shown in the code snippet below:

TD style code

This displays in Gmail like so:

Gmail CTA

And, this displays in Outlook like so:

Outlook CTA hard edge

This looks a lot better now, but it still isn’t displaying rounded edges properly. The issue causing this is because Outlook doesn’t support border-radius. The solution is using a workaround using a VML RoundRect element when the Email is being displayed on Outlook. To accomplish this, use the [if mso] (for Outlook) and [if !mso] for other email clients. The code snippet below illustrates this workaround. Adjust the height and width accordingly because the VML RoundRect element styling isn’t an exact match with an anchor tag.

Note: Using mso-hide:all on the table instead of wrapping it in the [if !mso] block works as well, but it doesn’t when trying to forward the Email. When the Email generated by this code snippet is forwarded, two buttons will appear because the mso-hide:all is ignored. To avoid this issue, just use the [if !mso] block.

if!mso style

This displays in Gmail like so:

Gmail CTA

This displays in Outlook like so:

Outlook CTA soft edge

ALT Text

Outlook blocks images on Email until the user decides to download these images or if the sender is added to a safe sender’s list. Adding ALT Text to these images is good practice in HTML and is good practice for Email Templates as well for the same reason; it provides a description of said image for screen-reading tools to read out to visually impaired users.

Final Thoughts

Finally, always remember to test these email templates. I can’t begin to describe all the random issues that show up from the smallest mistake. Different Email clients will display the templates differently, as shown by the button examples above, so you want to be sure your hard work is displaying correctly for everyone. A great site to test your Html Email templates is https://www.putsmail.com. Writing about all these issues has been cathartic, to say the least. I hope you won’t run into these same issues I did when I was assigned to code Email Templates.

Share this post:

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\