Saturday, January 23, 2010

HTML emails

HTML emails can be hard to create since most of the tricks used to develop web pages are completely unusable when creating HTML emails. CSS is not well supported, images can be a disaster, and layout is best done using tables (gasp). describes the situation quite nicely: "Think back to the old days of the web browser wars. When Netscape and Microsoft were duking it out. There was no Flash plugin. It was only shockwave. Put away your DIVs and DHTML. Dust off those tables, shim.gifs, and font tags, because you’re gonna need 'em."

Webmail services

Webmail services strip the <html> <head> and <body> tags from an HTML email. Keep this in mind when coding emails.

Email width

Since most people view emails in a reading pane rather than full screen, set the email width at:

500-600 pixels


Images are not displayed immediately in all email clients (to name a few: Outlook 2003, Outlook Express, AOL, Gmail, Thunderbird) . The user has to allow the email client to display images before they are shown. Since this is the case, do the following when using images in emails:

  • Enter a height and a width in the image tag to act as a placeholder
  • Use alternative text (alt="")
  • Don't use images for important content
  • Don't use background images. They are not displayed by all email clients.
Javascript, ActiveX, Flash, and embedded movie files

Don't even think about it.


Don't use div tags to position elements since some email clients strip div tags. Using tables for layout is probably the best way to create a well-formed email. suggests using separate tables for the header, body, and footer of emails since some email clients do not handle colspan (Lotus Notes).

As noted above, Webmail services strip the <body> tag from an email. If you have a background color applied to the body tag, this will get stripped as well. Use a 100% wide table to hold your email and apply the background color to the table.


There is no standard support for CSS in today's email clients. No email clients allow for external style sheets, and, since Webmail services strip the portion of the email, it is best to place any style within the body of the email. In addition, CSS positioning is not supported by email clients.

To keep email style consistent throughout all email clients, review the following table :

Email ClientSupports…
Yahoo! MailCSS
Outlook and Outlook ExpressCSS
GmailInline CSS
Lotus NotesInline CSS
Mac MailCSS
Eudora for the MacNo CSS


Email clients to test:
  • Web: Hotmail, Yahoo! Mail, Yahoo! Mail Beta, Gmail
  • PC – Outlook, Outlook Express, AOL 9, Thunderbird, Lotus Notes
  • Mac – Mac Mail, Entourage, Eudora
  • Inline CSS is most widely supported
  • Don't use CSS to position elements
  • Use tables for layout (maybe even use separate tables for header, body, footer)
  • If applying a background color, wrap the whole email in a 100% width table
  • Test in all email clients before sending your email!
Where I Got My Info

No comments:

Post a Comment