Creative Guidelines for s

Transcription

1 Version 2.1

2 Contents 1 Introduction Document Aim and Target Audience WYSIWYG editors Outlook Overview Quick Reference CSS and Styling Positioning Styling Method Unintentional Inheritance The HTML Page Structure - Tables Background Colour Window Title Content Width Borders & Padding Images Display Alternative Text Dimensions Content and Deliverability Tips Text to Image Ratio Pre-Headers Clickable Images Click Here 'Spammy' Words Appendix Dreamweaver Outlook 2007 Formatting Tips...10 Page 2 of 10 Pure360.com

3 1 Introduction s are not ʻweb 2.0ʼ compliant; essentially, 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 s. 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 s 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 s 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 client is Microsoft Outlook. There are many versions of Outlook still in use, although the main two are Outlook 2003 and Outlook 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

4 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 s, subsequently the only efficient way to structure an 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 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

5 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 s, 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 s 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

6 4 The HTML Page 4.1 Structure - Tables Due to positioning and float not working in , 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 Background Colour If you want a background colour, you need to use a 100% width one cell table and apply the background 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 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 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

7 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

8 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

9 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 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 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 if the images are blocked. This will include at least a link to view the 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 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 Preheader. 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

10 7 Appendix 7.1 Dreamweaver There are many resources available on how to create s using programs like Dreamweaver, here's a website some people have found useful: Are you using Dreamweaver? If so change your preference settings to disable automatic css: Outlook 2007 Formatting Tips From Microsoft document Windows Live Hotmail Enhancing 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 clients, most notably Outlook 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 clients. Attached style sheets are not supported at all. Additionally, Web 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 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 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 . Do not use the <body> tag to set any essential attributes. Some Web clients (notably Yahoo and Hotmail) strip out the BODY tag within s 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 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 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 Page 10 of 10 Pure360.com