Adventures in Mobile Marketing

Designing for Web Emails

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:

  1. I put styles in the individual HTML objects, such as <TD>, which is more universally supported. Some support the full style description in the header, but it’s redundant to me and more work to maintain.
  2. I removed the body and head tags simply because they were extraneous.
  3. I chose to use tables and, optionally, background colors and font colors. Due to various inconsistencies I ruled out CSS positioning and background images.

Table of Contents
The Web-based Emails Tested
Testing Details
Test Summary Results
Template
Template in Action

Web-based Emails Tested

  • Yahoo Beta (YB)
  • Gmail (G)
  • Windows Live (the new Hotmail/MSN) (WL)
  • Mac’s Mail (MM): this is the control group
  • Outlook Web Access (OU) 2007 Outlook, MS Exchange 5 (more info)
  • AOL (AIM Mail)

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 Summary Results

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>

Template in Action

Gmail
Images blocked:
Gmail Alt Text Sample

Images loaded:
Gmail Sample

Yahoo Beta
Images blocked:
Yahoo Bea with Images Blocked

Images loaded:
Yahoo Beta Final Rendering

Windows Live
Images blocked:
Windows Live with ALT tags

Images loaded:
Windows Live rendered

AOL
Images blocked:
AOL with ALT text

Images loaded:
AOL rendered

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

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
Written on Wednesday, 18. July 2007 at 18:21 In the category design, images off, mechanics, technology. Follow the comments via RSS here: RSS-Feed. Read the Comments. Trackbacks- Trackback on this post. Share on FriendFeed

«  –  »

4 Comments »

  1. [...] (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

  2. [...] 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

  3. [...] 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

  4. [...] 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

Leave a comment

Recent Posts

Pages

Recent Comments

Topics

Recent Trackbacks

Meta

Follow Me

  • Add to Google
 

WP-Design: Vlad -- Powered by WordPress -- XHTML 1.0
© 1998 All Rights Reserved banane.com