Six CSS Tips for Email 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 that 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 this:

Properly Coded Email
Properly Coded Email

Instead looks like this:

Poorly Coded Email
Poorly Coded Email: Style tags were not coded correctly

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 it 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 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 ISP’s. Ultimately, they are the best way to achieve your overall design goal and keep your message consistent with all webmail clients.

Gmail

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

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 that 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, Hotmail 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

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.

Testing

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 and 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.

At the head of the pack is a service called ReturnPath. Among the variety of features on ReturnPath is the ability to see what an email will look like above the fold and when images are on or off.

Another paid service that works wonders is Litmus. With a paid account you can upload any given HTML code that will then populate the code for different ISP inboxes. Litmus also provides users with the capability to perform live editing on emails – allowing users to make changes on the fly.

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

Keystone

Use these 6 CSS tips for email render tests. 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.

Ben Meyer is the Email Campaign Coordinator at cleverbridge