Web Design Reference: Designing An Email That Will Be Printed

Delivery

Don't just attach an HTML file and a bunch of images to a message and hit “send.”
Don't just paste all your code into your email application, either.

Use a Multipart/Alternative MIME Format so that your mail transfer agent bundles your HTML code, PLUS a plain-text version of the message, together into one email.

Layout

Rely on styles within the TABLE, TD, H1, H2, P, A, and other tags.

Rather than use a p tag, use a font tag with br tags to create the paragraphs

Redefine the font tag inside and after each anchor tag

Create a gutter around the frame (wrapper) table by setting the width to a percentage and/or using the cellpadding to at least 5.

Avoid colspans

Be sure TD cell widths have accurate widths

Email layouts will have to be left-aligned in Lotus Notes

Use those deprecated tags like background= and bgcolor= instead of CSS

The recomended width is 400 - 500 px which is less than the width recomended for printing.

Look Good at 194 pixels wide for AOL users

Tables are recomended and as few as possible. DIVs usually fail and are not usually supported.

Tweak the cellpadding and cellspacing attributes of the HTML tables instead of style="padding: 5px 5px 5px 5px;"

Padding style in the content TDs is set at 10 pixels all round for Google

Browser based emails strip out your HTML, HEAD, and BODY tags. Which means that you should use embedded or inline styles placed below the body tag and that no styles can be placed on the body tag. CSS is not supported well in gmail so it is recommended to test without CSS.

For background color of email, put all content inside a table with the preferred color & style the table width at 98% because Yahoo needs the 1% cushion on both sides.

No CSS-positioning

Required: Gmail requires inline styles.

Images paths are to be absolute paths to images hosted on your server.

In your plain text layout, you’ll want to enter a hard return after each line gets about 60 characters long and create dividers with special characters (ie. *, -, and _). Don't use periods to create divider lines.

Outlook 2007 will not support background images, background colors on nested tables/divs, floats, positions, and poor support on padding & margin attributes.

Required: an extra line break or two after the final HTML tag for AOL & O2000 users

Test with placeholder images for apps that block images and don't use alt tags so that placeholders show up.

Don't start any line with a period. Some ISPs use email servers that will strip any content below a line in your email that starts with a period.

Placing the closing td tag right after (on the same line as) the IMG tag eliminates the annoying and mystifying 1 pixel gap.

Content

Required: use your title tags

Required: an opt-out link

No JavaScript, or ActiveX, or embedding

Use target="_blank"

No free hosted images

"List a valid, physical mailing address. The more contact information you provide, the more reputable your email will look."

Required: Use a legitimate working reply-to with your company domain.

Test

Test in as many email applications as possible! (AOL, Yahoo, Yahoo!Mail Beta, Hotmail, Gmail, Outlook 2003, Outlook 2000, Outlook Express, Thunderbird, Apple Mail, Apple’s Entourage, Lotus Notes 6.5.3 and 6.5.4, Eudora 6.2)

Test for free with a MailChimp free trial account

You can use a downloadable validator to test what actually will work in Outlook 2007 Word Based Email Viewer.

Print

Yale Style Manual choses 535 px as the max width because that is the widest table that will print on standard letter size paper. Our width should be no wider than 500px for an email so we are already print friendly.