HTML emails vs Gmail, Yahoo & Hotmail
Jul 28th, 2006 | Comments (7)
My latest mini project was to create an HTML "special offers" email for Success.com. I took most of the HTML and CSS from the style sheets that I used on the site. The email consisted of mostly <div>'s that relied on an internal style sheet and a few inline styles.
I was hoping that in today's day and age the "main three" web mail services would be able to handle the email. One handled it quite well (with only a couple minor issues). The other two performed pretty poorly to say the least.
Gmail vs Hotmail vs Yahoo
Yahoo: A-
Gmail: D+
Hotmail: D-
Here is the what the email is supposed to look like:
Gmail
Being the new kid on the block, and created long after CSS standards had become common, one would assume that Gmail would shine when it came to my style-heavy HTML email. Wrong.
Gmail ignored the styles in the internal style sheet (i.e. styles in <head><style>...</style></head>). And for some reason, all the text is purple. No clue why. Gmail did seem to honor some of the inline styles though, as you can see with the "On Sale Now," "Recent Newsletters," and "Recent Articles" headlines. It's a small consolation, however, when the email still ends up looking like this:
Hotmail
I held the least hope for Hotmail - it's Microsoft for God's sake. I was not surprised when it performed poorly. Like Gmail, Hotmail also ignored the styles in the internal style sheet. Hotmail took it a step further, however, and also chose to ignore most of the spacing of the elements. At least the text is black I guess. Pretty pathetic looking:
Yahoo
Yahoo's been spiffing up its image lately, and they certainly didn't skimp on the mail service. Yahoo performed head and shoulders above Gmail and Hotmail in my little test. The only things Yahoo failed to do were recognize the <base> tag and recognize background images. Other than that, Yahoo performed flawlessly, as you can see:
Hotmail and Gmail flunked my html email test, while Yahoo passed with flying colors. And since I can't wait a couple years to see if Gmail and Hotmail get their act together, I have no choice but to roll up my sleeves and start redesigning the email with a bunch of tables and images. And here I thought those days were over a couple of years ago. Ugh.
UPDATE : July 30th, 2006
The good news is that I didn't have to resort to tables and images. I did, however, have to make all the styles inline to get the email to show up correctly in all three web clients, which has a couple major downsides:
* It increased the size of the email by 20% because you have to give every single <td>, <div>, <span> and <a> it's own style. Very repetitive and adds a lot of bloated text to the email.
* When I say every single element has to have its own inline style, I mean every single element. Unless you want to leave the styling up to the web mail client, you have to set the style of each element yourself. You couldn't just set the font family and size of a <span> tag wrapped around a <a> tag, you had to set the font styles in the <a> tag.
* You can't have hover and visited states for links. Since you can't set the link colors and states globally, each <a> link has to have its style set manually, and there's no way to set the hover and visited states this way (that I know of).
Again, Hotmail leads the way in frustration for this category. For some bizarre reason, Hotmail removes the underlining for all links. The underlines only pop up during the hover state.
The final rule I learned was: DON'T USE MARGINS!
Hotmail igonores most, if not all, margins. I had to switch all margins to padding before everything displayed correctly.
The good news is that I prevailed. It just seems a silly waste of time, in the year 2006, to have to jump through all these hoops just to get an HTML email to display correctly in Gmail and Hotmail.
I was hoping that in today's day and age the "main three" web mail services would be able to handle the email. One handled it quite well (with only a couple minor issues). The other two performed pretty poorly to say the least.
Gmail vs Hotmail vs Yahoo
Yahoo: A-
Gmail: D+
Hotmail: D-
Here is the what the email is supposed to look like:
Gmail
Being the new kid on the block, and created long after CSS standards had become common, one would assume that Gmail would shine when it came to my style-heavy HTML email. Wrong.
Gmail ignored the styles in the internal style sheet (i.e. styles in <head><style>...</style></head>). And for some reason, all the text is purple. No clue why. Gmail did seem to honor some of the inline styles though, as you can see with the "On Sale Now," "Recent Newsletters," and "Recent Articles" headlines. It's a small consolation, however, when the email still ends up looking like this:
Hotmail
I held the least hope for Hotmail - it's Microsoft for God's sake. I was not surprised when it performed poorly. Like Gmail, Hotmail also ignored the styles in the internal style sheet. Hotmail took it a step further, however, and also chose to ignore most of the spacing of the elements. At least the text is black I guess. Pretty pathetic looking:
Yahoo
Yahoo's been spiffing up its image lately, and they certainly didn't skimp on the mail service. Yahoo performed head and shoulders above Gmail and Hotmail in my little test. The only things Yahoo failed to do were recognize the <base> tag and recognize background images. Other than that, Yahoo performed flawlessly, as you can see:
Hotmail and Gmail flunked my html email test, while Yahoo passed with flying colors. And since I can't wait a couple years to see if Gmail and Hotmail get their act together, I have no choice but to roll up my sleeves and start redesigning the email with a bunch of tables and images. And here I thought those days were over a couple of years ago. Ugh.
UPDATE : July 30th, 2006
The good news is that I didn't have to resort to tables and images. I did, however, have to make all the styles inline to get the email to show up correctly in all three web clients, which has a couple major downsides:
* It increased the size of the email by 20% because you have to give every single <td>, <div>, <span> and <a> it's own style. Very repetitive and adds a lot of bloated text to the email.
* When I say every single element has to have its own inline style, I mean every single element. Unless you want to leave the styling up to the web mail client, you have to set the style of each element yourself. You couldn't just set the font family and size of a <span> tag wrapped around a <a> tag, you had to set the font styles in the <a> tag.
* You can't have hover and visited states for links. Since you can't set the link colors and states globally, each <a> link has to have its style set manually, and there's no way to set the hover and visited states this way (that I know of).
Again, Hotmail leads the way in frustration for this category. For some bizarre reason, Hotmail removes the underlining for all links. The underlines only pop up during the hover state.
The final rule I learned was: DON'T USE MARGINS!
Hotmail igonores most, if not all, margins. I had to switch all margins to padding before everything displayed correctly.
The good news is that I prevailed. It just seems a silly waste of time, in the year 2006, to have to jump through all these hoops just to get an HTML email to display correctly in Gmail and Hotmail.
Thanks for the info.