Pure360 Creative Guidelines for Email Marketing

Creative Guidelines for Emails

Contents

1 Introduction.............................................................................................................................................. 3
1.1 Document Aim and Target Audience ............................................................................................. 3
1.2 WYSIWYG editors........................................................................................................................... 3
1.3 Outlook Overview ............................................................................................................................ 3
2 Quick Reference ..................................................................................................................................... 4
3 CSS and Styling...................................................................................................................................... 5
3.1 Positioning ....................................................................................................................................... 5
3.2 Styling Method................................................................................................................................. 5
3.3 Unintentional Inheritance ................................................................................................................ 5
4 The HTML Page...................................................................................................................................... 6
4.1 Structure - Tables............................................................................................................................ 6
4.2 Background Colour ......................................................................................................................... 6
4.3 Window Title .................................................................................................................................... 6
4.4 Content Width.................................................................................................................................. 6
4.5 Borders & Padding .......................................................................................................................... 6
5 Images..................................................................................................................................................... 8
5.1 Display ............................................................................................................................................. 8
5.2 Alternative Text ............................................................................................................................... 8
5.3 Dimensions...................................................................................................................................... 8
6 Content and Deliverability Tips .............................................................................................................. 9
6.1 Text to Image Ratio......................................................................................................................... 9
6.2 Pre-Headers .................................................................................................................................... 9
6.3 Clickable Images ............................................................................................................................. 9
6.4 Click Here ........................................................................................................................................ 9
6.5 'Spammy' Words ............................................................................................................................. 9
7 Appendix ............................................................................................................................................... 10
7.1 Dreamweaver ................................................................................................................................ 10
7.2 Outlook 2007 Formatting Tips ...................................................................................................... 10

Page 2 of 10 Pure360.com – 0844 586 0001


1 Introduction
Emails are not ʻweb 2.0ʼ compliant; essentially, email html is like HTML4 but using xhtml tag
conventions.

All online inboxes will only render the contents of the body tag and all other code is not rendered.
Subsequently ESPsʼ WYSIWYG editors also strip out most non-generic code.

1.1 Document Aim and Target Audience
This document is aimed at people who intend to create hard code HTML content for use as emails.

The intention of this document is to provide a sufficient overview of the HTML, which inboxes will
render in order for coders to create good looking emails that will look the same when rendered in
every inbox they are sent to.

While this document is intended to cover as much of the requirements as possible without actually
doing it, there is never a replacement for real testing. This document should greatly help coders to
avoid nearly all problems and subsequently speed up the trial and error testing process.

1.2 WYSIWYG editors
If you are building the template with the intention of it being edited by someone else using a
WYSIWYG editor (probably in a CMS or ESP) the html has to be that much more generic.

In order to give users that easy to use interface, WYSIWYG editors will change the html code when
they open the HTML. Subsequently, the content may not be same after it has been opened in a
WYSIWYG editor. It is possible to code HTML emails to be WYSIWYG compatible, but as all editors
are slightly different there is a certain amount testing that needs to be done in the WYSIWYG editor
that will be used.

If the template you are building will not be edited or even rendered in a WYSIWYG editor, you only
have to ensure that the HTML code will render consistently in inboxes.

1.3 Outlook Overview
The most used email client is Microsoft Outlook. There are many versions of Outlook still in use,
although the main two are Outlook 2003 and Outlook 2007.

Outlook 2003 will use whichever version of Internet Explorer in installed on the computer to render the
HTML, this has been a security risk in the past. As a reaction to the security risk, Outlook 2007 will use
Microsoft Word 2007 to render the html. Subsequently Outlook 2007 is extremely limiting to which
style attributes it will render.

Some of the more commonly used tags and styles which Outlook and many other inboxes will not
render are; back-ground images, cell padding, cell spacing, margin, border, list bullet images or float.

The other really fussy inbox is Lotus Notes and there are many, many versions still in use all with
different capabilities. Generally if you can get it to render properly in Outlook 2007, AOL, Hotmail,
Gmail and Yahoo everything else should be fine.

Outlook 2010 is on the way and initially it looks to be even more restrictive, but we will not know
exactly until its release.

Page 3 of 10 Pure360.com – 0844 586 0001


2 Quick Reference
• On-line inboxes will only render the contents of the body tag and all
other code is ignored.

• All Styling must be in-line, use style attributes in every tag and not
classes referring to style tags or external sheets.

• Very few inboxes will render background images, including Outlook
2007, so donʼt use them.

• CSS positioning is ignored or does not work in emails, subsequently
the only efficient way to structure an email is using tables.

• Some tags, like TDs, will inherit the styles of the parent or sister TDs and Tables if it is left
un-styled.

• Most inboxes will not render borders so you have to use more table cells or nested tables with
background colours.

• Table cell width and height are rendered inconsistently; it is popular to use transparent gifs to
additionally control the width and/or height of a cell.

• The most popular width of email content is 600 pixels.

• In order to make images render consistently, style=”display:block” should be used in all
image tags.

Page 4 of 10 Pure360.com – 0844 586 0001


3 CSS and Styling
All styling must be in-line to work in the inbox, although the external view link will produce the entire
html from the original code.

3.1 Positioning
CSS positioning does not work in emails, mainly because the zero point will not always be in the top
left corner of the message, especially in on-line inboxes which are inside a web-page. Never use it,
use tables.

3.2 Styling Method
As on-line inboxes are hosted in a web-page, it already has a style sheet associated with it;
subsequently it tries to ignore any additional CSS tags or external sheets. You can put style tags
inside the body, but this will fight with the web-pageʼs style rules and emails can render ambiguously
and inconsistently. Subsequently you MUST use in-line styles and apply them to every single tag
which requires styling.

For example - this is wrong:
<style>
.redarial {color:red;font-family:arial}
.blueverdana {color:blue;font-family:verndana;}
</style>
<span class=”redarial”>Hello world</span>
<span class=” blueverdana”>How are you</span>
<span class=”redarial”>The weather is nice today</span>

This is right:
<span style=”color:red;font-family:arial”>Hello world</span>
<span style=“ color:blue;font-family:verndana;”>How are you</span>
<span style=”color:red;font-family:arial”>The weather nice today</span>

3.3 Unintentional Inheritance
In many inboxes if you have provided a style or formatting rule on one tag but do not on a child or
sister tag, the child or sister tag can inherit some, but not all formatting. The most commonly seen
occurrence of this is text alignment. If a table cell has centre aligned text but the cell below has no
alignment attribute, you would normally assume that it would use the default left aligned but in many
inboxes it will inherit the cell above and have it centred too. Subsequently it is best to be specific on
every cell.

Page 5 of 10 Pure360.com – 0844 586 0001


4 The HTML Page

4.1 Structure - Tables
Due to positioning and float not working in email, you have to use
tables to structure the entire message, including the body.

All online inboxes will only render the contents of the body tag and
all other code is not rendered. Subsequently any styling you would
normally add to the body tag will not work in an email.

4.2 Background Colour
If you want a background colour, you need to use a 100% width one cell table and apply the back-
ground colour to that table and cell. Then you put your main content table in that cell with a white
background.

There is also the view in a browser link which will render the entire html in its own browser window/tab.
This entire page will not have the background colour because the body is not coloured, only the main
wrapping table.

In order make the whole window work, it is acceptable to use a style tag, which is only picked up when
it is render-able. To rid the window of the auto-margin and add a background colour try this:

<style>
body {margin:0;background-color:black;}
</style>

It will be ignored by the on-line inboxes but will kick in when the user hits the view in a browser link. If
you are definitely not going to use a WYSIWYG editor but properly code the html and send that, you
will be able to put the style tags in the header and they will not be rendered by the online inboxes but
will work in the external view.

4.3 Window Title
You also have the option of using a title tag, either in the header or just in the content and the external
view will pick it up when the view in browser button is used. It is popular to make the title the same as
the subject line.

4.4 Content Width
The main content of the email is conventionally 600px wide, but inboxes can tolerate more if you so
wish. This is a designer/marketing decision. If you really want to mix it up you could do a side scrolling
email and keep it about 600px high and then add more columns to the right! If you do a side scroller, it
is important that the reader does not have to scroll up and down as well as left and right - it is one or
the other.

4.5 Borders & Padding
Many inboxes will not render borders, padding and cell spacing. In order to have a border you will
need to add additional table cells around the content cell to have a background colour and a single
colour image to control the width as well as stating the cell width in the TD tag.

Page 6 of 10 Pure360.com – 0844 586 0001


In order to have a gap between the wall of a table cell and its contents you will need use another table
cell which has the same background colour as the content and control the width of it using an image
and tag attributes and/or inline styling. Alternatively you could use a complex net of nested tables to
produce the same effect.

Page 7 of 10 Pure360.com – 0844 586 0001


5 Images

5.1 Display
Image tags are reacted to differently in different inboxes,
especially when it comes to line breaks. It is good practice to add
the attribute display=”block” attribute to each image tag to ensure
consistency.

5.2 Alternative Text
When images are blocked (as they are by default on all inboxes
unless you specify otherwise) some inboxes will show the
contents of the alt attribute and some, like Outlook, will display its own text.
You can style the alternative text for inboxes, which will show it, by using a style attribute in the image
tag itself.

5.3 Dimensions
Image dimensions are conventionally measured in pixels but some inboxes react differently to this
when ʻpxʼ is specified at the end of the value, subsequently you should only add the number and not
the ʻpxʼ on image dimensions and table and table cell dimensions.

The hosted images themselves should already be the correct dimensions for the spot they will inhabit
in the creative, this will avoid any distortion in the inbox. Also if you do not actually give the image tag
any height or width attributes and the hosted images are the correct size, some inboxes will shrink the
area around where the image will be when they are blocked and then when the images are loaded
they will stretch the table cells accordingly. It is up to you whether or not to include height and width
attributes to the image tag but it does remove a variable to include them.

Page 8 of 10 Pure360.com – 0844 586 0001


6 Content and Deliverability Tips
In order to avoid the junk folder here are a few basics to keep in mind:

6.1 Text to Image Ratio
There must be more text on the page than images, about 60:40 text.

You need to have at least four images on the page and not all of them touching. PureResponse will
always include an invisible image right at the bottom of the email which tracks the open when the
images are loaded.

Spam filters will assume/pretend that all text is ʻmediumʼ /12px, then count the characters add them
up. They will then compare that number to the total area of the page covered by images.

If your creative is image heavy a good way to add more text is to fill up the bottom of the email with
lots of small, yet still readable text - like privacy disclaimers, linking to part of the web-site and donʼt
forget the legally required company contact and registration details.

6.2 Pre-Headers
Include a Pre-header above the banner in order to earn the trust from recipients and to help them see
the full email if the images are blocked. This will include at least a link to view the email in a new
browser window/tab. You could also include a teaser at the very top which would automatically double
up as the snippet content for Gmail, Yahoo and other snippet using inboxes.

(A snippet is when the inbox will take the top two lines of html content and put it in the inbox view next
to or under the subject line.)

Depending on your relationship with the recipient it is also popular to tell people why they are getting
the email and where you got their address from at the top. This is so it can be seen clearly even when
the images are blocked. Some people will also include an opt-out link and sharing options in the Pre-
header.

6.3 Clickable Images
It is popular to make images clickable, especially if they connect to a story which also incorporates a
click through.

6.4 Click Here
You do not need to have links with ʻclick hereʼ anymore, as long as the word looks clickable - use a
different colour and an underline - the words could just describe what is at the end of the click through.

6.5 'Spammy' Words
There are various spam keywords identified by filters, any ESP will use at least the Spam Assassin
filter to check the content.

Most key words come in pairs and revolve around credit, competition, free stuff and drugs. Your spam
checker will alert you if you have inadvertently included any unfavourable combinations of words.

Page 9 of 10 Pure360.com – 0844 586 0001


7 Appendix

7.1 Dreamweaver
There are many resources available on how to create emails using programs like Dreamweaver,
here's a website some people have found useful:
http://www.fred.net/dhark/html_email.html

Are you using Dreamweaver? If so change your preference settings to disable automatic css:
http://answers.yahoo.com/question/index?qid=20071229120707AAxHGfn

7.2 Outlook 2007 Formatting Tips
From Microsoft document “Windows Live Hotmail – Enhancing e-mail Deliverability” (2007)
Here are a few recommendations for improving Outlook rendering:

• Do not use background images. Background images, whether specified in the <body>, <table>, or
<td> tag, cannot be used because of inconsistencies among e-mail clients, most notably Outlook
2007.
• Do not use CSS (cascading style sheets), inline styles or JavaScript. Cascading style sheets,
where the styles are defined within the Web page itself, are only fully supported in most e-mail
clients. Attached style sheets are not supported at all. Additionally, Web e-mail clients such as
AOL Webmail and Gmail change or comment out style tags, resulting in unpredictable formatting.
As a result, we recommend that you use only basic HTML tags. (For instance, to underline text,
use the <u> tag, for bold use the <b> tag.)
• Inline style attributes are your only option. Use only the most basic style attributes to designate
font size, colour, and type, and use them within basic HTML tags (do not use <div> or <span>
tags). Do not use styles to set table or row heights or any spacing. Do not define your style
elements within the <head> tag of the document (Hotmail will entirely strip this out). JavaScript is
not supported in any e-mail client. Do not include any JavaScript, including on
Click=”return(false);” in your HTML.
• Set table width to 600 pixels max. The convention for HTML e-mail is to limit a set table width to
600 pixels. Though a wider table may render fine in Outlook or on a high resolution monitor, users
with older systems or who choose an 800 X 600 display setting will not be able see the entire
width of the e-mail.
• Do not use the <body> tag to set any essential attributes. Some Web e-mail clients (notably Yahoo
and Hotmail) strip out the BODY tag within e-mails completely. You should not include any
attributes in the BODY tag. To set values such as background colour, use the BGCOLOR attribute
inside the TABLE or TD tags.
• Use HTML character names. Many email clients won’t display raw 8-bit characters correctly (they’ll
show up as questions marks or squares instead). As a result, you must use HTML codes for these
characters. Use only the HTML names, not the numeric values.
• Put image maps inside <body> tags. When using image maps, the <MAP> and <AREA> tags
should be between the open and close <BODY> tags with the rest of the content. The links will not
work in certain Web e-mail clients that strip out everything above the <BODY> tag (such as
Hotmail).

Additional information on Outlook can be found at the following:
Outlook 2007 HTML capabilities http://msdn2.microsoft.com/en-us/library/aa338201.aspx

Page 10 of 10 Pure360.com – 0844 586 0001

Pure360 Creative Guidelines for Email Marketing

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Pure360 Creative Guidelines for Email Marketing

Similar to Pure360 Creative Guidelines for Email Marketing (20)

More from Pure360

More from Pure360 (20)

Recently uploaded

Recently uploaded (20)

Pure360 Creative Guidelines for Email Marketing