HTML Email Client Issues and Solutions

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.

Nate Ritter lives in the Pacific Northwest (U.S.), popularized the #hashtag and creates web applications for a living. He also does miles and point hacking to enable cheap travel for his family. More here →

3 Comments on "HTML Email Client Issues and Solutions"

  1. nate says:

    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. One more:
    TheBat!: has a basic html-viewer: no CSS support, neither JavaScript nor VB

  3. nate says:

    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.

 
More in General
Demanded: Hard-Fi in San Diego, CA

After getting Hard-Fi's music (especially "Cash Machine") stuck in my head for the next 12.3 years of my life, I...

Close