How should I design and code my HTML content?

When creating your own HTML email content, here are several design tips and recommendations to keep in mind:

Layout

  • Keep the width of your design between 500-650 pixels to ensure readability in most email clients and applications.
  • Avoid complicated layouts, a large number of nested tables, and tables with a large number of rows and columns.
  • Design for the preview pane: keep all important information "above the fold," and pay special attention to the upper left corner.

Tables

  • Nest tables; do not rely on left and right margins or padding for table cells.
  • Set the width in each cell (not the table) in pixels (not percentages). Do not use rowspan or colspan.
  • Avoid spacer images and stick to fixed cell widths.
  • Avoid unnecessary white space in table cells.
  • Use a container table for body background colors.

Images

  • Avoid using one big image for your content. This can be interpreted as spam by many filters. Instead, use a balance of image and text areas.
  • Include absolute paths to images in your HTML - using relative paths will not work. You will need to host the images on your server and then link to them in your code, or upload them to your Content Library and obtain the full URL path, or import your template using the .zip file option.
  • Ensure images are in RGB format, 72 DPI resolution and optimized for JPG or GIF format.
  • Setup an "alt" tag for each image, as many email clients and applications do not display images by default.
  • Always set height and width attributes on images - so in the event they are not displayed, your layout will remain intact.
  • Avoid images less than 16 pixels in height or more than 1700 pixels in height.

CSS

  • Use inline CSS. Make sure it's below the <BODY> tag. Any CSS inside the <HEAD> tags will be lost.
  • Use only email-safe fonts.
  • Declare font properties individually, and use longhand descriptions for fonts and colors.
  • Bolding text should be done using <strong> or <b> tags. If you put a style of font-weight bold on a span tag it will likely break other styles on the span tag as our template builder converts it to a strong tag. If you need to apply a style to a certain bit of text, wrap it in a span tag with a style attribute.

Other Content

  • Don't use CSS floats, absolute positioning, or z-index.
  • Don't copy/paste from Word, results will be better if built within our template builder.
  • Don't try to add in iFrames, Flash, SVG, JavaScript, VML, or forms. Most of this type of content will be stripped by our template builder, as it is not widely supported by email clients.

General

  • Always code with a doctype. The default one we use is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

Test, Test, and Test Again

  • Use the Inbox Preview tool to preview how your design will appear in popular email clients and applications.
  • Focus on refining your design to display optimally in the email clients/applications used most by your subscribers.
  • Retest your template every few months to ensure that it still renders correctly as the various email clients and applications continue to evolve.