How to Build Custom Email Templates

MailerMailer's template language allows you to create messages that are instantly editable in our cutting-edge message creation tool, MessageMaker™. Fonts, colors, borders, and more can be adjusted with the simple addition of CSS comments. If you're proficient in HTML and CSS, learning the custom template language will be a breeze.

HTML and CSS

If you're reading this, you probably already know how to code your designs so they look consistent across email clients. If you don't, here are some things to keep in mind:

Keep your email width under 600 pixels.
Wrap your email in a 100% width table.
Use nested tables to achieve your layout.
Set cellpadding and cellspacing to 0 for each table
Avoid floats or positioning.
Apply font styles and background color on the table cell <td> level. Don't rely on inheritance.
Avoid applying margin to any element.
To center align elements, apply align="center" to a wrapping <div> of undefined width.
Instead of paragraph or heading tags, use <div> or <span> tags with classes
Apply padding and borders to table cells <td> rather than tables.
Keep in mind that neighboring table cells will always match each other in height.
If you want padding on one table cell, but not its neighbor, use nesting to "isolate" the padding on an inset <td>.
Test! Test! Test! Send a preview to all your email accounts. For more thorough testing, use a testing service such as Litmus that shows you a preview of your message across numerous email clients and mobile platforms.

Inlined CSS is the best way to style your email message. Fortunately, MessageMaker automatically inlines all of your CSS so you don't have to do it yourself. Just include your CSS between two style tags at the top of your document. If you'd like to test how well your CSS can be inlined, paste your code into our Magic CSS Inliner. Unsupported CSS will be brought to your attention.
Background images can be reliably applied to the email body, but not within tables or table cells. The body background image must be assigned to the <body> element itself as well as the wrapper table of 100% width as mentioned above. For best results, use a texture or pattern that can repeat in both the x and y directions.

<body background="images/example.jpg">
<table background="images/example.jpg" id="wrapper" cellspacing="0" cellpadding="0">

Editable Content Areas

Add the mm:edit="name" attribute to a <div> wrapped around text that should be editable. When clicked, areas with this tagging open the WYSIWIG text editor with a link to your image gallery.

<div mm:edit="name">
<p>Here is some text that will be editable.</p>
</div>

The name (within quotes) that you assign is used to store user's content to the database. These names should be alphanumeric (no hyphens) and unique within the template. Logically limit editable areas (i.e. one for each article section) and do not nest these tags within one another.

Editable Image Areas

If you would like an image to be editable, add the mm:image="name" attribute to it. When clicked, editable image areas open your image gallery so that you can populate the area with a new image.

<img mm:image="name" style="max-width:260px" src="images/file.jpg" />

Like editable content area names, image names should be alphanumeric (no hyphens) and unique within the template.
You must assign a max-width and/or max-height CSS property in order to define the size of the image area. Larger images will be scaled down in order to fit, but smaller images will not be stretched. Do not include HTML width or height attributes (e.g., <img width="100"...) as those will be generated by the editor. Also, avoid the use of CSS ids or classes on editable image areas. If you need to add styles to an editable image area, such as padding or margin, place those styles on a wrapping element.
The above example referenced a default or placeholder image from within the images directory of a template bundle. However, if you want a placeholder image automatically generated for you, simply omit the "src" attribute from your image tag.

<img mm:image="name" style="max-width:260px" />

You can also reference images that are hosted on the internet. These will be imported into your image gallery.

<img mm:image="name" style="max-width:260px" src="http://www.website.com/image.jpg" />

If you like, assign a link to your editable image area by wrapping it in a link tag with an mm:related="name" attribute. This name must correspond to that of the image.

<a mm:related="name" href="http://link.com">
<img mm:image="name" style="max-width:260px" />
</a>

Alignment can also be given to your editable image area. Simply wrap the image in a <div> with an inline style setting the text-align property. As with the link, include an mm:related="name" attribute with the name corresponding to that of the image.

<div mm:related="name" style="text-align:left">
<a mm:related="name" href="http://link.com">
<img mm:image="name" style="max-width:260px" />
</a>
</div>

As shown above, to assign both a link and alignment to your editable image area, nest the link tag inside the alignment <div>. Do not place other code, such as an editable content area, inside the alignment <div>. Likewise, do not place an editable image area within an editable content area—these elements must be separate within your template.

Declaration blocks

To define CSS that is editable through the MailerMailer style toolbar, you must include specifically formatted declaration blocks. The names assigned to tabs and sub-tabs can be multiple words but must exclude special characters, such as hyphens and underscores.

/*
 * @page tab
 * @section sub tab
 * @style heading xyz
*/

The @page declaration defines from which tab in the toolbar that styles are set. These should be major zones of your message (e.g. body, header, footer, sidebar, etc). The @section declaration defines from which sub-tab in the toolbar that styles are set. These would be more specific attributes within the zone. So, under an "@Page Body" zone, you might have an "@section Background" or "@section Link Text." Both @page and @section are required within a declaration block.
The @style declaration pulls font styling into the dropdown of the WYSIWIG editor for easy styling. Font styling preceded by a declaration with the @style should have a single class as the selector, allowing it to be applied anywhere within the document. Without the @style declaration, nested text that is styled by such a class may fail to render properly within the editor.

/*
 * @page page
 * @section heading 1
 * @style heading 1
*/

.heading1 {
property: value /* editable */;
}

If you would like elements to be editable by the MailerMailer theme tool, you can use the @theme declaration. The following elements can be themed:

@theme page: defines the background color of the email
@theme main: defines the background color and text style for the email body
@theme title: defines the style of headings
@theme subtitle: defines the style of subheadings
@theme link: defines the color of links
@theme header: defines the background color and text style within the header area
@theme footer: defines the background color and text style within the footer area

/*
 * @page page
 * @section heading 1
 * @style heading 1
 * @theme title
*/

.heading1 {
color: #47191C /* @editable */;
font-size: 20px /* @editable */;
font-family: Tahoma /* @editable */;
font-weight: bold /* @editable */;
font-style: normal /* @editable */;
}

Editable properties

Within the styling below declaration blocks, properties that you wish to be editable within the MailerMailer style toolbar should be followed by /* editable */. Insert this tag after the default value, but before the semi-colon.

/*
 * @page tab
 * @section sub tab
 * @style heading xyz
*/

selector {
property: value /* editable */;
}

The following properties can be made editable.

color Value must be hexidecimal (e.g. #FFFFFF).
text-decoration Supported values include none and underline.
font-family Supported values include Tahoma, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana.
font-size Supported values include 8px, 9px, 10px, 11px, 12px, 13px, 14px, 16px, 18px, 20px, 22px, 24px, 30px, 32px, 36px, 46px, 50px, 64px, 84px, and 120px.
font-style Supported values include none, italic, and oblique.
font-weight Supported values include normal and bold.
background-color Value must be hexidecimal (e.g. #FFFFFF).
border (also border-top, border-bottom, border-left, and border-right)
Color must be hexidecimal (e.g. #FFFFFF). Supported widths include 1px, 2px, 3px, 4px, 5px, 8px, and 10px. Supported styles include none, dahsed, dotted, double, groove, inset, outset, ridge, and solid.

sagar-webworks

Monday 16 June 2014