Designing email templates that render properly across all email platforms can be one seriously challenging task. With that being said, there are a few basic design elements that can be used when designing templates to diminish the burdens of cross-platform compatibility. Small piece of advice: If you have experience using HTML, take a step back and leave best practices aside. When it comes to designing an email template, the rules of the game are a little different.
Best Practices For Email Templates
General Design Principles:
- Design your template using tables. Most of the email clients do not support <div> tags.
- Specify cell width. This will limit interpretation by email clients.
- Use nested tables rather than support floats, margins or padding, since these properties are not supported by email clients, such as Outlook. Specify cell widths to mimic margins and padding and use the “align” property to replace any floats.
- Make your template between 600 – 700 pixels wide.
- Avoid using external CSS. Instead, use inline styling to designate how text should appear.
- On that note, define styles for every single element, specially if you will be using text (including font-family, size and color).
- Avoid Flash (who uses Flash anymore…).
Best Practices When Using Images:
- Avoid using too many images. Often times spam filters will interpret image heavy templates as being spam.
- Avoid background images. Most email clients do not support them.
- Specify both height and width.
- Use absolute URLs for the image location.
- Use alt tags in your images in the case that your recipients are using an email client that doesn’t automatically download images.
Best Practices for Testing:
- ALWAYS ALWAYS ALWAYS: TEST ACROSS EMAIL PLATFORMS!
- Use the Email Preview Test feature to see what your template will look like across multiple email clients.
- Test internally by setting up a test campaign (create a Test list).
Read: Using the Email Editor