A working template for Gmail, Hotmail and Yahoo?

My list has about 60% subscribers using Gmail, Hotmail / Live Windows Mail or Yahoo so I am looking for a template that works well with them.

Campaign Monitor have this one : http://campaignmonitor.com/templates/templates/02c/21.html

Which they say is "Fully tested in Outlook (yep, even 2007), Hotmail, Yahoo! Mail, Gmail, Apple Mail, Lotus Notes, .Mac Mail, Thunderbird, Windows Live Mail, Outlook Express, AOL and many more. Yep, it took a while."

But it does not display good in either Windows Live Mail or Gmail.

Anybody got one that does?

trandrus, 8 years ago

Unfortunately, the only way to make HTML email bullet-proof in all three email clients is by using old, redundant, non-web-standard code. The list of CSS properties that are reliably supported in ALL major email clients is extremely small:
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

I reworked this template and tested in Hotmail, Yahoo, Gmail, Applemail, and Outlook 2002 using FF (Mac/PC) and IE6/7:

http://www.rossandrus.net/examples/template.html

Some things to consider:

1 - Gmail does not support the float property so cross-compatible emails cannot contain floated images.

2 - Cross-compatible background images should use double redundancy to optimize flexibility. Why? Application-based email clients like Outlook will render a full background applied to the body tag of the message. However, Hotmail will strip out the body tag so you have to use a wrapper. The bullet-proof solution includes both and allows the interpreter to render based on its own specifications. Also, a background color similar to the tiled image should be specified in the instance that the interpreter fails to render the image background. Believe me, sometimes interpreters simply fail, even if your code is flawless.

3 - Hotmail and Yahoo are bad with links. Links do not appear with an underline by default like on the web. You have to specify when a link should be underlined and what color it should be. Styling links with the hover pseudo-class is VERY risky.

4 - All images must be absolute references. Utilize alt tags to your advantage since Gmail will display image alts.

Feel free to use my code, however I ask that you upload all images to your own server to save me bandwidth.

winethex, 7 years ago

thanks trandus!
yknow, i'm searching around, & this helped me out exactly.  posted a year ago, still relevant for me now. :)

aloha!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098