Guidelines for Using HTML in Email

Email isn't the web. Your HTML design might look great in one email program, but chances are when you look at the same work a different email program the results will not be the same.

Some email clients are moving away from full CSS support.  As of early 2007, Gmail is the most restrictive as it will ignore all external and embedded style sheets. (It will support inline styles.)  If it looks great in Gmail, chances are, it will look great in most other clients.  Even with inline styles, there are some restrictions.

Things to do

Things to avoid

Images

About CSS Support in Outlook 2007:

http://www.campaignmonitor.com/blog/archives/2007/01/microsoft_takes_email_design_b.htmlhttp://img1.dev.meetupstatic.com/img/clear.gif

This is a support article about using CSS in Email presentation. GMail strips all CSS out and looks like the new Outlook 2007 does the same thing. All code has to be XHMTL compliant and inline styles can be used but in limited use and must be tested for issues with different email clients.

The preceding article is abstracted from: http://www.meetup.com/fwwebdesign/messages/boards/view/viewthread?thread=3020677

Example emails rendered in selected email clients

The following examples illustrate an emailable page rendered by different web-based email clients:

Email client

Fully qualified URLs

Embedded images

Outlook 2003

Gmail

Mail.com

Yahoo mail

Note: Gmail does not correctly display pages that have the Smooth Panel Update feature enabled and may appear like this:

You can disable the Smooth Panel Update feature on the page you wish to send.  Use the Property Sheet to change the “Smooth panel update” property.

See Also

Button Actions and Properties

Button Actions

Button Actions - Redirect and Send Email Actions

Button Actions - Substitution Variables

Button Tag Properties