Download ppt - IBM Marketing & Communications Transformation © 2009 IBM Corporation Guidance for HTML Creative Developers July 23, 2010

IBM Marketing & Communications Transformation

© 2009 IBM Corporation

Guidance for HTML Creative Developers

July 23, 2010


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.


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


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

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** 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 <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 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:

<td colspan="3" align="center">…….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.ibm.com/legal/copytrade.shtml</a>. 

**OPTOUT_FOOTER**

1

2

1

2


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:

<center>If you cannot view this message properly, click <a href="609AF41E_ECM_Demos.html">here</a> to view the online version</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.

Email File Name: 609AF41E_ECM_Demos.html

1

1


Page 8

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

Original Creative

Uploaded Creative


Page 10

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 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. <img src=“images/topcta_081109.gif”>

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

ValidInvalid


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 - <td></td>, , 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 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


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


Page 15

Example for Extracting Creative PackageWindows 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

12

3 4