Things To Keep In Mind When designing your template, it is important to remember that you are designing for email and not necessarily the web. Here are a few pointers:
  • Use table based layouts instead of CSS based.
  • Use inline CSS to provide a default style for your content.
  • Optimize images for the web.
  • Less is more. Keeping your layouts simple will help to reduce rendering problems.
  • All templates MUST be XHTML compliant.

Terms You Need To Know

We'll begin by taking a look at some common terms you'll see throughout this post.
  • Block - Blocks are editable regions in your template. For example, the logo, article header, and article content may all be editable blocks.
  • Attribute - Attributes define the specifics of a block, such as the font style or appearance of content placed into the block.
  • Section - Sections are areas in the template that the user can clone in order to extend the template to accommodate additional content. Sections can contain one or more blocks.

Coding Templates

You'll be using div tags to create template blocks. Attributes can be added to these tags to define the block, and also how the end-user will supply content for the block. Thus, a template-specific tag would take the following form:
 
Technically, these attribute additions would make the div tag not XHTML-compliant. However, this doesn't affect the XHTML compliance of any messages based on templates since the end user's content would replace the extended div tags before messages are sent.

Attributes

Each template-specific div tag can have the following six attributes:
  • block - The block attribute is required to make an editable block. Any div tag that does not have this attribute will not be editable. Set the block attribute to a number to create an editable block. A good way of keeping track of your editable blocks is to assign them sequential numbers. For example the first editable block of your template would use block="1" as it's block attribute, and the next editable block would use block="2".
  • key - Each block tag has its own unique key, a simple word that enables the template system to differentiate one block from another. This attribute is also required for all editable blocks. key attributes may only contain letters, numbers and underscores. No spaces are allowed. Also, it is recommended to keep the id in lowercase in order to ensure that the template is as transferable as possible. Here is an example of this attribute: key="heading_1". The keys should follow a consistent naming convention.
  • linked - linked is an optional attribute that you can use to create linked template blocks. For all blocks that you wish to link, set the linked attribute to the same value. For example, linked="1". By doing so, all blocks with the same key attribute that are set to linked="1" will change to reflect the same content when one of them is edited. This attribute is useful for repeated content within the template, such as a date or section headings included in both the message table of contents and the message body.
  • name - The name attribute is an optional attribute that determines the label the end-user will see when editing a template. Here is an example: name="Title". If you do not set the name attribute, then the key value will display in the template editor.
  • description - The description attribute is an optional attribute that determines the label that the end-user will see below the block name when editing a template. Here is an example: description="The title of your newsletter".
  • display - The display attribute is another required attribute. It determines the type of form control used by the end user when composing a message based on the template. Available display types are plain, plainlarge, rich, image, and link:
    • plain will load a one line input box.
    • plainlarge will load a multi-line text area.
    • rich will load the standard WYSIWYG editor.
    • image will allow for the selection of an image. The user can browse and select images stored in the hosting area, or specify the URL of the desired image. Also, the user can specify a URL to go when that image is clicked, a border for the image, alt tag text, and horizontal and vertical padding for the image. You'll want to make sure to use a border size of "0" if you apply a URL to an image, otherwise you'll get an unattractive blue border.
    • link allows the user to enter the URL for an a href="". For example, the display attribute may appear as: display="rich"
So, here is one last look at a standard editable block tag that can be used in your template:
Main Header can be placed here.

 

Repeatable Sections

Repeatable Sections are areas in the template that can be cloned in order to extend the template to accommodate additional content. For example, a newsletter template may be coded to have a repeatable section containing a section header and a section body, with each header/body section designed to represent an "article" for the newsletter. This type of design would allow the end-user to clone the section as many times as necessary to accommodate the story sections intended for the newsletter.

Coding Repeatable Sections

To specify a repeatable section, add the section attribute to the div or span tags that wrap the template blocks you wish to group in the section. For example:
 

 
This example would repeat the logo section and body and allow you to place different content into each repeatable section. You can have more than one repeatable section in a template. Sections can only be wrapped around other div tags or block-level elements, such as p or table. You cannot use sections to add columns or rows to a table.

Using Repeatable Sections

Repeatable sections are denoted in the template UI with a dotted red outline and a green "add" icon in the upper-right corner that allows the user to clone the section. After cloning a section, a new section will appear that displays the default section content. You will be able to add new content to this section. Also, you can reorder or delete the cloned sections by using the "up", "down", and "delete" icons which are described in the Using The Template Editor section of this document.

Example Code

Below, you will find an example of a completely coded custom template. You can copy and paste this example code and use it as a reference for creating your own custom template. You could also see what this example custom template looks like by copying and pasting the code into a text editor or HTML editor, saving the file as an HTML file, and then opening the HTML file in a browser. Additionally, the screen shot at the top of this post shows what the example template code actually looks like. To copy the example code, scroll to the top of the code example and move your cursor over the top right side of the code example. 
    Example Template Design
 
 
 
 
   
 
 
   
 
 
 
 
This body section will use WYSIWYG editor to insert images or text. Mauris molestie sapien nec diam. In vehicula rutrum augue. Maecenas hendrerit lorem sed leo. Mauris congue odio nec nisi. Proin neque. Maecenas auctor. Donec turpis. Cras nunc. Donec non nulla. Curabitur fringilla, nisi pretium fringilla consectetur, ligula lorem iaculis ligula, in malesuada justo mi et lectus.
  
 
 		  
 
 
 
 
 
   
 
 
Another Side Headline Here
 
 
 
This body section will use WYSIWYG editor to insert images or text. Mauris molestie sapien nec diam. In vehicula rutrum augue. Maecenas hendrerit lorem sed leo.
  
 
 
 		  
 
 
 		  
 
 		  
 
 
 
 
   
 
Main Headline Goes Here
 
 
 
This body section will use WYSIWYG editor to insert images or text or a survey. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque odio a lorem. Aliquam mauris. Pellentesque nec dolor.
  
 
 
 		  
 
 
  
 
 
 
Visit Widgets.com!
 
%%!account_address%% %%!account_telephone%% Unsubscribe | Manage Preferences | Forward to a Friend
 
  

 

Upload And Go

After the web page is designed and coded, add the template tags as described below to define which sections of the template will be editable. The final step is to upload the template and all related images. To begin uploading a template, go to Content->Templates and click Upload Template. Below is a screenshot of what the template will look like to someone using in your account. Designing your own templates can open the door to a lot of innovative and creative design options. If you have any questions or need some advice, feel free to leave a comment below.

John Gunther
Technical Writer/eLearning Specialist at Bronto Editor of Brontoversity