HTML Recommendations

Building an email message is similar to a coding a website. Your message may render differently in different browsers. When setting up your own HTML for an email message, here are some recommendations:

  • Use inline CSS

    Many tend to avoid CSS altogether but if you must use CSS, it is always use inline CSS. An exception to this is for responsive design.

  • Avoid shorthand properties. Always declare the property individually.

For example, DO NOT DO THIS:

p { font:bold 10pt/11pt georgia,times,serif; }

Instead, DO THIS:

p {font-weight: bold; font-size: 10pt; line-height: 11pt; font-family: georgia,times,serif;}
  • Keep your email width between 600-700 pixels

    Some email clients show your email in the preview pane so having a width more than 700px can cause part of your message to be cut off. Keeping your email width between 600-700px will prevent recipients from needing to scroll horizontally. In addition, it is shown that if your message is constantly wider than 700px, your email may be considered spam and cause some soft bounces.

  • Make sure the title tag doesn't contain the word "Untitled."

  • Avoid hitting the spacebar to position your content

  • Avoid the use of scripts, such as JavaScript

  • Avoid red or blue textual colors — spammers' colors of choice

    Do not use "invisible" text

  • Always include an ALT tag in your images.

    Sometimes an email client may have images turned off. In this case, the Alt tag will show in the box so it is recommended to include a good description of the image or promotion.
  • Always include the dimensions of your image

    Without set dimensions, many email clients will set their own sizes when images are blocked and break your layout. Make sure your images are correctly sized before adding them to your email since some email clients may take the full size of the image.
  • When using a background image, provide a fall back color

    Some email clients have no support for background images. Always provide a fall back color in case the background image does not show. Make sure to set the color to something where the text is legible.
  • Test, Test, Test!

    Don’t forget to test your email on multiple email browsers. Images and breaks may be different depending on the email browser’s settings so make sure to test the messages and make sure they’re rendering the way you want them to.

Designing an email message can be a lot of work, with all the different email clients and keeping up to date with changes in standard HTML/coding.

Have more questions? Submit a request


Please sign in to leave a comment.