You are here

Using the HTML Editor Tool

The HTML Editor is a free self-service tool provided to help you build and edit your newsletter e-mails. If you follow the workflow starting with using one of the provided stationery in conjunction with "Inline My Email" e-mail preflight tool—and also test your delivery results—it is possible to deliver more sophisticated e-mail designs with less effort than previous methods.

What is it good for?

  • Editing content of an e-mail newsletter which has been setup by a designer or experienced HTML person.
  • Simple interface for HTML source code editing.
  • Adding pre-defined snippets of HTML code to your page.
  • Creating and editing content using pre-defined styles set up by a designer.

 

What is it not good for?

  • Using without knowing basic principles of HTML & CSS.
  • Use as a Full-fledged HTML IDE (Integrated Development Environment).
  • Major structural changes to your e-mail design best left to a designer.
  • Redefining primary styling of content throughout the design.

 

While this tool provides a What You See Is What You Get (WYSIWYG) visual interface for editing your e-mail content, it does not preclude having no HTML & CSS knowledge. University Development and Alumni Relations is not responsible for any technical or visual problems that may arise with your e-mail designs as a result of using this tool, nor are we obligated to review your codebase. We provide instructions for basic use in the resources below, but the user will need to know how to add images, links, edit content and modify the source code which is formed as the underlying structure. For instance, all images are required to be edited in Photoshop and saved at the resolution used in the e-mail. In addition, images should be uploaded to the Convio image library or your own server for insertion into the e-mail.

If these concepts are unclear or unfamiliar in any way, we recommend taking one of the HTML or web courses offered by UC Learning Center prior to designing or editing HTML e-mail. 

A simplified diagram of the recommended methodology is as follows. Note that if changes to code are necessary, such as after testing, start at #1 to make changes and follow steps again:

HTML E-mail Methodology

  1. Edit content with HTML Editor
  2. Save your work!
  3. Click "Inline My Email"
  4. Paste code from "Inline My Email" output into Convio Message body and send a test.
  5. DO NOT copy code back to step 1 to make changes! Simply start over beginning at step one.

 

A use-case example

  1. Staff with HTML experience (the designer) redesigns stationery branded to match your college website by starting with the V2 HTML stationery.
  2. The designer edits in Dreamweaver or other editor, processes by clicking "Inline My Email", then sends test via Convio.
    (Testing e-mail from Convio is the best way to accurately determine results)
  3. Once the design looks good, the designer loads the code into the HTML E-Mail Editor Tool on this site, and saves a starter copy of the new stationery.
  4. A staff member opens the new stationery and begins changing text, headings, images, and may add HTML snippets via the snippets tool. Changes are saved as a newly named file for future access.
  5. The staff member processes the code with "Inline My Email" and copies the result of processing out of it and pastes into Convio's HTML message area.
  6. The staff member sends one or more tests and evaluates the success of the message design. If changes are needed, the staff member returns to editing with the HTML Editor Tool, and repeats by processing changes through the "Inline My Email" tool a second time, then to Convio a second time. The staff member never copies the "inlined" code back to the Editor.
  7. The staff member sends the final e-mail from Convio.