MailChimp

Guidelines for Getting Started

These guidelines are intended to serve as a foundation for "best practices" when creating custom email templates via the email template language.

CSS Styling

Your email's layout should be no wider than 600 pixels in order to allow proper viewing in the world's various email clients.

You can use Campaign Monitor's wonderful reference as a primer to what CSS is supported in major email clients: http://www.campaignmonitor.com/css/

As a general rule, you should avoid using the following CSS in your templates:

• Floats
• Positioning
• Background images (they don't work in Microsoft Outlook or within Gmail)

Remember to set the @theme declaration in your CSS for the page background, header, footer and content space so templates can be quickly customized with the MailChimp color themes. Refer to the "Template Styles" section for the correct syntax of the names that can be used.

Editable Sections

It's a good idea to limit the number of editable spaces in the template to keep things simple, and you should name all editable spaces consistently. The name you assign via mc:edit="somename" is used to create a field in the database to store the user's content. If they switch templates after writing content, they could lose their copy if the editable space names aren't consistent. Use the following conventions for common content areas:

• mc:edit="header - used to name the header of your email
• mc:edit="header_image" - used to name an editable header image
• mc:edit="sidecolumn" - used to name an editable left- or right-side column
• mc:edit="main" - used to name the main content space of your email
• mc:edit="footer" - used to name the footer of your email

You should not place editable images within an editable content container.

Merge Tags

You should be creative with the use of merge tags. Use the social merge tags to provide readers of your email new ways to connect with you and share your content. Use The table of contents merge tag (*|MC:TOC|*) to create an automatic list of links to the <h1> and <h2> headings in an email. You can refer to the "Important Merge Tags" section for a quick overview of the merge tags that you should include.

Always include the required CAN-SPAM info in the footer (*|UNSUB|* *|LIST:DESCRIPTION|* *|LIST:ADDRESS|*), otherwise your campaign could be rejected.

External Links

When using links within your email, make sure to include the target="_blank" attribute in your anchor elements to ensure they open a new browser window or tab when emails are viewed in browser based email clients. Make an effort to include these handy links in your email:

• A link for users to update their subscription preferences:
  <a href="*|UPDATE_PROFILE|*" target="_blank">change subscription preferences</a>
• A link to let users view the email in a browser:
  <a href="*|ARCHIVE|*" target="_blank">view this email in a browser</a>
• A link to your website:
  <a href="*|LIST:URL|*" target="_blank">visit our website</a>
• A link to let users forward the email to a friend, usually somewhere prominent:
  <a href="*|FORWARD|*" target="_blank">forward to a friend</a>
  (It's a good idea to make a cool button treatment for it where possible to encourage sharing!)

Testing

Once you've created a template, put test it in a campaign and try customizing it by changing its colors, adding content, and anything else that would go into creating a new campaign. This "stress test" can help you to make sure the template will work well for others who might be using it in different situations.

Creating Editable Template Styles

Declaration Block

To be added to CSS to define areas in a template where style is editable through the MailChimp email property inspector.

• @tab: (required) defines from which tab in the property inspector styles can be set.
• @section: (optional) defines from which tab sub-section in the property inspector styles can be set. This is optional, but recommended when you have a number of editable styles. Too many editable styles in one section or grouped in no sections can make it harder to find edit options.
• @tip: (optional) guidance to be shown in the property inspector indicating how best to use styles or controls.
• @theme: (optional) if you would like the colors of your template to be changeable via the MailChimp color theme tool, use the following theme definitions in your CSS:
  • @theme page: defines the background color of the email.
  • @theme main: should be on the main body section of the campaign for text color and fonts
  • @theme header: should be used for the background color of the "view in this browser" section or left off entirely
  • @theme title: defines the foreground, size, and font of titles
  • @theme subtitle: defines the foreground, size, and font of subtitles

/**
* @tab Body
* @section title style
* @tip Titles and headlines in your message body. Make them easy to read.
* @theme title
*/
.title {
/*@editable*/ font-size: 24px;
/*@editable*/ font-weight: bold;
/*@editable*/ color: #8b0000;
/*@editable*/ font-family: Georgia;
/*@editable*/ line-height: 150%;
}

Declaration - /*@editable*/

Defines a single editable style.

/*@editable*/ property: value;

Creating Editable Template Content Areas

Editable Content Area - mc:edit="section-name"

Attribute added to elements whose content should be editable. Will open WYSIWIG text editor. The attribute value should alpha-numeric, and unique. Edit values can not be the same as any other in your template.

<td class="defaultText" mc:edit="main">
<h2 class="title">Primary Heading</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis.</p>
<h3 class="subTitle">Subheading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</td>

Editable Image Area

Attribute added to image elements that are editable. Will open image upload/edit window. The attribute value should alpha-numeric, and unique. Edit values can not be the same as any other in your template.

<img mc:edit="postcard" style="max-width:600px;" />

Editable Image Header With Header Designer - mc:allowdesigner

Attribute added to header image to allow user to design the header image using the MailChimp header designer tool.

<img mc:edit="header_image" mc:allowdesigner mc:allowtext />

Editable Text Header - mc:allowtext

Attribute added to header image to allow user to set a text heading instead of using an image.

<img mc:edit="header_image" mc:allowdesigner mc:allowtext />

Repeating Content Area

Defines a content block that can be repeatedly added to the template.

<div class="article" mc:repeatable>
<h3 mc:edit="article_title">Title</h3>
<p mc:edit="article_content">Content</p>
</div>

Important Merge Tags

detailed list of merge tags »

Unsubscribe Link - *|UNSUB|*

<a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* from this list.

Forward to a Friend Link - *|FORWARD|*

<a href="*|FORWARD|*">Forward</a> this email to a friend

Update Profile Link - *|UPDATE_PROFILE|*

<a href="*|UPDATE_PROFILE|*">Update your profile</a>

List Address (for CAN SPAM compliance) - *|HTML:LIST_ADDRESS_HTML|*

<p>Our mailing address is</p>
<p>*|HTML:LIST_ADDRESS_HTML|*</p>

List Description (for CAN-SPAM compliance) - *|LIST:DESCRIPTION|*

*|LIST:DESCRIPTION|*

Monkey Rewards Badge - *|HTML:REWARDS|*

*|IF:REWARDS|*
*|HTML:REWARDS|*
*|END:IF|*