HTML Email Content

Testing

  • HTML version: use your email client such as Outlook and / or a web client such as Gmail. Each email client will display differently so it is worth testing more than one.
  • Plain text version: disable HTML email in your email client to view the text version, or lookup the test order to view.

Tips

  • Use XHTML -- therefore all elements most close. Examples: <img ... />, <br/>, <p> ... </p>, etc.
  • Do not surround your XHTML email content with the <html> or <body> elements. Do not use <head>
  • Use common and simple XHTML elements and attributes. Focus on message over design.
  • 530px is a safe width for certain clients and certain preview panes (AOL in particular). Not including AOL, 600px is maximum.
  • License lists which might be multiple lines should be surrounded in the pre tag for proper output:

    <pre>
    #{orderItem.fulfillment.license.licenses.list}
    </pre>

Images

  • Use images sparingly. They must be referenced as absolute URLs to an external website (http://...). URLs should be stable and not change frequently.
  • Do not rely on every mail client showing referenced images.
  • Specify "height" and "width" attributes so that layout is correct even if the image does not display.
  • Use "alt" on all images, even if setting alt to: alt=""

Safe HTML Elements

p, div, span, img, a, table, tr, td, ul, ol, li, h1, h2, h3, h4, br

Safe HTML Attributes

All Elements: style=
a: href=
img: src=, width=, height=, alt=
table: cellpadding=, cellspacing=, width=, border=, background=
tr: align=, valign=
td: colspan=, align=, valign=, background=

Safe Inline CSS (style=) Properties

background-color: border: color: font-size: font-style: font-variant: font-weight: letter-spacing: line-height: list-style-type: padding: text-align: text-decoration: text-indent: vertical-align: white-space: width:

Have more questions? Submit a request

Comments

Powered by Zendesk