6 Tips for Email CSS Render Testing
Let's face it: The goal of sending targeted email campaigns is to inform your subscriber or customer of something great that they are missing—like a new product release, cross-sell or information about your brand. But, without proper email design and formatting, your marketing message may never reach your subscriber.
ISPs and Rendering Issues
Different Internet service providers (ISPs) render emails in different ways, which may prevent your message from displaying properly. This means you could have coded a template that looked wonderful in Gmail, but appears scrambled or unorganized in Hotmail. So, an email that was supposed to look like the "Properly Coded Email" image at right, instead looks like the "Poorly Coded Email."
In addition to ISPs, keep in mind that HTML email templates render differently on Internet browsers: What looks good on Chrome might not look the same on Safari. Unfortunately, email templates that do not render correctly can be flagged as SPAM or may never reach your customers' inboxes due to regulations set up on the ISP's backend system. For example, when an email is sent, it goes through a set of processes before entering the recipient's inbox. One of those processes determines if your email has "dirty HTML code." If the system determines that your code is dirty, it may not deliver your email.
Most online marketers make the assumption that once they code their templates, they will render correctly across all email mediums. This is simply not the case. Below, I have listed some best practices for using HTML code and the different elements that ISPs do not accept when processing that code.
HTML not CSS
HTML and CSS is like a long-lasting relationship. They are still very different, but cannot live without each other. It is important to understand that HTML in email design does not work the same as HTML in website design. While website designs call to style sheets to provide the design of the wire frame, email templates need inline CSS to render correctly with design attributes.
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.
Last but not least, you must create free accounts with all the major ISPs or at least the mailboxes that are contained in your target list. This approach lets you see firsthand how the email renders in each platform and lets you make any changes you need. However, if you choose this path, make sure to check your inboxes over a wide variety of Internet browsers. Remember: Browsers also have their own standards of reading HTML code.
To satisfy the unique requirements of the major mailbox providers, here are the six major dos and don'ts of using CSS in your emails:
- Do not try adding style tags to your head tags
- Do not use external style sheets
- Do test background images across all email clients
- Do use a font tag on anything that involves content
- Do steer clear of using CSS positioning
- Do not use div tags unless absolutely necessary
Emails that render properly ensure your messages are delivered. If your email does not render as you intend it to then you will lose subscribers and diminish your deliverability reputation.