6 Tips for Email CSS Render Testing
Besides making sure to use inline CSS, another important rule is to use div tags sparingly, because they tend to break emails more than any other feature. Div tags can be good for styling designs and keeping simple layouts in order, but they should not be used when positioning properties throughout your template. Instead, make sure to use tables instead of divs because they will render better throughout the major ISPs. Ultimately, they are the best way to achieve your overall design goal and keep your message consistent with all webmail clients.
- Gmail does not support style tags. You will need to use inline CSS in templates to have your design display properly in Gmail inboxes. While you should be using inline CSS for Gmail, please also note that Gmail does not accept CSS background images.
Also, remember to include "alt" tags, because most subscribers need to turn images on in order to view them and you do not want a blank spot where your image is supposed be.
- Yahoo is one of the best of the webmail clients to render HTML templates. Yahoo allows multiple CSS characters to be processed. One limitation to note is you will need to add an align tag to all content. Without this tag, the email content will default to center.
- Hotmail, like most of the ISPs, does not support CSS positioning. This means things like background images, margins and borders cannot be displayed in a Hotmail inbox. These feature sets must be nested in the tables you create through inline CSS.
- Outlook also does not support positioning characters. As with Hotmail, this limits the use of padding sizes, defined margins and floats to position an item. Using a background image in your code will quickly cause frustration, because Outlook does not support nested or inline image backgrounds. Best practices dictate adding a background color, just in case your image does not load.
An important step in creating effective HTML email templates that render correctly across all platforms and browsers is testing formats and wireframes. It is best to test your email templates across all the major email clients, as well as the major email clients used by your audience. There are helpful tools for testing that can be directly integrated with your email platform and sending ISPs, such as ReturnPath and Litmus.