Recent pages

Edit
page

New
page

Print
page
Page last modified 09:50, 13 Dec 2011 by Admin
12
Redirect
Page Notifications Off
Documentation Wiki > ExactTarget > Content > HTML-Based Emails

HTML-Based Emails

From $1

    BlogIcon.png

    The ability to create emails with HTML is available in all versions of the application. You should have a knowledge of HTML before using this feature.

    To learn how to create a template using HTML Paste, see How to Create a Template Using HTML Paste.

    Note: HTML emails can render differently in each email service provider. ExactTarget recommends previewing your email using Inbox Preview (if you don't have Inbox Preview, contact your representitive for more information). You can also reference 3sixty's Design Center to learn tips and tricks about HTML rendering in Outlook and other ESPs.  

    What Is HTML Paste

    The HTML Paste feature is an option you have when creating an email. This feature allows you to create emails with HTML code.

    Building emails with HTML gives you an alternative to creating emails from templates. With templates, you control their creation by using content areas, tabs, and other options available in the application's user interface. With HTML Paste, you create the email by pasting and editing HTML code. You can either create HTML code directly in the application or paste HTML from an external editor. 

    You can find information about creating templates with HTML here. 

    Requirements

    When working with emails created with HTML code (rather than from a standard template), you need to insert certain features that are required by the federal CAN-SPAM Act. (For emails built using a standard template, these items are automatically embedded into the email.)

    • Physical mailing address: All commercial email must contain a physical mailing address. You need to insert your physical mailing address using the email tools provided; it cannot be typed directly into the email.
    • Link to unsubscribe or modify profile: All commercial email must contain a valid opt-out mechanism. To meet this requirement, you can embed a link in your emails by which you can unsubscribe from your communications. In addition, you can also give your subscribers the ability to update their profile information.
    • You must make sure the images are uploaded in your Portfolio before you create your email, and the URLs in the email code correspond properly.
    Note: For full details on the CAN-SPAM Act, visit the Federal Trade Commission web site.

    HTML Options

    Though you are using the HTML option there is a tool you can use to insert the following features into the HTML code of your emails as desired:

    Other advanced HTML options are those referred to as advanced features. These include the insertion of rich media (Flash, Integration, or QuickTime file links).

    Including CSS in your HTML Email

    ExactTarget supports CSS Version 1.0. This essentially gives you the flexibility to declare borders, border color, border sizes, fonts, font colors, font sizes, text decoration, link colors, etc. 

    To date, the majority of email clients will support basic inline CSS. Be mindful that many web-supposed CSS properties aren't supported in email. CSS-based layouts are only successful in the most compliant of email clients. Your design will render more consistently when you use HTML tables for layout. ExactTarget recommends not using embedded or external styles for consistent displays across email clients. 

    In particular, Outlook 2007 doesn't support the float or position CSS properties. Many designers use these elements to control the layout and positioning of elements in their emails. Other problematic properties include margin, line-height, clear, and background-image. Avoid using these properties, or test thoroughly to ensure your email displays as intended. 

    The safest and most widely supported method of using CSS is to reference it within the actualy HTML file itself. There are two methods of doing this:

    • Use inline style declarations ( <td style=?border: 1px solid #000000;?>text</td> ). The style tag starts where you declare the properties that the table cell will carry. 
    • Declare the style in the head tag and then referenc that style within the HTML code itself. 

    Requirements and Best practices for HTML-Based Emails

    The following HTML email tips increase the likelihood of consistent formatting across the widest variety of email clients, including web-based email providers.

     

    Build your emails to display within a 600-pixel width. Many email clients can display text and images that are 600 pixels wide. Wider emails may be chopped off in some email client preview windows.
    Place a background color within a table. Several web-based email clients specify a background color on the web page containing the email the subscriber is viewing. As a result, background colors specified in the body tag of an email may be ignored.
    Test the look of your email. Test the look of your email against Microsoft Outlook, Outlook Express, Hotmail, Yahoo!, MSN, Eudora, Lotus Notes, and AOL, in both a Windows and a Macintosh environment. This testing is necessary to ensure that your email displays correctly on the broadest set of email clients.
    Use center tags. Center tags help ensure that your emails display consistently across web-based email clients.
    Reduce the use of non-standard languages. Many email clients are not able to correctly render Microsoft's Rich Text Format ( RTF), because the subscriber's email client requires Microsoft software to correctly interpret it. Look for ( MSO) tags in the body of your HTML to identify Microsoft RTF.
    Avoid the use of XML in your email. Many email clients are not able to identify and either ignore or correctly render XML.

    Why Build Emails With HTML

    Use HTML Paste to build emails if you're experienced with HTML and want an alternative to using the template mode. This provides customization, as HTML is more comprehensive than the application's visual editor. 

    Another option is to use an HTML Paste Template. An HTML Paste templates gives you the flexibility of using HTML to create your template while still allowing the user to use the email editor to create content boxes in the email.

    Scenario

    Northern Trail Outfitters has created a nice email with HTML and wants to use this content to create their email. In the workspace they begin creating the email.

    Northern Trail Outfitters now pastes their HTML code into the open box: 

    File:010_ExactTarget/020_Content/HTML-Based_Emails/1.png

    Note: You must make sure the images are uploaded in your Portfolio before you create your email, and the URLs in the email code correspond properly.

    Northern Trail Outfitters inputs the required Physical Mail Address and Profile Center by selecting each item one at at time from the Email Tools drop down and inserting them into the code.

    File:010_ExactTarget/020_Content/HTML-Based_Emails/2.jpg

    Note: At this point, Northern Trail Outfitters inserts Physical Mail Address immediately after the <body> tag so that it would appear at the top of their email.  They inserted the Profile Center directly before the closing </body> tag.

    File:010_ExactTarget/020_Content/HTML-Based_Emails/3.jpg

     

    File:010_ExactTarget/020_Content/HTML-Based_Emails/4.jpg

    Note: This is the point at which to insert additional code such as Personalization and Tracking. Northern Trail Outfitters has inserted Tracking below between the </body> and </html> tags, and they have inserted the first name code in the body where appropriate: "Happy Birthday, %%firstname%%!"

    Northern Trail Outfitters clicks Save and the email is created.

    File:010_ExactTarget/020_Content/HTML-Based_Emails/5.jpg

    How to Include Your Physical Address

    Your physical mailing address is taken from your account settings. To insert code that pulls the address into your email, follow these steps while you have the email open in Edit HTML Version mode:

    1. In the text box, place your cursor where you want your physical mailing address to appear.
    2. From the Email Tools drop-down list at the top of the workspace, choose Physical Mailing Address (Required).
    3. Click the Insert button beside the Email Tools field. The code necessary to pull your physical mailing address into the email is inserted at your cursor location.
    4. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Link to Profile and Subscription Center

    The Profile Center is where subscribers can update their data for the attributes defined in your account (except for any attributes set to be hidden). This web page is built and maintained for you as part of your account. You can preview the Profile Center from the Profile Management area.

    The Subscription Center is where subscribers can remove themselves from one or more of your lists. This web page is also built and maintained for you. You can preview it via the Subscription Center link in the Profile Center preview.

    Your email must include the means for a subscriber to unsubscribe. Therefore, a link to the Profile Center, which itself includes a link to the Subscription Center, is required in your email. You can also choose to include a link that goes directly to the Subscription Center.

    While you have the email open in Edit HTML Version mode, follow these steps to insert a link to the Profile Center and/or Subscription Center:

    1. In the text box, place your cursor where you want the link to appear.
    2. From the Email Tools drop-down list at the top of the workspace, choose Profile Center (Required). (If you're creating a link to the Subscription Center, choose Unsubscribe Center.)
    3. Click the Insert button beside the Email Tools field. A hyperlink to the Profile Center (or Subscription Center) is inserted at your cursor location.
    4. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).
    Note: The default text associated with the link is "Update Profile" or "Unsubscribe." You can adjust this text as desired within the HTML code.

    How to Include a Link to Privacy Policy

    A privacy policy is an important element of email communications, as it explains the rules and guidelines of email permission.

    Default text and a link to a default privacy and permission policy are available with the Privacy Policy tool. You can adjust both the display text and the URL to move to the policy on your own web site.

    While you have the email open in Edit HTML Version mode, follow these steps to insert the default privacy policy link:

    1. In the text box, place your cursor where you want the link to appear.
    2. From the Email Tools drop-down list at the top of the workspace, choose Privacy Policy.
    3. Click the Insert button beside the Email Tools field. A hyperlink to the default privacy policy, along with default display text, is inserted at your cursor location.
    4. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Include Personalization (Personalization Strings)

    You can use personalized personalization strings that fill in with the subscriber's own information when the email is delivered. More information on Personalization can be found here.

    While you have the email open in Edit HTML Version mode, follow these steps to insert a personalization string:

    1. In the text box, place your cursor where you want the personalization string to appear in the email.
    2. From the Personalization drop-down list at the top of the workspace, choose the desired attribute.
    3. Click the Insert button beside the Personalization field. The code that pulls the subscriber's data for that attribute is inserted at your cursor location.
      Remember: An attribute can be set up as required or optional. If the attribute is optional, make sure that your text still makes sense if the personalization string you inserted is blank for a particular subscriber.
    4. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Insert Images

    Your stored images can be inserted into your email by means of the img src reference tag.

    First, follow these steps to discover the URL of the image you want to use:

    1. In the navigation pane click Content.
    2. Click Portfolio or the subfolder in which you want the image stored. Thumbnails of the images in the selected folder are displayed in the workspace. If your desired image is not stored in your account, you'll need to upload the image file.
    3. Click your image, then click the Properties button that appears in the horizontal tab bar above the images.
    4. Copy the URL listed under File URL in the Properties screen.

    Now that you have the URL copied, you can paste this URL into the img src reference tag in your email:

    1. Open the email for editing in Edit HTML Version mode.
    2. In the text box, place your cursor inside the img src reference tag and paste the URL. You'll end up with code similar to the following: 
      <img src="https://www.example.com/lib/fe12345c67d890/m/1/#####.jpg">
    3. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).
    Note: If you want to insert a large number of images, change the Portfolio View from Thumbnails to Listing. The Listing view displays a URL column that contains the same URL as shown in the Properties screen.

    How to Include Document Links

    You can insert links to your stored document into your email using the A href tag.

    Use this procedure to link to a document in your portfolio. Usually, you should link to documents rather than attach them to the message to avoid appearing to be a virus threat and to allow tracking on the document. However, if you must attach a document, see the AttachFile() function in the AMPscript guide for more information."

    First, follow these steps to discover the URL of the document you want to use:

    1. In the navigation pane of the application, click Content.
    2. Click Portfolio or the document subfolder in which the document you want is stored. Thumbnails of the documents in the selected folder are displayed in the workspace. If your desired file is not stored in your account, you'll need to upload the file.
    3. Click the thumbnail of the desired document, which causes the document to open in a new browser window.
    4. Copy the URL from the address bar of the browser window in which the document has opened.

    Now that you have the URL copied to the Windows Clipboard, you can paste this URL into the A href tag in your email:

    1. Open the email for editing in Edit HTML Version mode.
    2. In the text box, place your cursor inside the A href tag and paste the URL. You'll end up with code similar to the following: 
      <A href="http:// images.example.com/members/###/ filename.xyz">display text</A>
    3. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Use Forward to a Friend

    The Forward to a Friend feature that you can insert into a content box is also available as HTML code that you can insert into your HTML paste email.

    While you have the email open in Edit HTML Version mode, follow these steps to insert the Forward to a Friend button:

    1. In the text box, place your cursor where you want the button to appear.
    2. From the Email Tools drop-down list at the top of the workspace, choose Forward to a Friend.
    3. Click the Insert button beside the Email Tools field. The button image and the code behind the button are inserted at your cursor location.
    4. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Use View Email as Web Page

    You can provide subscribers with a link that allows them to open the email as a web page. This provides a solution if a user's  email client might have display problems or conflicts with file size downloads.

    While you have the email open in Edit HTML Version mode, follow these steps to insert the "view as a web page" link:

    1. In the text box, place your cursor where you want the link to appear. This type of link is typically placed at the top of the email.
    2. From the Email Tools drop-down list at the top of the workspace, choose View Email as a Web Page.
    3. Click the Insert button beside the Email Tools field. The hyperlink and default display text are inserted at your cursor location.
    4. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Insert a "Powered By" Logo

    Follow these steps to insert the "Powered by" logo while you have the email open in Edit HTML Version mode:

    1. In the text box, place your cursor where you want the logo to appear. This type of link is usually placed at the end of the email.
    2. From the Email Tools drop-down list at the top of the workspace, choose Powered By Logo.
      Click the Insert button beside the Email Tools field. The button image and the code behind the button are inserted at your cursor location.
    3. Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Include Open Tracking

    The Tracking option at the top of the workspace is the same option that appeared on the first page of the email creation process (the Track Email Opens check box). If that check box was selected at the time the email was created, the tracking code was already added to the email. If it wasn't, you can add the code now by clicking the Insert button beside the Tracking field.

    This option tracks the number of subscribers who open this email.

    How to Add Rich Media Into Your Email

    To insert your rich media, follow these steps while you have the email open in Edit HTML Version mode:

    1. In the text box, place your cursor where you want your the rich media to appear.

    2. From the Rich Media drop-down list at the top of the workspace, choose Flash Integration or QuickTime Integration, as appropriate.

    3. Click the Insert button beside the Email Tools field.

    The basic syntax is inserted at your cursor location. You now need to replace the placeholder text in the syntax with the proper code for your file.

    1. Scroll down in the inserted syntax to find the first instance of the VALUE parameter (URL). In the URL, replace the text MEMBER NUMBER with your account ID, also known as your member ID.

    If you don't know your account ID, you can find it in the upper-right corner of the application window, in parentheses next to your account name. If your tabs are arranged horizontally, click you Admin Tab, Account Settings, and it is listed next to Account ID.

    1. In the same VALUE parameter, replace the text FILENAME with the name of your Flash or QuickTime file.

    2. Scroll through the rest of the inserted syntax and replace the other generic VALUE parameters with your member ID and the filename.

    3. Review the comments embedded in the inserted syntax, which guides you through customizing the background color and size (height and width) of the rich media file in the email.

    4. When done, click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

    How to Add a Facebook Like Button into an HTML Email

    1. Place your cursor where you'd like to insert the Facebook Like button.
    2. Click the Insert drop-down menu. 
    3. Click Facebook Like. 

    This page was last updated by Adam Evans on Tue, 13 Dec 2011 13:50:06 GMT.

    If you require assistance with the ExactTarget application, please contact Global Support. If you wish to send Adam direct feedback, fill out the form below:

    Was This Page Helpful?
    Suggestions or Comments:
    Name (optional):
    Email Address (optional):
    Enter 20445 backwards:
       
    Tags: (Edit tags)
    • No tags
    Attach file or image
    Files (12)
    FileSizeDateAttached by 
    1.png
    No description
    		84.49 kB09:50, 13 Dec 2011AdminActions
    2.jpg
    No description
    		41.75 kB09:50, 13 Dec 2011AdminActions
    3.jpg
    No description
    		61.25 kB09:50, 13 Dec 2011AdminActions
    4.jpg
    No description
    		41.52 kB09:50, 13 Dec 2011AdminActions
    5.jpg
    No description
    		58.72 kB09:50, 13 Dec 2011AdminActions
    BlogIcon.png
    No description
    		3.68 kB09:50, 13 Dec 2011AdminActions
    email-medium.jpg
    No description
    		58.72 kB09:04, 24 Nov 2009AdminActions
    HTML_paste.png
    No description
    		84.49 kB09:04, 24 Nov 2009AdminActions
    HTML_pasted.jpg
    No description
    		61.25 kB09:04, 24 Nov 2009AdminActions
    physical_email_address.jpg
    No description
    		41.75 kB09:04, 24 Nov 2009AdminActions
    profile_pasted.jpg
    No description
    		41.52 kB09:04, 24 Nov 2009AdminActions
     test.zip
    No description
    		189 bytes14:06, 24 Nov 2009AdminActions
    Comments (0)
    You must login to post a comment.

     
    Powered by MindTouch 2010
    Admin