KB164204020: Automation Engine - How to create HTML e-mail which can be viewed correctly in most e-mail clients

Description

By adding the code below to the first line of the Send E-mail task message field, e-mail clients will be instructed to render the remaining code in HTML and render e-mail subject, attachments and e-mail subject in UTF-8, so special characters will also look on systems with another language as this one.

Send E-Mail Encoding

#set ($ContentType="text/html;charset=utf-8")
#set ($SubjectCharSet="utf-8")
#set ($AttachmentsCharSet="utf-8")

Building HTML e-mail design is not exactly like building for the web. Most e-mail clients do not have the capacity to display some of the more recent and advanced features that a web browser can. Most e-mail clients use a different rendering engine than current web browser, limiting what can be displayed. Even so, a pleasing design can be achieved in Automation Engine by following some simple advice.

Procedure

Set your design for the lowest common denominator: Since there are a multitude of e-mail clients available and all do not support the same features, design to the simplest feature set. Some viewers will use web based clients such as Gmail and Outlook.com while others will use dedicated clients such as Apple Mail or Outlook. Each client renders HTML differently.
Use tables for layouts: Unlike current web design practices, the use of tables is recommended, since most e-mail clients do not understand CSS formatting. When building tables, try to use percentage for width, since the actual size of the e-mail preview pane is not known by the designer.
Use inline CSS: Some clients such as Gmail will strip CSS information from the head of the HTML page. To solve this, add your CSS inline, where needed.
Use GIF or JPGS for images: Some clients such Lotus Notes 6 and 7 do not support the PNG format. Use GIF or JPGs instead.
Use the alt tag: Even if the e-mail client will not display images, the use of the atl tag will ensure the recipient sees what was intended.
Do not use floats: Some common clients (such as Outlook 2007 and previous versions) offer no support for floats. Use the align attributes of the img tag to float images.
Test: Test your e-mail with multiple e-mail client. If you know the main client to be used, concentrate on that one but make sure others will still see a pleasing e-mail. Compromise is important.

For a complete and up to date comparison of what features are supported on what e-mail clients, see the following link: http://www.email-standards.org.

For more information regarding HTML e-mail in Automation Engine, see:

- Page:
  
  KB150078574: Automation Engine - How to add company logo to e-mail template for E-mail task
http://help.esko.com/docs/en-us/automationengine/14/userguide/home.html?q=en-us/common/ae/task/ta_ae_SendEmail.html

Sample code for a simple HTML e-mail. Copy the code below and paste it into the Send E-mail task message field. Enter your SmartNames where appropriate.

Sample HTML Email

#set ($ContentType="text/html;charset=utf-8")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Notification Email</title>
</head>
<body bgcolor="#8d8e90">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#8d8e90">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="393"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="46" align="right" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="67%" align="right"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#68696a; font-size:8px; text-transform:uppercase"><a href= "http://www.esko.com" style="color:#68696a; text-decoration:none">
<strong>www.yourcompany.com</strong></a></font></td>
<td width="29%" align="right"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#68696a; font-size:8px"><a href= "http:/www.esko.com" style="color:#68696a; text-decoration:none; text-transform:uppercase"><strong>Your Link</strong></a></font></td>
<td width="3%">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>

</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%">&nbsp;</td>
<td width="80%" align="left" valign="top"><font style="font-family: Georgia, 'Times New Roman', Times, serif; color:#010101; font-size:24px"><strong><em>Hi <<customercontact1/>>,</em></strong></font><br /><br />
<font style="font-family: Verdana, Geneva, sans-serif; color:#666766; font-size:13px; line-height:21px">PLEASE READ CAREFULLY: Qapla. Dah tlhingan hol mu ghom a dalegh. Qawhaqvam chenmohlu di wiqipe diya ohvad ponglu. Ach jinmolvamvad Saghbe law tlhingan hol, dis, oh mevmohlu. Ach dis jar wa mahcha dich wikia jinmoldaq vihta. Hov lengvad chenmohlu tlhingan hol e ej dah oh ghojtah ghot law. Qapbej holvam wicha meh, qawhaqvam chenmohlu.
<br />
<br>On behalf of Your Company.<br />
<br />
<<operator/>><br />
</font></td>
<td width="10%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="right" valign="imagestop"><table width="108" border="0" cellspacing="0" cellpadding="0">

<tr>
<td align="center" valign="middle" bgcolor="#aac22c"><font style="font-family: Georgia, 'Times New Roman', Times, serif; color:#ffffff; font-size:14px"><em><a href="http://www.esko.com" target="_blank" style="color:#ffffff; text-decoration: underline">click here for</a></em></font></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#aac22c"><font style="font-family: Georgia, 'Times New Roman', Times, serif; color:#ffffff; font-size:15px"><strong><a href="http://www.esko.com" target="_blank" style="color:#ffffff; text-decoration:none"><em>More Info</em></a></strong></font></td>
</tr>
<tr>
<td height="10" align="center" valign="middle" bgcolor="#aac22c"> </td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>

</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="11%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><a href= "http://www.esko.com" style="color:#010203; text-decoration:none"><strong>Company Link 1 </strong></a></font></td>
<td width="2%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><strong>|</strong></font></td>
<td width="11%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><a href= "http://www.esko.com" style="color:#010203; text-decoration:none"><strong>Company Link 2</strong></a></font></td>
<td width="2%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><strong>|</strong></font></td>
<td width="11%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><a href= "http://www.esko.com" style="color:#010203; text-decoration:none"><strong>Company link 3</strong></a></font></td>
<td width="2%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><strong>|</strong></font></td>
<td width="11%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><a href= "http://www.esko.com/en/company/contact/sales-contacts/" style="color:#010203; text-decoration:none"><strong>Company Link 4</strong></a></font></td>
<td width="2%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><strong>|</strong></font></td>
<td width="11%" align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><a href= "http://www.esko.com/en/products/overview/" style="color:#010203; text-decoration:none"><strong>Company Link 5</strong></a></font></td>

</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center"><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#231f20; font-size:8px"><strong>Your Company Name | 12345 Any Street, Any Town, ST 00000 (USA) | Tel.: +1 555-555-5555 | <a href= "mailto:info@yourcompany.com" style="color:#010203; text-decoration:none">info@yourcompany.com</a></strong></font></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

Article information
Applies to	Automation Engine all versions
Created	13-Feb-15
Last revised
Author	MAOG
CW Number

Contents