Good article, I could have used this about a month ago too, as I have just been
through some of the same motions.
Being able to make HTML mails is unfortunately only half the job, as various
mail clients can make quite a mess of rendering it.
So in no particular order is a couple of hints from someone who has had to
discover them the hard way:
- No fancy div positioning - back to good old tables
- Expect all content in head tag to be stripped
- Expect all style tags to be stripped.
- Expect attributes on body tag to be stripped
- Expect all class attributes to be stripped
- Don't use inline MIME encoded images - if you need images, use http links to
a webserver
- MIME encode all non-US ASCII characters and also equal (0x3D)
- Don't expect images to be stretched correctly, especially with width=100%
- Gmail (and others) use about 400px for menus and ads, so if you are designing
for 1024x768, you only have about 600px visible before horizontal scrollbar.
- If you can get your html mail to render correctly in Notes and Gmail, you are
most likely home free - I also tested in Hotmail, Yahoo mail and Outlook, but
the first two mentioned are the hardest to satisfy.
I got a lot of these clues from
http://www.sitepoint.com/article/code-html-email-newsletters and the links in
the bottom of that article.
Good article, I could have used this about a month ago too, as I have just been through some of the same motions.
Being able to make HTML mails is unfortunately only half the job, as various mail clients can make quite a mess of rendering it.
So in no particular order is a couple of hints from someone who has had to discover them the hard way:
- No fancy div positioning - back to good old tables - Expect all content in head tag to be stripped - Expect all style tags to be stripped. - Expect attributes on body tag to be stripped - Expect all class attributes to be stripped - Don't use inline MIME encoded images - if you need images, use http links to a webserver - MIME encode all non-US ASCII characters and also equal (0x3D) - Don't expect images to be stretched correctly, especially with width=100% - Gmail (and others) use about 400px for menus and ads, so if you are designing for 1024x768, you only have about 600px visible before horizontal scrollbar. - If you can get your html mail to render correctly in Notes and Gmail, you are most likely home free - I also tested in Hotmail, Yahoo mail and Outlook, but the first two mentioned are the hardest to satisfy.
I got a lot of these clues from http://www.sitepoint.com/article/code-html-email-newsletters and the links in the bottom of that article.
/Claus