July 18, 2007
I don’t usually do HTML- I depend on email providers for their vast testing suites and skills. Compelled by some conversations on other blogs and looking at the images-off/image suppression issue, I decided to setup a little test suite and see if there is a bare-bones set of techniques one can follow to design well for the free, web-based email sites (Yahoo, AOL, Gmail, etc). The idea was also to simplify by creating a single template. I also plan on using this study to counter arguments by some regarding images as a necessity for positioning layout content. True: CSS2 does it best, but more and more the web email accounts are scaling down their full support. The template below is more of a compromise for clients that don’t want to go the route of RTF but feel the pressure from image suppression web sites.
To determine the layout, I did it the hard way- testing against 5 accounts I have, on two computers. These are general guidelines I found for making your own template:
Table of Contents
The Web-based Emails Tested
Testing Details
Test Summary Results
Template
Template in Action
Testing Details
Tested on Mac OSX (Firefox 2, Safari), and Windows XP (Firefox 2 and Internet Explorer 6). Photos are from Mac, but PC sites rendered the same. I used a PHP mail() script to send text/html MIME 1.0 emails, via Linux. The sender was new to all accounts. I didn’t approve the contact or whitelist the sender. I started doing a MIME multipart/alternative mail, but then scaled back to the text/html MIME type to simplify the script. I didn’t use the PHP Mime script, instead just using mail() (also to simplify).
Test | GM | YB | WL | MM | AOL | OU |
Images off by default | Yes | Yes | Yes | No | Yes | Yes |
CSS in the <head>, font-family attribute and color of the <P> object. | No | Yes | No | Yes | Yes | n/a |
CSS inline, in <P>, font-family attribute setting, color: red. | Yes | N/A | ||||
CSS inline, positioning text with <P>. Margin: 10 15 20 30 | Yes | Yes | No | Yes | Yes | N/A |
CSS inline, positioning with “margin-left: 10em” in <P> | Yes | |||||
<STYLE> out of <HEAD>, precedes other HTML content | No | Yes | No | Yes | Yes | N/A |
<TD> background color and <FONT> color inline CSS | Yes | N/A | ||||
CSS style in <TD> (no other <STYLE> in header or elsewhere) | Yes | No | ||||
Font background color, font color in <td> | Yes | N/A | ||||
Alt text displays | Yes | Yes | No | Yes | Yes | No |
Template
<table width=”400″>
<tr>
<td style=”color: red; font-size: 10pt; font-family: arial;”>
The hills of California are like <strong>velvet</strong>.</td>
<td width=”50%” style=”color: red; font-size: 10pt; font-family: arial;”>
When I was young I wanted to roll my hand along them.</td>
</tr>
<tr>
<td colspan=”2″>
<img src=”http://www.banane.com/haiku/foothills.JPG” width=”400″ height=”139″ alt=”California Foothills”> </td>
</tr>
<tr>
<td width=”50%” style=”color: red; font-size: 10pt; font-family: arial;”>But be warned if you slide down them.</td>
<td width=”50%” style=”color: red; font-size: 10pt; font-family: arial;”>You’ll get thistles in your pants.</td>
</tr>
</table>
Gmail
Images blocked:
Images loaded:
Yahoo Beta
Images blocked:
Images loaded:
Windows Live
Images blocked:
Images loaded:
AOL
Images blocked:
Images loaded:
Web Outlook Access
(See new post: “Designing for Web Emails: Outlook Web Access”.)
More Reading:
January article on Image Suppression: Image Rendering: What It Is And How To Deal With It
February article from Campaign Monitor on how ALT text renders in mail clients HOW ALT Text Renders In Popular Email Clients
Recent- and generally the standard I believe- review by Campaign Monitor, A Guide to CSS Support in Email 2007. Note- done before new MSN/Windows Live, and before new AOL, as well as Beta (though covered, to a degree).
2-year old round-up on cross-email support: CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail- almost too old to use, but reinforces the “use inline style” mantra.
6 month old review of Outlook 2007 support (or lack of) HTML: Campaign Monitor’s Microsoft Takes Email Back 5 Years
« Images Off: Unfortunately, It’s the First Impression – Avoid Spacer GIFs in HTML Emails »
[...] (continuation of article here: “Designing for Web Emails”) Outlook Access for Web (OWA) merited a completely new post, as it behaves differently on PCs than Macs. I took three screen shots of the same, consistent template sent to the same account, accessed by PC and Mac, and via Firefox and IE 6.0. [...]
Pingback: Adventures in Email Marketing » Designing for Web Emails: Outlook Web Access | – 25. July 2007 @ 1:56 pm
[...] Designing Email for Web Emails. Trying to achieve a single template that will work in proper webmail browsers. It meant basically regressing to 1998 in HTML design. [...]
Pingback: banane » Blog Archive » Recent Writings – 29. July 2007 @ 12:43 pm
[...] been code line writing emails in a long time- but did do some quick template work for writing “Designing for Web Emails”, and realized just how much Gmail has degraded HTML support. I know, there are two sides to that [...]
Pingback: Adventures in Email Marketing » Gmail Grimace | – 29. January 2008 @ 9:44 pm
[...] across that suite above, to note the best practices for cross-browser/mail design. Check it out: “Designing Web Emails,” and the resource list is good too, at the end of that [...]
Pingback: Adventures in Email Marketing » Letters: Testing My HTML Newsletter | – 09. June 2008 @ 5:52 pm