Code View User’s Guide Page 3 ©Constant Contact, Inc. All rights reserved. 04/08 Code View User’s Guide Code View allows you to see the HTML used in each block of an email. If you are familiar with HTML, Code View al lows you to make minor changes to a block in your email. Changes made in Code View can cause errors if not done correctly. Before making any changes to the code, you should always make a copy of your email to avoid losing any of your work. This guide assumes you are familiar with HTML. Code View is not available in the Classic Wizard. This chapter provides an overview of Code View, and covers: Why you might use Code View How to use Code View Some HTML best practices What Is Code View? Code View exposes the HTML code to display a block of an email. You can view and edit this code to modify the display of the email. Using Code View to modify your email for a more unique look, you can insert a table, add columns within a block, insert special characters, add padding, strikeout text, and add image mapping, for example. Image mapping links do not track. How to Use Code View The code you see in Code View is strict HTML, which means that it must include a minimum set of tags and all tags must have beginning and end tags. To use Code View: Log in to Constant Contact. Open an existing email by clicking on its name. Click Create an Email. Navigate to the editing layout page. Click Edit in the block you wish to edit. Click Code View from the bottom of the left area. The HTML code for that particular block displays. You will see some common HTML tags: Code View User’s Guide Page 4 ©Constant Contact, Inc. All rights reserved. 04/08 &#xp000;p &#x/p00;/p iv0;div &#x/div;/div &#xtabl;table &#xtr00;tr Make the desired edits to the code. Do NOT edit the outlying table tag’s id attribute. This is Constant Contact’s internal reference, and editing it breaks the layout of your email. Save your Code View edits by clicking either Update (if you are not done), or Update & close (if you are done and want to return to your email layout). Your edits are not saved until you click “Save” in the block of the email View the results of your edits by clicking Save to exit the editing mode, then clicking Preview. Code View/HTML Best Practices Building HTML emails presents many unique problems, since the emails have to look good and meet the standards for many email clients. If you are not careful, your edits can result in the recipient not seeing what you intended for them to see. With Code View, you can make small changes to your emails. However, for best results, follow these best practices and coding constraints. Insert and format links from the Wizard, either using the Insert Link icon or editing the link within the block where it appears. If you try to edit a link using Code View, the font style information is stripped out when you send your email. For example, a link inserted from the Wizard might look like this in Code View: A title=style_PromoLink style=”FONT-WEIGHT: bold; FONT-SIZE: xx COLOR: #000000; FONT-FAMILY: href=”http://your.website.address.here/” shape=rectLearn If you change the link in Code View, the style properties are stripped and the link is a simple href tag: A 60;&#xhref;&#x=htt;&#xp://;&#xwww.;&#xmyco;&#xmpan;&#xy.co;&#xm/00;href=”http://www.mycompany.com/”Learn &#x/A00;More/A Code View User’s Guide Page 5 ©Constant Contact, Inc. All rights reserved. 04/08 Tables If you look at the HTML code for an email, you will see that it is made up of nested tables. The email itself is a larger table, each block (the greeting, introduction, coupon, etc.) is a table, and each block contains tables. You cannot edit the tables that make up the email or the blocks, but you can edit the tables within each block. Do you want to use a color not found in the Color Picker? Maybe your company’s colors are not displayed in the picker. If you know the hex code for the color, you can specify it in Code View. However, if you are trying to change a style (for example, style=”BACKGROUNDCOLOR: #eaeaea”), it is better to make the change in the Wizard, using Picker. The hex code is simply a web-based way to specify a color. There are many websites that can help you choose a Coding Standards We recommend you use well-formed HTML. For example, close every tag with an end tag. The following are some Constant Contact best practices. r/0;br/ and iv0;&#x/div;div/div Some email clients do not recognize the HTML r/0;br/ tag for specifying line breaks, and the r00;br &#x/br0;/br syntax poses display problems for other email clients. Work around these restrictions by using iv0;div to specify line breaks, as fol !-- BEGIN: spacer code in place of r/0;br/ r/0;-- iv0;divline of text to display &#x/div;/div !-- END: spacer code in place of r/0;br/ r/0;-- Some email clients will render a iv0;div tag with a double space in the email. Even though the ont;font tag is deprecated, use this tag to specify font styles. For example: font color=”#312200” face=”Arial, Helvetica, sans-serif” FONT-WEIGHT: bold;COLOR: #312200;”some text &#x/fon;&#xt000;here/font   and & The HTML standard does not support multiple blank spaces; they are treated as a single space. Use the special character to force multiple spaces. This is also useful if you want to specify a non-breaking space. If you use an ampersand (&) in your design, Constant Contact converts it to &. Code View User’s Guide Page 6 ©Constant Contact, Inc. All rights reserved. 04/08 Additional tips for use in Code View Removing the underline from a link If you prefer not to display the underline in a link, you can remove it by following these steps: While in the block containing the link, click the Code View button in the lower left. A 60;&#xhref;&#x=htt;&#xp://;&#xwww.;&#xmysi;&#xte.c;&#xom/p; ge.;&#xhtml;href=”http://www.mysite.com/page.html” To remove the underline, you will need to add some code after the quotation at the end of the URL. The code is style=”text-decoration:none” For this example, your nal link will look like this: A href=”http://www.mysite.com/page.html” style=”text- Update & Close , then click in the upper left corner to save the email. Adding a border to a block To make a block stand out in your email, you may want to add a border around the block. To add the border: the TABLE tag should say, “border=0” To create a border, change the “0” to a higher number. The higher the number, the thicker your border will be. Generally, you will only need to use 1-10. To change the color of the border: The border will default to be a gray color. To change the color, you will need to add some code to the TABLE tag. the code is “borderColor=”#XXXXXX” Here is an example of a table with a thick, red border: TABLE class=BlockMargin id=textEdit hideFocus tabIndex=0 cellSpacing=0 cellpadding=15 width=”100%” border=10 Once you have customized your border with the width and color of your choice, click Update & Close , followed by on the block, and in the upper left corner of the email. For more product tips and information, visit the Constant Contact Support Blo at SafeUnsubscribe, Speak Up, Survey 101, Survey Hints & Tips and The Smart Way to Reach Your Customers are trademarks, service marks, or registered trademarks or service marks of Constant Contact, Inc. All other company and product names may be trademarks or service marks of their respective owners. Restricted Rights Legend the Rights in Technical Data and Computer Software clauses as DFARS 252.227-7013 (October 1988) and FAR 52.227-19 (c) (June 1987). or disclosure. production is prohibited without the prior express written consent of Constant Contact, Inc. For inquiries regarding reproduction or distribution of any Constant Contact material, please contact legal@constantcontact.com. Trademarks 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication without prior notice. Copyright © 1996-2008, Constant Contact, Inc. all rights reserved. Unpublished – Rights Reserved under Code View User’s Guide
Code View User S Guide