Pure360 Creative Guidelines for Email Marketing

Version 2.1

Creative Guidelines for Emails

Page 2 of 10 Pure360.com – 0844 586 0001

Contents

1 Introduction.............................................................................................................................................. 31.1 Document Aim and Target Audience ............................................................................................. 31.2 WYSIWYG editors........................................................................................................................... 31.3 Outlook Overview............................................................................................................................ 3

2 Quick Reference ..................................................................................................................................... 4

3 CSS and Styling...................................................................................................................................... 53.1 Positioning ....................................................................................................................................... 53.2 Styling Method................................................................................................................................. 53.3 Unintentional Inheritance ................................................................................................................ 5

4 The HTML Page...................................................................................................................................... 64.1 Structure - Tables............................................................................................................................ 64.2 Background Colour ......................................................................................................................... 64.3 Window Title .................................................................................................................................... 64.4 Content Width.................................................................................................................................. 64.5 Borders & Padding .......................................................................................................................... 6

5 Images..................................................................................................................................................... 85.1 Display ............................................................................................................................................. 85.2 Alternative Text ............................................................................................................................... 85.3 Dimensions...................................................................................................................................... 8

6 Content and Deliverability Tips .............................................................................................................. 96.1 Text to Image Ratio......................................................................................................................... 96.2 Pre-Headers .................................................................................................................................... 96.3 Clickable Images............................................................................................................................. 96.4 Click Here ........................................................................................................................................ 96.5 'Spammy' Words ............................................................................................................................. 9

7 Appendix ...............................................................................................................................................107.1 Dreamweaver ................................................................................................................................107.2 Outlook 2007 Formatting Tips ......................................................................................................10


Page 3 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 tagconventions.

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 AudienceThis 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 willrender in order for coders to create good looking emails that will look the same when rendered inevery inbox they are sent to.

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

1.2 WYSIWYG editorsIf you are building the template with the intention of it being edited by someone else using aWYSIWYG 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 whenthey open the HTML. Subsequently, the content may not be same after it has been opened in aWYSIWYG editor. It is possible to code HTML emails to be WYSIWYG compatible, but as all editorsare slightly different there is a certain amount testing that needs to be done in the WYSIWYG editorthat will be used.

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

1.3 Outlook OverviewThe 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 theHTML, this has been a security risk in the past. As a reaction to the security risk, Outlook 2007 will useMicrosoft Word 2007 to render the html. Subsequently Outlook 2007 is extremely limiting to whichstyle attributes it will render.

Some of the more commonly used tags and styles which Outlook and many other inboxes will notrender 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 withdifferent 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 knowexactly until its release.


Page 4 of 10 Pure360.com – 0844 586 0001

2 Quick Reference

• On-line inboxes will only render the contents of the body tag and allother code is ignored.

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

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

• CSS positioning is ignored or does not work in emails, subsequentlythe 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 withbackground colours.

• Table cell width and height are rendered inconsistently; it is popular to use transparent gifs toadditionally 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 allimage tags.


Page 5 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 entirehtml from the original code.

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

3.2 Styling MethodAs 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 tagsinside the body, but this will fight with the web-pageʼs style rules and emails can render ambiguouslyand inconsistently. Subsequently you MUST use in-line styles and apply them to every single tagwhich 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 InheritanceIn many inboxes if you have provided a style or formatting rule on one tag but do not on a child orsister tag, the child or sister tag can inherit some, but not all formatting. The most commonly seenoccurrence of this is text alignment. If a table cell has centre aligned text but the cell below has noalignment attribute, you would normally assume that it would use the default left aligned but in manyinboxes it will inherit the cell above and have it centred too. Subsequently it is best to be specific onevery cell.


Page 6 of 10 Pure360.com – 0844 586 0001

4 The HTML Page

4.1 Structure - TablesDue to positioning and float not working in email, you have to usetables to structure the entire message, including the body.

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

4.2 Background ColourIf 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 whitebackground.

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 mainwrapping table.

In order make the whole window work, it is acceptable to use a style tag, which is only picked up whenit 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. Ifyou are definitely not going to use a WYSIWYG editor but properly code the html and send that, youwill be able to put the style tags in the header and they will not be rendered by the online inboxes butwill work in the external view.

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

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

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


Page 7 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 tablecell which has the same background colour as the content and control the width of it using an imageand tag attributes and/or inline styling. Alternatively you could use a complex net of nested tables toproduce the same effect.


Page 8 of 10 Pure360.com – 0844 586 0001

5 Images

5.1 DisplayImage tags are reacted to differently in different inboxes,especially when it comes to line breaks. It is good practice to addthe attribute display=”block” attribute to each image tag to ensureconsistency.

5.2 Alternative TextWhen images are blocked (as they are by default on all inboxesunless you specify otherwise) some inboxes will show thecontents 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 imagetag itself.

5.3 DimensionsImage dimensions are conventionally measured in pixels but some inboxes react differently to thiswhen ʻpxʼ is specified at the end of the value, subsequently you should only add the number and notthe ʻ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 inhabitin the creative, this will avoid any distortion in the inbox. Also if you do not actually give the image tagany height or width attributes and the hosted images are the correct size, some inboxes will shrink thearea around where the image will be when they are blocked and then when the images are loadedthey will stretch the table cells accordingly. It is up to you whether or not to include height and widthattributes to the image tag but it does remove a variable to include them.


Page 9 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 RatioThere 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 willalways include an invisible image right at the bottom of the email which tracks the open when theimages are loaded.

Spam filters will assume/pretend that all text is ʻmediumʼ /12px, then count the characters add themup. 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 withlots of small, yet still readable text - like privacy disclaimers, linking to part of the web-site and donʼtforget the legally required company contact and registration details.

6.2 Pre-HeadersInclude a Pre-header above the banner in order to earn the trust from recipients and to help them seethe full email if the images are blocked. This will include at least a link to view the email in a newbrowser window/tab. You could also include a teaser at the very top which would automatically doubleup 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 nextto or under the subject line.)

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

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

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

6.5 'Spammy' WordsThere are various spam keywords identified by filters, any ESP will use at least the Spam Assassinfilter to check the content.

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


Page 10 of 10 Pure360.com – 0844 586 0001

7 Appendix

7.1 DreamweaverThere 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 TipsFrom 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 Outlook2007.

• 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-mailclients. Attached style sheets are not supported at all. Additionally, Web e-mail clients such asAOL 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 designatefont 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 styleelements within the <head> tag of the document (Hotmail will entirely strip this out). JavaScript isnot supported in any e-mail client. Do not include any JavaScript, including onClick=”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 to600 pixels. Though a wider table may render fine in Outlook or on a high resolution monitor, userswith older systems or who choose an 800 X 600 display setting will not be able see the entirewidth of the e-mail.

• Do not use the <body> tag to set any essential attributes. Some Web e-mail clients (notably Yahooand Hotmail) strip out the BODY tag within e-mails completely. You should not include anyattributes in the BODY tag. To set values such as background colour, use the BGCOLOR attributeinside the TABLE or TD tags.

• Use HTML character names. Many email clients won’t display raw 8-bit characters correctly (they’llshow up as questions marks or squares instead). As a result, you must use HTML codes for thesecharacters. Use only the HTML names, not the numeric values.

• Put image maps inside <body> tags. When using image maps, the <MAP> and <AREA> tagsshould be between the open and close <BODY> tags with the rest of the content. The links will notwork in certain Web e-mail clients that strip out everything above the <BODY> tag (such asHotmail).

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

Business

Pure360 Creative Guidelines for Email Marketing