The Technical Side of ConnectedView Email Templates

Email_Diagram1Do you like building your own HTML email templates in a third party’s software like Dreamweaver or Notepad Plus Plus?

Or maybe your business just has an old email template that was created by an independent designer.

If so, you may have noticed that when you upload those templates into ConnectedView, some of the great functionality inside our HTML editor doesn’t always work the way it should. For example, our HTML editor allows you to reorganize your email template’s layout by dragging and dropping the individual layout blocks.  For this functionality to work, certain ID tags need to be included in the templates to help our editor recognize the different parts. So we figured we would take the time to share with you how we construct our template so that with a couple tweaks you can get the best experience with our software and your templates.

First off, let me explain some of the terms I’ll be using in this post. The most basic breakdown of an HTML file consists of two parts – the Head and the Body. The head of an HTML file is where you would insert the Meta data, template title, and CSS for the file. It’s important to know that this part of the code will not be visible to the readers. The body section on the other hand is for all the coding that people will see. This is where all of your content and inline styles will go and also where all your ID tags will go.

ConnectedView email templates consist of four parts that are all inserted into the body of the HTML file: There is the container, which contains the header, layout blocks and footer. Below are the descriptions for each of these parts and the instructions on what you need to include in your template to enable all of the editor’s functionality.

Email_Diagram2

The Body

The body is the outer most table of our template; it is what gives the template its background color. In order to help the software identify the body table, we put an id of “cv-body” inside of the body’s table tag.

<table id=”cv-body”>

The Container

The container table is what gives the template its width and the background color for the email content. It also holds the Header, Footer and any other Layout Blocks.  To help the software identify the container table, place an id of “cv-container” inside of the container’s table tag.

<table id=”cv-container”>

The Header

The software has a predesigned header that you can use in your templates. If you would like to use this header, you will need to create a table with an id of “cv-header-wrap” at the top of your email inside the container. Then, inside of that table, place a “td” tag with an id of “cv-header-container”.

<table id=”cv-header-wrap” width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td id=”cv-header-container”></td>
</tr>
</table>

The Layout Blocks

Your email template should be built using separate building blocks or tables. Each table can be constructed to hold your desired content and can be customized with columns and rows. These tables can also be stacked on top of one another –this gives you the option of moving them around by dragging and dropping them in the Layout Section of the Email Editor. In order for each layout block to be recognized by the software, you need to add the class “cv-layout-block” to each content table tag.

<table class=”cv-layout-block”>

The Footer

The software also has a predesigned footer that can be added to your template. If you would like to use this footer, you will need to add a table with an id of “cv-footer-wrap” at the bottom of your email inside the container. Then, inside of that table, place a “td” tag with an id of “cv-footer-container”.

<table id=”cv-footer-wrap” width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td id=”cv-footer-container”></td>
</tr>
</table>

It’s really that easy! By following these simple steps when constructing your HTML code, you’ll have a template that is not only beautiful, but one that will also work correctly with all of the ConnectedView HTML editor functionality.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>