Wunderman Framework - HTML Email Guideline

Guideline and Good Practice for HTML Emails
Version 1.0
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
<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>
Bad
<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" />
Wunderman - Guideline and Good Practice for HTML Emails
Page 2 of 21
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
<TR><TD ALIGN="left"><FONT FACE="Verdana, Arial,
Sans-serif">Copy goes here.</FONT></TD></TR>
Bad
<DIV ALIGN="left" STYLE="font-family: verdana;">
Copy goes here.</DIV>
Page 3 of 21
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
<HTML>
<BODY>
<CENTER><BR/>
<TABLE BORDERCOLOR="#333366" CELLSPACING="0"
CELLPADDING="0" width="600" ALIGN="center"
BGCOLOR="#ffffff" border="8">
<TR>
Bad
<!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>
Page 4 of 21
BODY Tag
Some e-mail clients, such as Yahoo, Hotmail, and Gmail strip out or modify the BODY tag in emails. You should not include any attributes in the BODY tag that you dont 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
<TABLE BGCOLOR="#FFFFFF" WIDTH="600">
<TR><TD ALIGN="left">
[ contents of e-mail... ]
</TD></TR>
</TABLE>
Bad
<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
Copyright © 2008 Acxiom Digital.
Copyright © 2008 Acxiom Digital.
Bad
Copyright 2008 Acxiom Digital.
Page 5 of 21
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
<TD ALIGN="center" BGCOLOR="#000000"
VALIGN="middle">
Bad
<TD ALIGN=center BGCOLOR=000000 VALIGN=middle>
Page 6 of 21
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
<TR><TD>
</TD></TR>
</TABLE>
Bad
[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
<TR><TD WIDTH="200">
Here is some text.<BR/>
<BR/>
Here is some more text.<BR/>
</TD></TR></TABLE>
Bad
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>
Page 7 of 21
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
<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>
Bad
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>
Page 8 of 21
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
<TD WIDTH="250" HEIGHT="100"><IMG SRC="logo.gif"
WIDTH="250" HEIGHT="100" ALT="Company Name"
BORDER="0" /></TD>
Bad
<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
<TD WIDTH="200"><IMG SRC="images/spacer.gif"
WIDTH="1" HEIGHT="1" BORDER="0"></TD>
Bad
<TD WIDTH="200"></TD>
Page 9 of 21
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
Here is some text.<BR/>
<BR/>
Here is some more text.<BR/>
</TD></TR>
Bad
<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
<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>
Bad
<TR><TD WIDTH="200" STYLE="margin-top: 10px;">
Here is some text.</TD></TR>
or
<TABLE WIDTH"640" CELLSPACING="10"
CELLPADDING="2">
Page 10 of 21
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
<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>
Bad
<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
<TD BGCOLOR="#9C7BBD">
Bad
<BODY BGCOLOR="#9C7BBD">
Page 11 of 21
Alignment
Setting alignment value in table elements adds stability as default values may not render
properly in all e-mail clients.
Good
<TABLE WIDTH="600" ALIGN="center">
<TR><TD ALIGN="left" WIDTH="600">Text goes
here</TR></TD></TABLE>
Bad
<TABLE>
<TR><TD>Text goes here</TR></TD>
</TABLE>
Page 12 of 21
TAG FORMATTING
Closing Tags
XML has more strict parsing requirements than HTML. Therefore, all open tags must have
matching closing tags.
Good
<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>
Bad
<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
<B>say something bold</B>
Bad
<b>say something bold</B>
Page 13 of 21
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
<I><B>
say something bold and exciting
</B></I>
Bad
<I><B>
say something bold and exciting
</I></B>
Page 14 of 21
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
<TD ALIGN="left" WIDTH="100" STYLE="fontfamily: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>
Bad
<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
<FONT FACE="Arial, Helvetica, sans-serif">
e-mail</FONT>
Bad
<FONT FACE="Arial">e-mail</FONT>
Page 15 of 21
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
<FONT COLOR="#7BC618">e-mail</FONT>
Bad
<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
<FONT FACE="Arial, Helvetica, sans-serif"
COLOR="#003399" SIZE="2">Text goes here</FONT>
Bad
<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>
Page 16 of 21
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
<A HREF="http://www.yoururlhere.org"><FONT
COLOR="#003399"><U>Clickable text goes
here</U></FONT></A>
Bad
<A HREF="http://www.yoururlhere.org">Clickable text
goes here</A>
or
<A STYLE="COLOR:#003399;"
HREF="http://www.yoururlhere.org">Clickable text
goes here</A>
Page 17 of 21
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
<A
HREF="http://www.yoururlhere.org?dest=123&pid=456">
<FONT COLOR="#003399"><U>Click
here</U></FONT></A>
Bad
<A HREF="http://www.yoururlhere.org?dest=123
&pid=456"><FONT
COLOR="#003399"><U>Click</U></FONT></A>
Page 18 of 21
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
<IMG SRC="magnolia.gif" WIDTH="50" HEIGHT="50"
ALT="Magnolia Bouquet" BORDER="0" />
Bad
<IMG SRC="D12K FE37.gif" WIDTH="50" HEIGHT="50"
BORDER="0" />
Page 19 of 21
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 tables
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
<IMG SRC="logo.gif" WIDTH="250" HEIGHT="100"
ALT="Company Name" BORDER="0" />
Bad
<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
<IMG SRC="headline1.gif" WIDTH="100" HEIGHT="50"
ALT="Hurry! Sale ends Saturday!" BORDER="0" />
Bad
<IMG SRC=" headline1.gif " WIDTH="100" HEIGHT="50"
ALT="headline" BORDER="0" />
Page 20 of 21
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
<TD BACKGROUND="images/red_pattern.gif"
BGCOLOR="#FF0000">Hurry! Sale Ends Saturday!</TD>
Bad
<TD BACKGROUND="images/red_pattern.gif">Here is
some text.</TD>
or
<TD WIDTH="100" HEIGHT="50"><IMG SRC="sale.gif"
WIDTH="100" HEIGHT="50" ALT="Hurry! Sale ends
Saturday!" BORDER="0"/></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 doesnt 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
<A HREF="http://www.yoururlhere.org"><IMG
SRC="image.gif" WIDTH="1" HEIGHT="1"
ALT="descriptive text here" BORDER="0" /></A>
Bad
<A HREF="http://www.yoururlhere.org"><IMG
SRC="image.gif" WIDTH="1" HEIGHT="1" ALT="Text
here" /></A>
Page 21 of 21

Wunderman Framework - HTML Email Guideline

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Wunderman Framework - HTML Email Guideline

Diunggah oleh

Hak Cipta:

Format Tersedia

Guideline and Good Practice for HTML Emails

HTML CODE GUIDELINES

Wunderman - Guideline and Good Practice for HTML Emails

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

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

Do not use <EMBED> tags.

Do not include attributes with <BODY> tags.

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

Always close all tags. Do not leave open tags.

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

ROWSPAN and COLSPAN

Wunderman - Guideline and Good Practice for HTML Emails

Widths and Heights

Empty Table Cells

Wunderman - Guideline and Good Practice for HTML Emails

Spacing Between Elements

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Width and Height

Wunderman - Guideline and Good Practice for HTML Emails

Wunderman - Guideline and Good Practice for HTML Emails

Anda mungkin juga menyukai