Useful Tips for HTML Email Design, Part 2

Earlier this week, I provided a couple of HTML tips for making sure your emails always look their best. As I mentioned previously, most designers building HTML e-mails understand and implement most best practices, such as avoiding large images, but there seems to be a large disconnect with some of the more subtle yet equally crucial components.
Here are a few more HTML tips for email:
Most of your favorite CSS tricks won’t work
CSS3 has brought Web designers a number of interesting techniques that are useless when applying inline style to HTML elements in e-mails. Equally useless are pseudo classes and background and positioning style elements.

However, since e-mail designers need to work in tables, it’s a safe bet that most will only be using basic style elements to begin with. Advanced style techniques that can’t be used won’t need to be considered.

Advanced tip: Though they are more basic style elements, don’t use padding and margin styles if it can be helped – they’re unreliable. As annoying as they may be, spacer images are actually the better option, though they should be used sparingly as they can raise an e-mail’s spam rating. There are simple HTML tricks to bypass them, however, such as the use of a non-breaking space within a table cell where the height and width are specified.

Additional must-implement HTML e-mail design tips:

  • Lists will not display bullets points. Bullets and corresponding text must each occupy a unique table cell.
  • Background images will not display in Outlook. There is a workaround for this, but don’t rely heavily on it. If a background image isn’t going to be related to the core message content, then the background image isn’t necessary. If it is related to the message, then there are much bigger problems with the creative than the HTML.
  • Text links will need a style=”text-decoration: underline;”
  • Some e-mail clients will remove body tags. If you need to use a specific background color around an entire piece of content, it’s best to create a container table cell with a background color –td bgcolor=””#COLOR”” – with the overall table width set to 100%.
  • If you have a table inside a table, you will need to apply your text styles to the closest td tag as well. It will not always inherit your styles from the wrapping table.
  • Be careful when slicing up complicated images to accompany text in a table. Always leave plenty of room for text to expand in your design. E-mail clients tend to render text differently.

Thanks to Mike, a content specialist here at Knotice, for contributing to this post! Stay tuned for future posts from Mike!

1 Comment
Phone: (800) 801-4194