deprecated HTML

Commonly used tags by WYSIWYG's
align="center"
center tags
border attribute
target attribute
marginheight attribute

name attribute: replaced with the id attribute. (In transitional documents both name and id can be used, but a name without an id is not allowed).

Resources:
W3C Attributes Chart: has a column to note which attributes are deprecated

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

<style type="text/css">
h1{
page-break-before: always;
}
</style>

OR

<DIV style="page-break-after:always"> … </DIV>

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.

Resources

HTML Email Design from Mail Chimp

Email Newsletter Design Archives

Microsoft takes email design back 5 years

Email Design Gallery

How To Code HTML Email Newsletters (All New Version)

Style in Email

Quick Tip: Testing your email design with images turned off

Pre Gmail and Outlook 2007, ALA Optimism: CSS and Email, Kissing in a Tree

HTML Emails - Taming the Beast

Review: 10 Emails with Images-Off

Mail Chimp Directory:

What Email Applications Should You Test?

HTML Email Tips for Web Designers

Top HTML Email Coding Mistakes

Tools:

MailChimp Inbox Inspector

Going XHTML 1.0 Strict

Before: Oh no! This page is not Valid XHTML 1.0 Strict!

It's like HTML but you put a different doctype at the begining of your page, you stop using certain tags and attributes you learned, and you close out the tags that you didn't have to before. There's more but but nothing that your knowledge of HTML and a validator can't get through together.

Start Here:
How simple going from HTML to XHTML can be
XHTML 101
Lesson 1: Writing XHTML in Notepad

Now that you are encouraged, Start here:
W3C QA
Doctype explained by ALA
XML well-formedness

Memorize a small list of deprecated HTML to get started. Don't worry about knowing it all cause the validator will give you a list of what needs to be corrected. Even if you write good code, you will have to catch the bad code your HTML editor ads.

Dreamweaver still sneaks these in:
align="center"
center tags
border attribute
font tag
target attribute
name attribute

Some Other Rules to Note:
XHTML is all lower-case
all tags must be closed (ex. br / or hr/)


Learn from my mistakes:

value of attribute "id" must be a single token

id="Tons of text I'm used to typing to help seeing impaired and help SEO"

W3C says ---- This attribute can not take a space-separated list of words as a value, but only one word ("token"). This may also be caused by the use of a space for the value of an attribute which does not permit it.

ID "deal" already defined.

p id="deal"

W3C says ---- An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element). -

I say ---- Before this project, I used class for everything and used id for things like a selected menu item (one element). When starting this project, I noticed that a lot of respected websites were using primarily id for group elements and class on a single element. So I tried something new. I would have never learned this if I didn't. I didn't know that what I was doing normally was a standard.

there is no attribute "border"

border="0"

W3C says ---- You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the embed element to incorporate flash media in a Web page, see the FAQ item on valid flash.

I say ---- Double check your mark up to see what your HTML editor added. I deleted border="0" once already from that tag.

After: This Page Is Valid XHTML 1.0 Strict!

1. Correct Doctype code in Header from w3C

2. Validate Template Page with one of these...

---- a. W3C HTML Validator

---- b. Tidy

---- c. Validome

3. Make changes and run validator until you pass.

More Reading:

Better Living Through XHTML

Modifying Dreamweaver to Produce Valid XHTML