At Eventful, we’ve been doing some changes to the HTML emails being sent out after joining a demand. And you thought designing with Internet Explorer was hellish. Try designing for AOL, Outlook, Outlook Express, Hotmail, Yahoo (regular mail), Yahoo beta, Gmail, OS X Mail, Lotus Notes, and the myriad of other email clients that exist! Talk about hell.
So, I found a few tidbits that seem to help when looking at the main email clients you might be concerned with. Here’s a list based on clients:
- Don’t include any <head> tags, which also means you need to put your CSS inside the <body> tag
- Don’t include a doctype (might have been obvious)
- Doesn’t handle clearing floats properly
- Screws up percentage widths and margins (inheritance problem)
- Removes margins from CSS
- Completely borks when you include comments in your CSS
- Doesn’t show any background images
Yahoo Mail (regular)
- Changes <body> to <xbody> and <position> to <xposition>. Can be solved by using body *, xbody * in the CSS, but I’d stay away from even trying to use the position element at all
Yahoo Beta Mail
- Same as above regular Yahoo mail issue.
- This one is a major issue: it doesn’t handle multipart email. So, you have to choose one, either text or html, but you can’t send both. This is a huge problem for almost every mailing script that exists
If anyone else has things to add to this list, feel free to do so.