Email Marketing News and Tips

Best Advice From The Email Marketing Experts

Email Marketing News and Tips header image 2

Using CSS In Your Email Newsletter?

June 30th, 2009 · No Comments | Print Post Print Post

As a Boomerang customer agent helping customers with the preparation of their email newsletters, I understand the importance of using CSS when designing creatives. For most email template designers, it reduces the extra work of having to assign HTML elements their look and feel individually. Sure you can set a section of your newsletter easily by defining them first. Sure you can use CSS to set a background image for another section. Sure you can use absolute positioning or layers to make life simpler.

While CSS helps primarily with formatting, rendering issues arise. For instance, if System X is updated every month (or so it seems), CSS support most likely will be involved. Take MS Outlook 2007 for example. Most email newsletter recipients use some version of MS Outlook. Some companies have upgraded their Outlook and are now using Outlook 2007. Based on tests I’ve done concerning emails that use CSS and Outlook 2007, this particular email program is not so CSS-friendly. Check the Internet yourself. You’ll see many reports on Outlook 2007 and its lack of support for certain CSS properties and selectors.

As for web-based email clients, Gmail is notorious for not supporting all style and link elements, all selectors, and most CSS properties. When I tested this, I sent an email newsletter that uses CSS (such as absolute positioning and background images) to my Gmail account. The result? The email rendered horribly.

Aside from email clients, some Web browsers can display email newsletters inconsistently. For instance, I was helping a customer create their newsletter a few months back. I converted their PDF document into HTML with simple CSS. From my end, the HTML version of the email looked really good when viewed with Internet Explorer 6.0. However, our client disagreed and said the formatting was off.  She was using Mac’s browser, Safari. I tested this myself as we have Mac OSX and Safari in the office for QA and testing purposes. I was able to confirm the formatting issue our client had complained about.

In a nutshell, CSS is not fully supported across all email clients, whether desktop or webmail, as well as some Web browsers.

Considerations:

  1. As much as possible, avoid using CSS when designing your HTML email template.
  2. If you must use CSS, stay away from layers, positioning, and background images. I’m sure there are other properties and elements you should not use but I know these three don’t display correctly in most email programs. Incorporate simple CSS instead.
  3. Use simple HTML like tables when formatting your page.
  4. If you do use advanced CSS, expect all sorts of responses from your recipients stating.

To learn more about which CSS properties can be used safely in your HTML email, I invite you to read   http://boomerang.com/z17c.

Hope this helps!

Tags: Best Practices · Dynamic Content · EMail Broadcasting · Email Marketing · Intelligent Marketing · Newsletters · Tips

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment