Jul 19

HTML Email Client Issues and Solutions

Posted by nate within General

msn hotmail logo Whew, it’s been a while since I’ve posted. Sorry about that. I’ve been a busy bee lately.

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:

All

  • 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)

Outlook

  • Doesn’t handle clearing floats properly
  • Screws up percentage widths and margins (inheritance problem)

Hotmail

  • 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.

Add this

3 Responses

  1. nate's Gravatar

    Posted by nate on Jul 19, 2006 at 01:52pm

    Oh, and don’t even bother trying to use CSS if you’re intent on making sure Lotus Notes or Eudora work. They pretty much have no support at all for CSS.

    And I forgot to mention that Gmail doesn’t support CSS at all either… they strip it out entirely, but leave the HTML there. So it “degrades nicely”… sortof.

  2. phone verification man's Gravatar

    Posted by phone verification man on Jul 20, 2006 at 06:08am

    One more:
    TheBat!: has a basic html-viewer: no CSS support, neither JavaScript nor VB

  3. nate's Gravatar

    Posted by nate on Jul 20, 2006 at 08:03am

    Ok, well, I wouldn’t design for that one (or even test in that one) because I’ve never heard of it. I’d also venture to say that close to zero percent of the users I’d be targetting would be using that client. But, hey, thanks for adding it to the list.

Add a Response