Creating HTML Email That Renders Across Email Clients
Styling and building layout for HTML email is a challenge mostly due to the multitude of email clients and their varying support for standardized practices. While some webmail clients like Yahoo and AOL display HTML email well; others like Gmail do not. Gmail removes anything before the <body> tag and strips out inline CSS styles.
Desktop email clients like Outlook, Mail.app, Entourage, and Eudora display HTML email with widely differing results from app to app. Outlook 2003 actually has more CSS support than Outlook 2007!
How to Code HTML Newsletters by Tim Slavin is a helpful 3-page article chock full of suggestions on proper coding. Leave behind notions of layout using DIVs. HTML email is a table-based world.
New or improved ideas I found in the article:
- Tim outlines a detailed testing method; first testing the content as it displays in the various webmail clients and desktop clients. Then perform a checklist of such things as the subject line, how the From address displays, and others.
- Use SpamCheck to check the spaminess of your content. This is a free service that you can use to check your HTML Email, to ensure that it makes it into your subscriber’s INBOX.
- “If you need a light-colored link against a dark background color, put the font definition in the td cell (so it applies to p and a tags equally) then add a color: style to the a tag.”
- Links to: templates from MailChimp and Campaign Monitor; Plain Text email formatting tips; Email Standards Project; and a lot more.
HTML email can be beautiful to behold, but remember that good old plain text email can still get the point across without breaking down in Gmail or Lotus Notes.
