(208) 475.3192

GET A QUOTE | FAQS

How to add new content to your custom HTML email design Email or bookmark this page

Your custom designed HTML email template is reusable for future email campaigns. However, updating your custom HTML email with new content is more involved than updating content in the free templates provided by Constant Contact and VerticalResponse.

There are two options for creating new emails that utilize your custom HTML email design:

1. Have us update the content, optimize images, and test the new email for consistency in major email clients. This is the recommended method to ensure quality control and optimal exposure for your custom emails. You can simply provide us the updated text and photo content in an email and we do the rest.

2. You update the content using Adobe Dreamweaver. This option is a viable if your organization has a professional web designer/developer on staff who:

  1. Is proficient and experienced editing HTML, CSS and managing server space via FTP.
  2. Is willing to carefully review and adhere to the instructions below.
  3. Has Adobe Dreamweaver (or another HTML editor) installed on their Mac or PC.

Instructions for updating custom HTML email content using Adobe Dreamweaver

A note to developers about HTML email code.

Be aware that by necessity the HTML code used for proper rendering across the widest selection of email clients is applied much differently then modern best-practice HTML for Websites. For example, tables are only used for layout, we cannot use background images, there is a seemingly excessive amount of styling (including redundant in-line styling for each and every content element) and there are depreciated code elements used. In many ways it's much like coding for the Web browsers of 1995. If you're experienced only developing Websites, this code may look horrid but rest assured it is in fact best-practice email HTML (We can thank Microsoft's decision to render email in archaic Word HTML engines in Outlook 2007 and Outlook 2010 for most of this).

What you'll need to start:

  1. The original HTML file containing the custom email design code. This will be provided by us.
  2. FTP Access to a public HTML subdirectory on a Web server. This may be the location we originally installed your first custom HTML email code, for example:
    http://yourwebsite.com/example/mycustomemail.html
  3. FTP Client - Recommended software: FileZilla (Free, PC and Mac).
  4. HTML Editor:
  5. You may also want separate image editing software to optimize your content photos.


Procedure:

1. Copy the original HTML email file to a new file and rename.

For example:
mycustomemail.html -> copied and renamed to -> mycustomemail2.html


2. Using your FTP client, upload your renamed file to the subdirectory you'll be using on your Web server. After uploaded you must be able to view your HTML email file using your Web browser

For example:
Upload to:
ftp://yourwebsite.com/example/mycustomemail2.html
View using your Web browser at:
http://yourwebsite.com/example/mycustomemail2.html
Note: this is just a conceptual example, your ftp/http paths may be different.

3. Open the HTML file using Adobe Dreamweaver and follow the HTML Edit Types instructions below.

4. After your edits are complete, save your file and upload and replace the exact new file you created in Step 2.

5. Install the updated code in your Email Marketing service.

VerticalResponse

Login to your account, go to Emails -> New (Choose "No Thanks" if prompted for the "upgraded" Email Editor) -> Freeform HTML

With your HTML email open in Dreamweaver select all (Ctrl - A), copy (Ctrl - C) then paste it in the VerticalResponse HTML Content area and proceed with the Next Step option on your screen. Additional help information on completing your email is available in VerticalResponse's help section of their Website.

Constant Contact

Login to your account, go to Email Marketing -> Create -> enter a name for this campaign, click next -> select Use My Own Code -> Choose HTML (not XHTML) -> Click Advanced Editor

With your HTML email open in Dreamweaver select all (Ctrl - A), copy (Ctrl - C) then paste it in the Constant Contact HTML Content area (replacing any default code that might be there). Then press the preview button from which you will be able to send a Test Email. After testing, proceed by clicking the Save & Return button. Additional help on completing your email campaign is available in Constant Contact's Help section.

HTML Edit Types

The lettered sections in this sample screen shot represent the general types of HTML edits you will be making. Your HTML email will of course have a different design and layout but the types of edits will be similar and these general instructions will be applicable.

Edit Type A: Email/Article Titles

This edit can be most easily made using Dreamweaver's WYSIWYG "Design" view.

Typically your updated content will come in the form of an email or Word document. Because custom HTML email code includes extensive in-line styling and some non-standard elements it's crucial that you update each line or paragraph one at a time using the cut and "paste special" then "text only" (Ctrl-shift-V).

  1. Cut just the title of your email or article from your email or Word document.
  2. Highlight the title in the design view of Dreamweaver
  3. Edit -> Paste Special -> Text Only (or Ctrl-shift-V)



Edit Type B: Content Area

This edit can be most easily made using Dreamweaver's WYSIWYG "Design" view.

  1. Cut text content paragraph by paragraph from your email or Word document.
  2. Highlight the paragraph you would like to replace in the design view of Dreamweaver
  3. Edit -> Paste Special -> Text Only (or Ctrl-shift-V)
  4. To add additional paragraphs: Place your cursor at the end of the last paragraph and press enter. The new paragraph will be created directly under and will automatically have the inline styling of the prior paragraph.
  5. To delete paragraphs from the old copy: Simply highlight and delete or backspace.
  6. The inline HTML phrase elements <strong>...</strong> and <em>...</em> can be used on any text using Ctrl-B and Ctrl-I. The inline presentation element <span style="...">...</span> is also fully compatible with email clients. After you add new paragraphs you can add selective styling using these elements.



Edit Type C: Photos

This edit can be most easily made using Dreamweaver's WYSIWYG "Code" view.

  1. Upload your new photo to the Web server folder (or any public HTML folder you like; the src reference will be absolute)
    For example, uploaded to:
    http://yourwebsite.com/example/yourimage.jpg
  2. Using the Code view of Dreamweaver, find the current img file in the content section you're wanting to change.
  3. Replace the old src reference with the absolute URL of the new image.
    src="http://yourwebsite.com/example/yourimage.jpg"
  4. The style, align and hspace components of the img tag must remain the same.
  5. If you've already sized and optimized your photo using Photoshop or another image editing software, switch to Design view, select the new image with your mouse, right click "resize".
  6. If you've not resized/optimized the image file, switch to Design view, select the image, resize then "optimize" in the properties window.



Edit Type D: Content Images with Hyperlinks or Text Hyperlinks.

This edit can be most easily made using Dreamweaver's WYSIWYG "Design" view.

  1. Simply select the graphic element or text selection with your mouse and change the Link in the properties window. All URL's must of course be absolute (specify the entire URL of the page
    For example:
    http://yourwebsite.com/somepage.html
    or
    http://someotherwebsite.com/somepage.html



Edit Type E: Update Your Web Version Link

This edit can be most easily made using Dreamweaver's WYSIWYG "Design" view.

  1. Select selection of your current "View this email in a Web browser" (or whatever yours says) and change the URL in the Link in the properties window.
    For example:
    http://yourwebsite.com/example/mycustomemail2.html




Next page: Design, technical & consulting services
Top