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!