It goes against every rule of modern web development best practices, but HTML emails need to be developed using Tables and inline styles instead of divs and cascading style sheets. Divs and styles will actually work in some modern email clients; however, not all will render a reliable result. As such, we must rely on the solid structure offered by HTML Tables.
For an overview of development best practices, see my previous article HTML Email Devlopment Best Practices
Superscripts
Superscripts can render differently depending on how the email client perceives the styles that have been provided. It’s better to use a <span> tag and styles to give he appearance of the <sup> tag.
<span style="font-size:75%;line-height:0;vertical-align: 3px; ">®</span>
The font-size and vertical-align will vary depending on your project, but line-height should remain at "0" to ensure cross client support.
Bullets
List item bullets do not always render properly, if at all. Instead of images you should use the HTML alternative •
Doctype
Stick to the XHTML strict doc type. The email clients that strip out your doc type tend to use this one as the default. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Character Encoding
It’s not recommended to specify your character encoding throughout the document. Instead, follow similar rules to websites, and place the "meta" tag in the head.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Phone Numbers on mobile and tablet
If phone numbers and addresses are turning blue and linking in iOS devices, add the following to the
and they will revert back to the original styling.<meta name="format-detection" content="telephone=no" />
Outlook Web App (OWA) support
Do we have to...
OWA adds padding to all the text in your email, and adversely affects the line-height. To correct this behavior you can add the following:
<tr><td><div><multiline="Body">all of your content</multiline></div></td></tr>
Simply wrap your inner content within a <div> and a <multiline="Body">. As this tag is not recognized as a part of any standard, other email clients will ignore it, while at the same time correcting the spacing issues in OWA.
