1. IBM Marketing & Communications Transformation © 2009 IBM Corporation Guidance for HTML Creative Developers July 23, 2010

2. 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.

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

4. 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

5. 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.

6. 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

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

8. 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

9. 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

10. 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.

11. 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

12. 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

13. IBM Marketing & Communications Transformation Page 13 Avoiding Email Creative Upload Issues  Only HTML (.html,.html) and valid web graphic files (e.g..jpg,.gif) are permitted inside a zip file. The creative upload process will fail if any other file is included (e.g..txt,.db,.tif,.psd, etc.)  On rare occasions, certain HTML files have been created with an embedded illegal carriage return character causing the upload process to fail (many cases in ALT sections) –Creative developers must verify that they are not added to an html file  Only HTML file names with 55 characters or less will successfully upload in MAT.  The HTML file name cannot include any of the following characters: \ / : * ? " | &  As a best practice, the following naming convention should be used: Country_TacticID_ShortDescription_version –e.g. US_100UE02T_IOD_v1.zip, US_100UE02T_IOD_v2.zip, etc. –For creative updates, the contents inside the zip file will replace older versions in MAT as long as the file names are kept the same –Version tracking should only be used in the zip file name and not on the actual creative file names since MAT will create a new file entry (e.g. IOD.html, IOD2.html, etc.) for each new file not yet uploaded in MAT. –Although this naming best practice is not required, it may be helpful when troubleshooting issues in MAT

14. IBM Marketing & Communications Transformation Page 14 Instructions for proofing creative contents  The IBM client requesting creative should be instructed and advised to locally proof the creative contents before uploading to the MAT Email Upload site –Allows for quick confirmation of the accuracy of the email copy –Allows for quick verification that the HTML properly renders within a browser (e.g. images are all present, design matches request, etc.)  To perform this proof, the IBM client should store the creative package (i.e. zip file) in a folder within their local hard drive, extract the contents, and open the HTML in a browser. –Example depicted on next slide* * Most XP Professional installs at IBM allow for this capability but other licensed extract tools can also be used such as WinZip

15. IBM Marketing & Communications Transformation Page 15 Example for Extracting Creative Package Windows Explorer – View Creative Package File Windows Explorer – Extract Files Right-click on file name Windows Explorer – Files Get Extracted in sub folder Double-click HTML file to view HTML will open in default browser 1 2 34