Guidance for HTML Creative Developers Unica
advertisement
IBM Marketing & Communications Transformation Guidance for HTML Creative Developers July 23, 2010 © 2009 IBM Corporation IBM Marketing & Communications Transformation 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. Page 2 IBM Marketing & Communications Transformation 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 Page 3 IBM Marketing & Communications Transformation 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 <head> tag – Attribute values required to be enclosed by quotes – Referenced images in <SRC> 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 Page 4 IBM Marketing & Communications Transformation List of Available Personalization Fields Personalization Field HTML Reference String Comments Email address **EMAIL** - First name **FIRST_NAME** - Last name **LAST_NAME** - Tactic code **TACTIC** Salutation **SALUTATION** Opt-Out Footer **OPTOUT_FOOTER** Used to Override Default 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 <SALUTATION_ENGINE> 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 </BODY> 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 </BODY> tag. Page 5 IBM Marketing & Communications Transformation 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: 1 <p style="font-size: 9pt; font-family: arial, sans-serif; lineheight: 12pt; margin: 0; color: #333333;">**SALUTATION**<br /><br /> 1 **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: 2 <td colspan="3" align="center"><p class="legal">…….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 <a href="http://www.ibm.com/legal/copytrade.shtml">www.ib m.com/legal/copytrade.shtml</a>.<br /><br /> 2 **OPTOUT_FOOTER**</p> Page 6 IBM Marketing & Communications Transformation Adding a “view online” link 1 Email File Name: 609AF41E_ECM_Demos.html 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: 1 <center><p class="bodytext">If you cannot view this message properly, click <a href="609AF41E_ECM_Demos.html">here </a> to view the online version</p></center> 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. Page 7 IBM Marketing & Communications Transformation Using style sheet syntax or other tags inside a <head> tag All style sheet syntax must be contained within the <BODY></BODY> tag pair. – Although this syntax is typically placed inside the <head> tag, designers should avoid placing it in this section since eMessage will remove anything contained within the <head></head> tag pair. <style> syntax located inside the <body> tag Page 8 IBM Marketing & Communications Transformation 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 <a href="http://www.ibm.com/software/info/li/dmi/em2" title="Read the ITG analyst paper."> <img src="topcta_081109.gif" alt="Read the ITG analyst paper." width="585" height="41" border="0" /></a> <A title="Read the ITG analyst paper." href="http://www.ibm.com/software/info/li/dmi/em2"> <IMG height=41 alt="Read the ITG analyst paper." src="http://gbweb01.etl.ibm.com/marketing/campaigns/test/US-109BH38E/topcta_081109.gif" width=585 border=0></A> Page 9 IBM Marketing & Communications Transformation Referenced images in <SRC> tag The image files for all relative referenced images must be included in the creative package e.g. <img src="topcta_081109.gif“> 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. <img src="http://www-01.ibm.com/software/data/management/images/LP_Header_930x300.jpg"> Page 10 IBM Marketing & Communications Transformation 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. 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 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. <img src=“images/topcta_081109.gif”> LI_Q309_DB2_T2.zip LI_Q309_DB2_T2.zip OR Page 11 IBM Marketing & Communications Transformation 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 - <td></td>, <p></p>, etc. – Using only attributes allowed for the tag used - <td width="585" height="35"> – When placing tables in the html, follow proper table best practices • Text within the <td></td> tags (e.g. <td>Some Text Here</td>) and not elsewhere in the table construct (e.g. <tr>Some Text Here</tr>) 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 Page 12 IBM Marketing & Communications Transformation 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 Page 13 IBM Marketing & Communications Transformation 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 Page 14 IBM Marketing & Communications Transformation Example for Extracting Creative Package 1 Windows Explorer – View Creative Package File 2 Windows Explorer – Extract Files Right-click on file name 3 Windows Explorer – Files Get Extracted in sub folder 4 HTML will open in default browser Double-click HTML file to view Page 15
