Groundwire Labs

The art and science of citizen engagement.

You are here: Home Groundwire Labs Email Publishing Using CSS and HTML in Email Newsletters
Article

Using CSS and HTML in Email Newsletters

CSS and HTML support is far lower for email than it is for the web. This article explains the pitfalls to avoid and the methods to employ in order to get email newsletters to display consistently across many email clients.

Email newsletters are more popular than ever, and everyone loves to design a rich website-like newsletter for their subscribers. Unfortunately, email isn't the web. Your beautiful design work might look great in one email client, but chances are when you look at the same work a different email client the results will not be the same.

Why? In a nutshell, some email clients do not support all aspects of HTML and CSS. CSS (Cascading Style Sheets) is the technology that allows for modern, powerful, flexible website designs. (If you don't know what CSS is or how to use it, chances are the rest of this article isn't for you -- but do show it to your email newsletter designer!)

As of 2012, Gmail is the most restrictive as it will ignore all external and embedded style sheets. (It will support inline styles.) Worse, Microsoft's Outlook 2010 and 2007 actually takes a few big steps backwards in its CSS and HTML support, opting to use MS Word as the rendering engine. (Check out Campaign Monitor's article for the shocking lowdown!) For this reason, we consider compatibility with Gmail to be the baseline CSS and HTML support to design to. If it looks great in Gmail, chances are, it will look great in most other clients.

Even with inline styles, there are some restrictions. Fortunately, deprecated HTML tag attributes will fill the role of certain disabled inline styles (i.e. hspace, bgcolor, align, etc)

So here are Groundwire's guidelines for creating successful email newsletters that will look good even in the worst email clients. We don't mention much about design aesthetics, just coding practices that will succeed in all environments. (For testing, we usually use Gmail, Outlook, Outlook Web Access, Hotmail, and Yahoo).

Things To Avoid

  1. Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets. That said you can include a few embedded CSS statements (such as link color) as long as you're ok with them not rendering in some email clients.

  2. Don't use javascript in an email newsletter. Ever. There's no better way to have your newsletter marked as spam.

  3. Don't use tag attributes on the <body> tag (such as widths or background colors). Most email services ignore the <body> tag. You can try putting your whole newsletter inside a <div> and apply inline styles to it but results may vary.

Things To Do

  1. Use tables for layout. Lots of them. You're welcome to try <div> tags for positioning and layout, but our research shows that tables are more consistently supported. C'mon now. Get over your table-phobia and embrace the parallelogram.

  2. Use inline styles liberally in tables. In fact, you'll find you can get the best mileage out of inline styles in <td> tags. That way you are setting up little style regions within each table cell. Think of these inline styles as miniature style sheets. This allows non-technical users to swap content in and out of pre-formatted cells in a modular fashion.

  3. Declare width, cellpadding, and cellspacing for all tables and table cells. Doing so will result in a fixed width for the template. This helps because most people will view a newsletter in a preview pane which is much smaller than the width of their monitor. Don't leave widths to chance because many email clients like to "fill in the blank" which can break the design.

  4. Test your newsletter by sending to yourself or colleagues. This will give you the best chance to catch any problems before your whole subscriber list does! Send test messages to a variety of email clients such as Outlook, Hotmail, Yahoo, and Gmail.

Images

  1. Don't use background images. Gmail, among others, will ignore any url() attribute in an inline style, and the old background HTML tag attribute. You can use background colors if you wish (bgcolor tag attribute or background-color: css statement).

  2. Don't use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire newsletter is graphical, all your recipients are going to see is a lot of broken images.

  3. Provide alt text for all images. That way the reader will see some content in place of the disabled images. This works particularly well for logos.

  4. Declare BOTH height AND width parameters for images. Some email clients will default to "0" for undeclared height or width.

  5. Use hspace and vspace tag attributes to add whitespace around an image. Margin and padding inline styles are supported by most, but not all email clients (Outlook and Live Hotmail provide only spotty support here).
  6. To avoid extra whitespace below your images (especially within tables), apply style="display:block;" to the img tag. This will remove the extra whitespace - a problem which appears in Outlook often.

 

External sources:

Campaign Monitor's Guide to CSS Support in Email

Campaign Monitor's rundown on CSS support in Outlook 2007

7 Comments

Really good points mentioned for creating newsletter and avoid as spam

This is just the info I was looking for, since newsletters are just horrible to design with.

The truth is revealed, no more div for the newsletters.

Is there a way to inline a webfont?

Hi Chann, you probably won't have luck with that -- you can't put @font-face inline, and most email clients will strip it out. And of course all email clients will strip out Javascript.

As an alternative, Campaign Monitor has a good article on using font stacks that give you a little more flexibility: http://www.campaignmonitor.com/blog/post/3190/font-stacks-used-in-email/

If you want to experiment, we highly recommend using Litmus, a fantastic email testing tool that will show you results in dozens of different clients. It's not the cheapest, but they do have a free trial. You can learn more here: http://litmus.com/

Thats a great idea. I am trying for my site.. thanks a lot

I definitely don't recommend using DIVs to accomplish the layout. Like you said, use lots of tables. And if you want padding, use rows for the top and bottom padding, as well as TDs for the left and right padding. Simply using style="padding-left: 15px, padding-top: 20px...etc" will not work across all popular clients. I also use <p> and assign designate a value for margin-top or bottom, never left or right. There's a whole lot more to best practices for html email coding. I've been in this field since 2007 and yes lots of headaches and heartaches for me ;)

Add Yours…

You can add a comment by filling out the form below. Plain text formatting. Comments are moderated.

Contact Us

info@groundwire.org
(206) 286-1235 x 23

Signup for our Newsletter
and get Groundwire tips, tools and news sent directly to your inbox.
Privacy Policy
Support Groundwire

Help us continue to build capacity for social change groups.

Donate
Support Groundwire

Help us continue to build capacity for social change groups.

Donate