tags:

views:

275

answers:

5

My web-app has to deliver db-generated content by email. The HTML need not include javascript but _does have to include images and CSS.

It's a safe bet that most users will be viewing this in Outlook. Are general guidelines different for html destined for email vs. IE?

+5  A: 

Outlook doesn't have a quite good reputation about HTML mails -- see Microsoft to ignore web standards in Outlook 2010 - enough is enough, for instance.

But it's not the only email client with problems, actually : generating an HTML e-mail generally means doing some things differently than for a webpage...

For instance, you can take a look at this article : Ensuring your HTML Emails Look Great and Get Delivered. A few points it make are :

  • use inline CSS
  • use tables and basic layout

Well... quite the contrary of what is said for webpages, isn't it ?

And a piece of advice : always test your email in as many clients (both desktop-based, like outlook, thunderbird, ... and web-based, like yahoo, hotmail, gmail, ... ) as possible !

Pascal MARTIN
+4  A: 

Absolutely. It's virtually impossible to use CSS layout techniques in HTML emails. So...code like it's 1998.

  1. Use tables. It's painful, but it's the only surefire way to get HTML emails to display properly and consistently. Make sure you set cellpadding, cellspacing, and border on every single table. Nest them if you must. colspan and rowspan are your friends. Use shim .gifs in empty cells. If it's a bad practice for regular webpages, you should probably be using them in e-mails.
  2. Don't design for anything wider than 600 pixels.
  3. Since webmail services' CSS can be overwritten by CSS inside of the e-mails, they tend to disable it. Inline CSS is smart. Font tags are smarter.
  4. Forget about doctypes, <html>, <body>, or <head>.
  5. Don't rely on background images - if you must use them, have a background color backup.
  6. Avoid spammy-sounding terms. Don't talk about Viagra, porn, or knockoff watches - it'll probably get spam-filtered.
  7. Send text-only alternative using the "Multipart/Alternative" MIMEtype.
  8. Debugging is a bear. The testing list we use at my place of business: Outlook 2003, Outlook 2007, Outlook Express (from XP), Thunderbird Mac and Windows, Eudora, Mail.app, Entourage, Gmail, Yahoo! Mail, AOL, AOL Webmail, and Hotmail. Webmail clients tested in both IE6 and the latest Firefox version. It may be worth cooking up a script to automatically send emails to test addresses at all the services for testing.

Good info about specific support at Campaign Monitor's site. They also have more practical guidelines. And here's a list of e-mail client usage.

cpharmston
+1  A: 

In Outlook 2007, it took a huge step backward: http://www.sitepoint.com/blogs/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/

Instead of using IE for the rendering engine, it now uses Word. Only the most basic HTML is supported well or at all.

Adam Crume
A: 

Email user agents, in general, tend to diverge from the standards for CSS and HTML pretty significantly for good reason. Some email user agents, such as Thunderbird, claim to have full CSS support in email, but to my knowledge no email user agent fully supports the HTML standard.

HTML is designed for the web, specifically, HTTP transmission. It contains header definitions, all the bits that fall under the <head></head> tags, that are intended to operate under HTTP transmission. HTML is a markup language, which is a document of structured data. Markup languages are not presentation languages, but the only point of using HTML in email is for presentation. As a result HTML is not functional in email and is hardly accessible.

In HTTP a user requests a resource from a server and a server responds with that resource. The author of the document provided from the server is somebody who is able to author documents on/to the server. A resource provided by HTTP has only one author.

In email a document can be written to by many different users opposed to HTTP. A document does not originate at a server. Since a document does not originate at a server or a known single user markup languages and CSS experience containment and scope problems. This means HTML and CSS in email are entirely incompatible to the concept of an email thread where multiple people are contributing to a document, because the CSS does not understand that it is supposed to be constrained to a single instance of communication.

Due to these incompatibilities that were never intended to exist and are not intended to ever be corrected Microsoft is entirely correct in supporting as little or as much HTML in email as they want. There is no standard addressing this, so there is no violation. The violation is using HTML in email to begin with.

My advise is to wait until Mail Markup Language is adopted. If we are all very lucky one particular user agent vendor may announce adoption of Mail Markup Language in the near future. To my knowledge Mail Markup Language is the only functional markup language specification to address the requirements of email threads at this time.