IBM Marketing & Communications Transformation 2009 IBM Corporation Guidance for HTML Creative Developers July 23, 2010
IBM Marketing & Communications Transformation Page 2 Revision History July 23, 2010*: Slide 2: New slide added Revision History Slide 7: Second bullet updated to highlight case-sensitivity of view online link Slide 11: New image illustrating the valid/invalid scenarios when placing an html in a subfolder Slide 13: New slides added Avoiding Email Creative Upload Issues *NOTE: These changes are not yet incorporated into the.mp3 recording that accompanies this presentation. Since two new slides have been added, the slide numbers used in the recording may be off by two.
IBM Marketing & Communications Transformation Page 3 Objective of this Guidance The objective of this guidance is to assist HTML developers design email creative that is compatible with Unica eMessage and the MAT Email Upload site. Assumptions These guidelines only apply to HTML creative used within the Unica eMessage module The HTML design will adhere to standard coding best practices Creative will be designed using an appropriate text or html editor (e.g. Notepad, Dreamweaver, etc.) All creative files will be delivered to IBM using a compressed/zipped file
IBM Marketing & Communications Transformation Page 4 Overview Using email personalization fields List of Available Personalization Fields Placing an HTML Reference String Adding a view online link Other HTML tag considerations Using style sheet syntax or other tags inside a tag Attribute values required to be enclosed by quotes Referenced images in tag Delivery of Email Creative Adherence to coding best practices Avoiding Email Creative Upload Issues Instructions for proofing creative contents Example for Extracting Creative Package
IBM Marketing & Communications Transformation Page 5 List of Available Personalization Fields Personalization FieldHTML Reference StringComments Email address**EMAIL**- First name**FIRST_NAME**- Last name**LAST_NAME**- Tactic code**TACTIC**Used to Override Default Salutation**SALUTATION**- Opt-Out Footer**OPTOUT_FOOTER**Used to Override Default To personalize an email, any of the available case-sensitive HTML Reference Strings can be added to the html code When the creative is uploaded using the MAT Email Upload site, the reference string is replaced with an eMessage personalization field When an email is sent in production, the personalization field is replaced with the appropriate profile value for each recipient The **SALUTATION** reference string replaces the tag used by other IBM email tools. Unica users will specify what salutation option they want to use when they setup the email (e.g. Dear Mr. Jones,) eMessage will always append the Tactic code value in the footer area. For design purposes, **TACTIC** can be used to override the location of the tactic code value. Default placement is just before the tag. eMessage will always append the legal opt-out footer. For design purposes, **OPTOUT_FOOTER** can be used to override the location of the legal footer. Default placement value is just before the tag.
IBM Marketing & Communications Transformation Page 6 Placing an HTML Reference String To the right, there are two examples of how an HTML Reference String is placed within the HTML code: **SALUTATION** is placed in the body of the email: **SALUTATION** **OPTOUT_FOOTER** is used to override the default location of the footer and control the placement within the body of the email, the fonts, and text sizes called by an email design. This is an optional step only required if the creative design calls for more flexibility in the way that text renders. This example shows a design requiring the text to be centered within the body of the email: .IBM, the IBM logo, ibm.com, DB2, Smarter Planet and the planet icon are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at www.ib m.com/legal/copytrade.shtml. **OPTOUT_FOOTER** 1 2 1 2
IBM Marketing & Communications Transformation Page 7 Adding a view online link To view the hosted email version, a relative, self-referencing embedded link to the HTML file needs to be added in the appropriate location or format. The link needs to include the exact document name. This is case-sensitive and a difference between the link document name and the actual document name will cause a broken link: If you cannot view this message properly, click here to view the online version When the email recipient clicks on this link, they will be able to view the email version in a browser all HTML Reference Strings will be stripped and only **TACTIC** and **OPTOUT_FOOTER** will be replaced in the hosted version with the appropriate text. Only the emails with links that refer to the name of the uploaded file will have the language-specific footer displayed online all others will see the default US version. 609AF41E_ECM_Demos.html vs 609AF41E_ECM_Demos_online.html A separate online version file is not needed as long as the link contains the file name. Email File Name: 609AF41E_ECM_Demos.html 1 1
IBM Marketing & Communications Transformation Page 8 Using style sheet syntax or other tags inside a tag All style sheet syntax must be contained within the tag pair. Although this syntax is typically placed inside the tag, designers should avoid placing it in this section since eMessage will remove anything contained within the tag pair. syntax located inside the tag
IBM Marketing & Communications Transformation Page 9 Attribute values required to be enclosed by quotes The following attribute values must be enclosed in quotes (single or double): SRC HREF BACKGROUND HTML files uploaded into eMessage convert these attribute path values into absolute web path values Any attribute path value beginning with http or https are ignored Original Creative Uploaded Creative
IBM Marketing & Communications Transformation Page 10 Referenced images in tag The image files for all relative referenced images must be included in the creative package e.g. Images referenced with absolute values do not have to be included in the creative package since their location path will not get converted during the creative upload (see slide 8) e.g.
IBM Marketing & Communications Transformation Page 11 Delivery of eMail Creative All creative files must be delivered in a single compressed/zipped file Multiple HTML files can be included in the zip file but they must be stored at the top or root level (i.e. no subfolders). The upload will fail if the html file is placed inside a subfolder. Image files may be stored at the top level or within subfolders If images are stored in a subfolder, the HTML file must reference them appropriately (e.g. LI_Q309_DB2_T2.zip OR LI_Q309_DB2_T2.zip e.g. This will cause an issue. Notice that the html file extracts into a subfolder. The HTML file should be stored in the folder above the highlighted folder Valid Invalid
IBM Marketing & Communications Transformation Page 12 Adherence to coding best practices eMessage only supports and properly interprets HTML that follows design best practices and standards Although many web browser may properly render certain coding shortcuts, designers should still adhere to commonly used HTML standards (i.e. W3C) since not all email applications will have the same rendering flexibility. Properly closing opened tags -,, etc. Using only attributes allowed for the tag used - When placing tables in the html, follow proper table best practices Text within the tags (e.g. Some Text Here ) and not elsewhere in the table construct (e.g. Some Text Here ) Only using an acceptable HTML editor is important as certain characters may not translate properly when used within eMessage Notepad or Dreamweaver vs. Microsoft Word For example, a quote from Word may render as a random character or white space when emailed