test

Guideline and Good Practice for HTML Emails

Version 1.0

Wunderman - Guideline and Good Practice for HTML Emails Page 2 of 21

HTML CODE GUIDELINES

Sometimes HTML code renders differently on different web browsers. To make sure you are

using code that is not dependent on browser-specific tags, before providing content, check

your template on the latest versions of Microsoft Internet Explorer, Firefox, and Safari. Also, if

your company uses a non-standard e-mail client, please check the HTML code on that platform

as well.

EMAIL BASICS

Content Design

All content should be constructed within a design utilizing HTML Tables. Keep the table

construction as simple as possible adding nested tables where complexity is needed. Place

elements within individual table rows and cells. Do not have images scrolling to create new

rows. They should instead be placed in individual cells. More information on table structures is

provided later in this document.

Good Bad

<TABLE WIDTH="600" ALIGN="left">

<TR><TD>

<IMG SRC="banner1.gif" WIDTH="600" HEIGHT="50"

ALT="Company Name Here" /></TD></TR>

<TR><TD><IMG SRC="banner2.gif" WIDTH="600"

HEIGHT="75" ALT="See What's New" />

</TABLE>


<TR><TD>

<IMG SRC="banner1.gif" WIDTH="600" HEIGHT="50"

ALT="Company Name Here" /><IMG SRC="banner2.gif"

WIDTH="600" HEIGHT="75" ALT="See What's New" />


Limited support

4.0 tags, Animated Gifs, Style Sheets, Forms, JavaScript and Flash are only supported by a

limited number of browsers and e-mail clients and are NOT recommended for HTML e-mails.

They will likely cause errors in many e-mail clients and hence should only be used when you

have already discussed the ramifications with your AM or AAM.

Quick Tips:

1. Do not use <HEAD>, <META>, or <TITLE> tags.

2. Do not use <DIV>, <TBODY>, or <P> tags.

3. Do not use <EMBED> tags.

4. Do not include attributes with <BODY> tags.

5. Use <B> and <I> instead of <STRONG> and <EM>

6. Always close all tags. Do not leave open tags.

Good Bad

<TR><TD ALIGN="left"><FONT FACE="Verdana, Arial,

Sans-serif">Copy goes here.</FONT></TD></TR>

<DIV ALIGN="left" STYLE="font-family: verdana;">

Copy goes here.</DIV>


WYSIWYG Editors

WYSIWYG editors often automatically create browser-specific or otherwise non-standard

HTML code. If using a WYSIWYG editor, please remove browser-specific or other non-standard

HTML coding and review the code in a program such as NotePad or HomeSite to make sure

that it meets our guidelines.

Good Bad

<HTML>

<BODY>

<CENTER><BR/>

<TABLE BORDERCOLOR="#333366" CELLSPACING="0"

CELLPADDING="0" width="600" ALIGN="center"

BGCOLOR="#ffffff" border="8">

<TR>…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN">

<HTML><HEAD><TITLE>HTML Codes - Table of ascii

characters and symbols</TITLE>

<META http-equiv=Content-Type content="text/html;

charset=windows-1252">

<META http-equiv=PICS-Label

content='(PICS-1.1

"http://www.rsac.org/ratingsv01.html"
l gen true

for "http://www.ascii.cl" r (n 0 s 0 v 0 l 0))'><LINK

href="HTML Codes - Table of ascii characters and

symbols_files/ascii.css"

type=text/css rel=stylesheet>

<META content=all name=robots>

<META content=Global name=distribution>

<META http-equiv=Content-Script-Type

content=text/javascript>


BODY Tag

Some e-mail clients, such as Yahoo, Hotmail, and Gmail strip out or modify the BODY tag in e-

mails. You should not include any attributes in the BODY tag that you don’t mind NOT being

displayed, since they may not be rendered. If you are using light text on a dark background, be

sure to set values such as background color in the BGCOLOR attribute of the TABLE tag.

Good Bad

<TABLE BGCOLOR="#FFFFFF" WIDTH="600">

<TR><TD ALIGN="left">

[ contents of e-mail... ]

</TD></TR>

</TABLE>

<BODY BGCOLOR="#FFFFFF">


</BODY>

Special Characters

Many e-mail clients are unable to correctly render raw 8-bit characters. Consequently, you

must replace them with their corresponding ASCII code. For example, the numeric entity for

the copyright symbol is © and the name entity is ©. For HTML e-mail using the

name entity variation tends to produce more consistent results across e-mail clients.

Good Bad

Copyright © 2008 Acxiom Digital.




Syntax

XML has more strict parsing requirements than HTML. Consequently, all attribute values must

be defined with double quotes and use the proper syntax such as "#" before color attributes

and ";" after style elements.

Good Bad

<TD ALIGN="center" BGCOLOR="#000000"

VALIGN="middle">

<TD ALIGN=center BGCOLOR=000000 VALIGN=middle>


TABLE STRUCTURE

Maximum Table Width

Some e-mail clients and/or hardware configurations can only show 600 pixels of width at one

time. An HTML e-mail without any set width may look good in Outlook on a high resolution

monitor, but low-end users will not be able see the entire width of the e-mail. The

recommended maximum width of all e-mails is 600 pixels wide. Absolute values over

percentages should be used.

Good Bad


<TR><TD>


</TD></TR>

</TABLE>

[…contents of e-mail... ]

or

<TABLE ALIGN="left">

<TR><TD>


</TD></TR>

</TABLE>

Table Content

Some browsers and e-mail programs can have problems with content that exists outside of

<TD> tags. Make sure that all content for the e-mail sits within the Table cell tags (<TD>s).

Good Bad


<TR><TD WIDTH="200">

Here is some text.<BR/>

<BR/>

Here is some more text.<BR/>

</TD></TR></TABLE>


Here is some text.<BR>


<IMG SRC="images/spacer.gif" WIDTH="200"

HEIGHT="12" BORDER="0"><BR>

Here is some more text.<BR>

</TD></TR></TABLE>


ROWSPAN and COLSPAN

Keep the use of ROWSPAN and COLSPAN to a minimum since they limit template flexibility and

may not render properly in some e-mail clients like Lotus Notes. In some cases, options such as

nesting a <TABLE> within another <TABLE> cell offer a better solution.

Good Bad

<table border="0" cellpadding="0" cellspacing="0"

width="130">

<tr>

<td width="130">

<img height="20" width="130" src="magnolia.gif"

border="0"></td>

</tr><tr>

<td width="130">

<table border="0" cellpadding ="0" cellspacing ="0"

width="130">

<tr>

<td width="60">

<img height="1" width="60" src="magnolia.gif"

border="0"></td>

<td width="70"><img height="1" width="70"

src="magnolia.gif" border="0"></td>

</tr><tr>

<td width="60" valign="top">Text goes here</td>

<td width="70">


width="23">

<tr>

<td width="70" valign="top">Text goes here</td>

</tr><tr>


width="130">

<tr>

<td colspan="2"><img height="20" width="130"

src="mognolia.gif" border="0"></td>

</tr>

<tr>

<td width="60" rowspan="2" valign="top">Text goes

here</td>

<td width="70">Text goes here</td>

</tr>

<tr>

<td width="70">Text goes here</td>

</tr>

</table>


Widths and Heights

Setting an exact width in all table elements adds stability to your design and will more likely

render consistency across e-mail clients and can make the e-mail render faster. Avoid using

percentages. For table data cells containing an image, set both width and height attributes.

Good Bad

<TD WIDTH="250" HEIGHT="100"><IMG SRC="logo.gif"

WIDTH="250" HEIGHT="100" ALT="Company Name"

BORDER="0" /></TD>

<TD WIDTH="100%"><IMG SRC="logo.gif" /></TD>

Empty Table Cells

Older browsers have problems with empty Table cells (<TD>s). Make sure to put something in

every table cell. A 1 x 1 transparent image inserted into the empty table cell solves this issue.

Do not use as a filler. Other empty tags can also be an issue. Once a design is

completed it is always a good idea to review and clean up the code to avoid any problems

down the line.

Good Bad

<TD WIDTH="200"><IMG SRC="images/spacer.gif"

WIDTH="1" HEIGHT="1" BORDER="0"></TD>

<TD WIDTH="200"></TD>


Text Spacing

<P> tags render inconsistently across browsers and e-mail clients, frequently adding more or

less space than desired. For large amounts of text, use <BR/> tags to achieve spacing between

blocks of text.

Good Bad


Here is some text.<BR/>

<BR/>

Here is some more text.<BR/>

</TD></TR>

<P>Here is some text.<P>

<P>Here is some more text.<P>

Spacing Between Elements

To achieve spacing between elements avoid using CELLPADDING, CELLSPACING or margin

padding as they are not universally supported. Instead use transparent gifs within a table

structure for more precision.

Good Bad

<TR><TD WIDTH="200" HEIGHT="10"><IMG

SRC="images/spacer.gif" WIDTH="10" HEIGHT="10"

BORDER="0"></TD></TR>


Here is some text.</TD></TR>

<TR><TD WIDTH="200" STYLE="margin-top: 10px;">

Here is some text.</TD></TR>

or

<TABLE WIDTH"640" CELLSPACING="10"

CELLPADDING="2">


Table Stability

When design allows, it is recommended to build a "cement" row to guarantee that a table

remains to its exact width. In the first row of a table, create a series of transparent spacers

with the appropriate widths for each cell. While this is not a necessity, it will decrease the

chance of an unforeseen table error.

Good Bad


<TR>

<TD WIDTH="10">

<IMG SRC="images/spacer_10.gif" WIDTH="10"

HEIGHT="1" BORDER="0"></TD>

<TD WIDTH="200">



<TD WIDTH="40">


HEIGHT="1" BORDER="0"></TD></TR>

<TR>

<TD WIDTH="10">



<TD WIDTH="200">Text goes here</TD>

<TD WIDTH="40">

<IMG SRC="images/spacer.gif_40" WIDTH="40"

HEIGHT="1" BORDER="0"></TD></TR></TABLE>


<TR>

<TD WIDTH="10"><BR></TD>

<TD>Text goes here</TD>

<TD WIDTH="40"><BR></TD>

</TR></TABLE>

Background Color

As mentioned earlier certain e-mail clients strip out values appearing in the body tag; setting

the color within the table ensures color settings will appear consistently.

Good Bad

<TD BGCOLOR="#9C7BBD"> <BODY BGCOLOR="#9C7BBD">


Alignment

Setting alignment value in table elements adds stability as default values may not render

properly in all e-mail clients.

Good Bad

<TABLE WIDTH="600" ALIGN="center">

<TR><TD ALIGN="left" WIDTH="600">Text goes

here</TR></TD></TABLE>

<TABLE>

<TR><TD>Text goes here</TR></TD>

</TABLE>


TAG FORMATTING

Closing Tags

XML has more strict parsing requirements than HTML. Therefore, all open tags must have

matching closing tags.

Good Bad

<TABLE WIDTH="600">

<TR><TD ALIGN="left" WIDTH="600"><FONT

FACE="Arial, Helvetica, sans-serif" COLOR="#003399"

SIZE="2">Text goes here</FONT></TR></TD>



SIZE="2">Text goes here</FONT></TR></TD>

</TABLE>

<TABLE WIDTH="600">



SIZE="2">Text goes here



SIZE="2">Text goes here

</TABLE>

Tag Case

All attributes must be either uppercase or lowercase.

Good Bad

<B>say something bold</B> <b>say something bold</B>


Tag Nesting

Make sure that all tags are nested properly (i.e. If multiple tags are used, they will need to be

closed in the proper order.)

Good Bad

<I><B>

say something bold and exciting

</B></I>

<I><B>

say something bold and exciting

</I></B>


FONT PROPERTIES

Font Attributes

Font attributes should be enclosed around the blocks of text or within the individual <TD> tag.

Placing font attributes outside of a <TABLE> tag will likely not be recognized. This requires a

little extra work but ensures that the correct font attributes are read each time.

Good Bad

<TD ALIGN="left" WIDTH="100" STYLE="font-

family:Arial, Helvetica, sans-serif; font-size:13px;

color="color:#003399;">Text goes here</TD>

or

<TABLE WIDTH="600" BORDER="0" CELLSPACING="0"

CELLPADDING="0" ALIGN="center"><TR><TD

ALIGN="left" WIDTH="100"><FONT FACE="Arial,

Helvetica, sans-serif" COLOR="#003399" SIZE="2">Text

goes here</FONT></TD></TR>…

<FONT FACE="arial" SIZE="2">

<TABLE>

<TR>



</TR>

</TABLE>

</FONT>

Font Face

Not all users have every font in their system; specifying multiple fonts allows you to choose the

fonts you'd prefer the user to see. If the specified fonts or font types are not found, text will

render in the user's default font.

Good Bad

<FONT FACE="Arial, Helvetica, sans-serif">

e-mail</FONT>

<FONT FACE="Arial">e-mail</FONT>


Defining Colors

Hexadecimal values guarantee consistent and true color values. Some older browsers do not

recognize named values or display them differently than others.

Good Bad

<FONT COLOR="#7BC618">e-mail</FONT> <FONT COLOR="green">e-mail</FONT>

Excessive tags

Total size of an e-mail should not exceed 500KB. To help reduce the size of the e-mail, include

all font attributes in a single font tag and clean up any tags that are being overridden by inherit

tags.

Good Bad

<FONT FACE="Arial, Helvetica, sans-serif"

COLOR="#003399" SIZE="2">Text goes here</FONT>

<FONT FACE="Arial, Helvetica, sans-serif"><FONT

COLOR="#003399"><FONT SIZE="2">Text goes

here</FONT></FONT></FONT>

or

<FONT SIZE="2"><FONT SIZE="1">Text goes

here</FONT></FONT>


Hyperlinked text

Some e-mail clients have their own default formatting for hyperlinked text, i.e. font colors and

underline style, if specifics are not defined within the HTML code. To ensure that hyperlinked

text displays as intended, simply add properties to your code to specify the desired design

style.

Good Bad

<A HREF="http://www.yoururlhere.org"><FONT

COLOR="#003399"><U>Clickable text goes

here</U></FONT></A>

or

<A STYLE="COLOR:#003399;"

HREF="http://www.yoururlhere.org">Clickable text

goes here</A>

<A HREF="http://www.yoururlhere.org">Clickable text

goes here</A>


URLS

Ampersands and other Special Characters

Some WYSIWYG editors can alter URLs containing ampersands and other special characters by

converting the symbols to ASCII characters. Review all URLs within the HTML code to ensure

the special characters are rendered properly. ASCII characters within URLs can effect the

functionality of the URL.

Good Bad

<A

HREF="http://www.yoururlhere.org?dest=123&pid=456">

<FONT COLOR="#003399"><U>Click

here</U></FONT></A>

<A HREF="http://www.yoururlhere.org?dest=123

&pid=456"><FONT

COLOR="#003399"><U>Click</U></FONT></A>


IMAGES

Image Types and Sizes

The best practice is to keep an e-mail size under a total of 49 KB or longer download times will

be experienced and messages will have lower response rates. Only .jpg and .gif image formats

should be used for HTML e-mail content and images should be optimized to the minimum file

size. The combined size of image files referenced should not exceed 500 KB.

Image Naming

To make the e-mail integration process go more smoothly, it is desirable to have images that

are intuitively named. Please keep image file names to a minimum, using lowercase letters,

and with no spaces, dashes, underscores, or special characters.

Good Bad

<IMG SRC="magnolia.gif" WIDTH="50" HEIGHT="50"

ALT="Magnolia Bouquet" BORDER="0" />

<IMG SRC="D12K FE37.gif" WIDTH="50" HEIGHT="50"

BORDER="0" />


Width and Height

Images should be used at their actual size. Resizing an imaging using HTML properties will be

ignored in e-mail clients such as Outlook 2007 and will likely cause errors in the table’s

structure. Include WIDTH and HEIGHT attributes for all images. Designating the size attributes

for an image will affect the time it takes for an e-mail to download. If no WIDTH or HEIGHT

attributes are set for an image, the image must fully download before the e-mail client's HTML

interpreter can render the rest of the page. Absolute values rather than percentages should be

used.

Good Bad

<IMG SRC="logo.gif" WIDTH="250" HEIGHT="100"

ALT="Company Name" BORDER="0" />

<IMG SRC="logo.gif" ALT="Company Name"

BORDER="0"/>

or

<IMG SRC="logo.gif" ALT="Company Name"

BORDER="0"> OR <IMG SRC="logo.gif" WIDTH="50%"

HEIGHT="50%" ALT="Company Name" BORDER="0" />

or

<IMG SRC="logo.gif" WIDTH="175" HEIGHT="80"

ALT="Company Name" BORDER="0" /> (not actual size)

Alternate Text

When viewing HTML e-mails while offline or with image preferences set to prevent them from

downloading, users will see a broken image or image placeholder rather than the image

intended in online viewing. To ensure that all parts of the e-mail message are received by the

viewer, all images containing text should include an ATL property set with the complete

verbiage.

Good Bad

<IMG SRC="headline1.gif" WIDTH="100" HEIGHT="50"

ALT="Hurry! Sale ends Saturday!" BORDER="0" />

<IMG SRC=" headline1.gif " WIDTH="100" HEIGHT="50"

ALT="headline" BORDER="0" />


Background Images

Background images are not universally supported in all e-mail clients, such as Outlook 2007. It

is recommended that background images not be used at all for HTML e-mails but if they are

incorporated within a design they should be used in such a way that if they do not appear it

does not greatly effect the design or hamper the intent of the displayed message. If text is

displayed on top of a background image, it is good practice to also fill the cell with a

background color which will appear when the image does not. Another workaround is to

simply create an image that includes the background and text and place this within the table

cell.

Good Bad

<TD BACKGROUND="images/red_pattern.gif"

BGCOLOR="#FF0000">Hurry! Sale Ends Saturday!</TD>

or

<TD WIDTH="100" HEIGHT="50"><IMG SRC="sale.gif"

WIDTH="100" HEIGHT="50" ALT="Hurry! Sale ends

Saturday!" BORDER="0"/></TD>

<TD BACKGROUND="images/red_pattern.gif">Here is

some text.</TD>

Border

Images that are linked and do not have the BORDER attribute set to zero will display a bold

blue line around the edges, which doesn’t look very good with some templates and can throw

off the table structure. Make sure to set BORDER="0" for all images to prevent this.

Good Bad

<A HREF="http://www.yoururlhere.org"><IMG

SRC="image.gif" WIDTH="1" HEIGHT="1"

ALT="descriptive text here" BORDER="0" /></A>

<A HREF="http://www.yoururlhere.org"><IMG

SRC="image.gif" WIDTH="1" HEIGHT="1" ALT="Text

here" /></A>

Documents

test