Design Your Campaign
Ready to design a campaign? First, you’ll choose or create a template. We have tons of Predesigned templates to choose from, or you can choose the Basic option for a simple layout. But as a web designer, you probably want to create your own.
If you’re providing your own code, choose Import. If you want to create a template for your clients, choose Code Your Own.
MailChimp’s powerful yet simple template language makes it easy to code your own HTML emails that will allow your clients to adjust colors, fonts and more—without breaking the layout or messing with your code. And our template language uses CSS comments and a few special HTML attributes, so you don’t have to waste your time learning another language. (But if you’re not proficient in HTML and CSS, then using our template language isn’t your best bet.)
If you’re using a DOCTYPE declaration in your HTML email, you should use the Transitional Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
You should also use this meta tag in conjunction:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
CSS styling
Inlining CSS styles is the standard for making sure template designs retain their integrity within an email client. If you’re designing a template for yourself, this isn’t an issue. But if you’re designing for a client, inlining the CSS styling by default within the markup keeps them from making style changes to any editable sections within a template using the app’s editor. That happens because the inline styles always override what a user enters. Emails leaving our system have their CSS automatically inlined, so it’s not necessary to do it beforehand—it’s only necessary to ensure that the CSS styling would behave correctly in the first place.
Your email’s layout should be no wider than 600 pixels in order to allow proper viewing in most email clients. As a rule, avoid using floats and positioning in your email templates.
Remember to set the @theme declaration in your CSS for the page background, header, footer, and content space, so the templates can be quickly customized with MailChimp color themes.
Background images
You can use background images in templates, but getting them to work consistently across all email clients is tricky at best. Consider yourself warned. Using the “background-image” CSS property declaration to set a background image on an element is probably second nature for you—but unfortunately, a lot of email clients disregard the convention.
So if you plan to use background images, you need to know which clients support them, and which will require you to do a little more work to make sure your design is consistent across multiple platforms. These major email clients do support the background-image property:
- Yahoo
- Gmail
- AOL
- Apple Mail
These major email clients don’t support the background-image property:
- Hotmail
- Outlook
- Lotus Notes
What can you do to make sure your email looks best across all clients? Two things:
Make sure that when defining background images you’re using the “background-image” property and not the compound version of “background” as in:
background:#FFFFFF url("bg-image.jpg") repeat;
Using individual properties (like background-image, background-repeat, and background-color) instead can overcome issues of partial CSS support where the client doesn’t understand compound values in a CSS property.
Use the often ignored “bgcolor” and “background” HTML attributes on your table and body tags. This can circumvent your CSS issues completely, since you’re using HTML code that’s older but still well supported.
Ideally, you’d have something like this:
<head>
<style>
#email {
background-image:url("bg-image.jpg");
background-color:#336699;
}
</style>
</head>
<body>
<table background="bg-image.jpg" bgcolor="#336699" id="email">
table stuff here, just like 1999!
</table>
</body>
Editable Sections
All mc:edit areas must have unique names (like mc:edit=”box1” and mc:edit=”box2”). Template content is attached to these names and stored in the database accordingly—so regardless of where in a template the mc:edit area is, if it shares a name with any other area, it’s going to duplicate any content entered (and it can trigger the loss of content). For simplicity’s sake, you should limit the number of editable spaces in your template and 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 the editable spaces aren’t consistent, and your client switches templates after writing the content, they could lose their copy. Use these conventions for common content areas:
mc:edit="header"
to name your email’s header
mc:edit="header_image"
to name an editable header image
mc:edit="sidecolumn"
to name an editable left or right side column
mc:edit="main"
to name the main content space
mc:edit="footer"
to name your email’s footer
And remember, don’t place editable images within an editable content container.
Merge Tags
The following five merge tags should always be included within your templates (generally in or near the footer);
*|UNSUB|*
unsubscribe link
*|FORWARD|*
forward to a friend link
*|UPDATE_PROFILE|*
update profile link
*|HTML:LIST_ADDRESS_HTML|*
list address
*|LIST:DESCRIPTION|*
list description
The *|UNSUB|*, *|HTML:LISTADDRESSHTML|\* and *|LIST:DESCRIPTION|\* are required by law under the CAN-SPAM Act. If you don’t use them, your campaign might get rejected.
We’ve got lots more great merge tags you can place in your templates—check out our merge tag cheat sheet for a longer list.
External Links
When you’re including links in an email, include the target=”_blank” attribute in your anchor elements to make them open a new browser window or tab when emails are viewed in web-based email clients. Here are some handy links to include:
<a href="*|UPDATEPROFILE|*" target="blank">change subscription preferences</a>
A link for users to update their subscription preferences.
<a href="*|ARCHIVE|*" target="_blank">view this email in a browser</a>
A link to let users view the email in a browser.
<a href="*|LIST:URL|*" target="_blank">visit our website</a>
A link to your website.
<a href="*|FORWARD|*" target="_blank">forward to a friend</a>
A link to let users forward the email to a friend, usually somewhere prominent.
(It’s a good idea to make a cool button treatment for it where possible to encourage sharing.)
Declaration Blocks
MailChimp requires that you define editable CSS styles using declaration blocks. The formatting is pretty specific:
**/
* @tab WWWW
* @section XXXX
* @tip YYYY
* @theme ZZZZ
/*
@tab
The @tab declaration establishes a tab within the template editor. It’s best to keep these broad (think Page, Header, Body, Footer). This is the only required declaration.
@section
The @section declaration establishes a subsection within a tab, and allows you to split styles into more specific areas. For example: In “@tab Page” you could have subsections like “background”, “title” and “subtitle”—anything broad enough to be applied to the email as a whole. This declaration isn’t required, but it keeps the editor from becoming too complex.
@tip
The @tip declaration allows for a short line of helper text that appears when a user is editing styles within the app. It’s not required, but it’s helpful if the style being edited could be confusing.
@theme
The @theme is used to set five specific default styles: “page,” “main,” “header,” “title” and “subtitle.” Once they’re set, the user can call on these styles to be automatically applied to selected text or areas within the template. In order for a heading to work correctly (title or subtitle), the CSS class has to be set correctly: either .title or .subTitle.
Only these five arguments are used in @theme, so it’s not necessary to set @theme for anything else. The “page” theme defines a standard background color for an email. The “main” theme defines an email’s default font style and color. The “header” theme should be used for the background color of the “View in this browser” (preheader) section, or leave it off entirely. The “title” theme defines the email’s primary heading. The “subtitle” theme defines the email’s secondary heading.
Editable Content Areas
Add the mc:edit=”section-name” attribute to any elements with content that should be editable. The attribute opens the WYSIWYG text editor. Its value should be alpha-numeric and unique, and edit values can’t be the same as any other in your template.
Editable Image Areas
An editable image within a template can take a few attributes in order to allow users to insert the content they want. An editable image structure follows a normal img tag html structure, with our attributes added, and with specific CSS rules:
<img src="xxx.jpg" mc:allowdesigner mc:allowtext style="max-width:600px; max-height:250px;" />
mc:allowdesigner
The mc:allowdesigner attribute lets the user trigger the header designer. This one’s only needed for the 600px images that are a main focal point of a template—it’s not necessary for smaller content images.
mc:allowtext
The mc:allowtext attribute lets the user replace an image with text. Again, this is only needed on large-scale images (like header images), and it shouldn’t be used on content images.
We strongly recommend using the max-width CSS rule in order to keep an image from blowing out the set width of the template. The app supports the max-height rule too. When these rules are used on an img tag, they constrain the image size and show size limitations on an editable image within the app’s template design screens.
Repeating Content Areas
mc:repeatable
The mc:repeatable attribute defines a content block that can be repeatedly added to the template. When using mc:repeatable, make sure to use proper nesting of items. An mc:repeatable section should never be contained within an mc:edit section. Instead, nest your mc:edit sections within your mc:repeatable blocks. Never nest mc:repeatable blocks within other mc:repeatable blocks, mc:edit areas within other mc:edit areas, or mc:edit images within mc:edit areas.
Template Design Best Practices
Don’t wrap your email’s content text in standard HTML
tags if other people are going to use your template—avoiding unnecessary tags will help minimize confusion and errors if part of the tag is deleted within the editor. To style your content, simply target the container it’s in with CSS, instead of targeting the content itself.
A simple way to set up your editable styles is to alphabetize your CSS rules. Don’t go overboard with providing editable styles—try not to repeat styles from section to section if a global style will have the same effect. And try to pare down the number of styles you have for any particular item. For example: With heading styles, only consider color, font family, font size, and font weight as your editable styles—this will help keep a lightweight editor interface.
Leaving out a title in the email template can bring up some difficulties when using social sharing functions. It’s best to include the html title tag and include the *|MC:SUBJECT|\* merge tag within it. This allows the campaign title to be pulled in automatically.
Save your template under My Templates, without content and with your necessary editable areas, and use it to create your campaigns instead of replicating a campaign and re-editing previous content every time you want to send.
Check out our template language resources for more info on MailChimp’s templating language, tutorials and email template packs and plugins.
Testing Your Templates
Don’t forget to thoroughly test your templates. MailChimp has a spam filter checker (look for Inbox Inspector under your Account tab) that’ll tell you exactly what your email’s spam score is, and what you need to change if you want to improve your chances with spam filters. It will also show you what your campaign’s going to look like in all the major email applications. For more information, visit For more information, visit mailchimp.com/features/inboxinspector.
Inbox Inspector is an awesome tool for testing your email before sending, but consider it just one tool in your toolbox. Practical testing, by creating different accounts with different email services and sending to them, can also help you get your templates just right. It pays to research just which CSS rules email services and clients render correctly, and which ones are ignored.
Designer Templates
If don’t want to create your own template, we’ve got predesigned templates to choose from—including our exclusive designer templates. We asked some of our favorite designers to create email templates that anyone can use. They designed 24 newsletter, event and product templates that are available for free to all MailChimp users. Here’s a sample of the beautiful designs by Khoi Vinh, Jon Hicks, Dan Rubin, Veerle Pieters, Elliot Jay Stocks, Mike Kus, Matthew Smith, and MetaLab. Find designer templates in the Predesigned section of MailChimp’s template gallery.
