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). www.MailChimp.com 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 servicesWebmail services strip the <html> <head> and <body> tags from an HTML email. Keep this in mind when coding emails.
Email widthSince most people view emails in a reading pane rather than full screen, set the email width at:
500-600 pixels
ImagesImages 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.
Don't even think about it.
TablesDon'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. www.MailChimp.com 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.
CSSThere 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 Client | Supports… |
|---|---|
| Yahoo! Mail | CSS |
| Hotmail | CSS |
| Outlook and Outlook Express | CSS |
| Gmail | Inline CSS |
| Lotus Notes | Inline CSS |
| AOL 9 | CSS |
| Thunderbird | CSS |
| Mac Mail | CSS |
| Entourage | CSS |
| Eudora for the Mac | No CSS |
Testing
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!
- How to Create Great HTML Emails with CSS
http://www.htmlgoodies.com/beyond/css/article.php/3679231 - HTML Emails – Taming the Beast
http://www.thinkvitamin.com/features/design/html-emails - Email Tips for Web Designers
http://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html - Designing, Coding, & Delivering HTML email - A beginner's survival guide from MailChimp
http://www.mailchimp.com/resources/html_email_design.pdf [pdf]
No comments:
Post a Comment