Skip Navigation
Expand
Guidelines for writing HTML email notifications
Answer ID 8688   |   Last Review Date 01/13/2019

What are some general guidelines for writing HTML email notifications through Knowledge Advanced?

Environment:

Knowledge Advanced (KA)

Resolution:

Knowledge Advanced (KA) gives customers complete freedom to design their email notifications.  However, the delivery and appearance of email notifications can be impaired by factors beyond the scope of Knowledge Advanced.  The HTML rendering performed by email clients varies widely.  Some clients render HTML faithfully, while others only render a subset of HTML tags.  With that in mind, here are a few guidelines that will help make emails render correctly across the widest set of email clients:

1) Do not rely on images.  Many clients block images in emails by default.

One way to include an image is to link to an externally hosted image: <img alt="CompanyLogo" src="https://my.website.com/logo.gif" />

2) Use inline CSS. Some clients strip out the style header, removing any styles that aren't inline.

Instead of using CSS like this (often in an external file or in the HTML <head><style> element, which usually looks like this:
 
<html>
<head>
<style>
    p {
      line-height: 1.5em;
      margin: 0px 0px 10px 0px;
    }
</style>
 
Instead apply the CSS styling to each HTML element:
<p style='line-height:1.5em;margin:0px 0px 10px 0px;'>Lorem</p>
 
This link provides a good jump description of inline CSS, a comparison of inline vs head/external referenced, and some examples: https://www.codecademy.com/articles/html-inline-styles.

3) Don't use HTML5 tags.  They are not widely supported by email clients.

Several companies and organizations have posted comprehensive HTML email guidelines online.  If you would like further information about best-practices for HTML email, please seek out these guidelines.  One example of such a site: Campaign Monitor: Coding Your Emails.