When creating custom email templates with MailChimp's email template language, there are some basic guidelines you should follow. These guidelines are intended to serve as a foundation for best practices when using MailChimp's template language.
This is an advanced feature and is recommended for users familiar with custom coding. Contact your developer, or hire a MailChimp Expert if you need assistance.
Email layouts should be no wider than 600 pixels to allow proper viewing in various email clients. The Email Client CSS Support page in our Email Template Reference provides a thorough list of supported CSS styles for different types of email clients.
As a general rule, avoid using the following CSS in your templates:
- Background images (they don't work in Microsoft Outlook or in 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 article for the correct syntax of the names that can be used.
Limit the number of editable spaces in the template to keep things simple 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 unique content. If you switch templates after writing content, you could lose the copy if the editable space names aren't consistent. Use the following conventions for common content areas. See More Examples.
- 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="body" used to name the body 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.
If you're editing hideable sections in the Campaign Builder using the remove button in your template, please note that the section won't disappear in the editor screen but will appear faded as a placeholder in case you decide to use the space. That section will not appear in your sent campaign. To preview your campaign, click Preview and Test and then click Enter Preview Mode.
The remove and hide this section buttons don't offer the same functionality in the Template editor. In fact, you can't actually remove anything while working in the Template editor. If you need to make changes like that, we suggest you work in the Campaign Builder instead.
You should get creative with the use of merge tags.
- Use social merge tags to provide your subscribers with new ways to connect with you over Facebook and Twitter and easily 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 Customize Your Footer Content for a quick overview of the merge tags that you can include.
Always include the required CAN-SPAM info in the footer. Otherwise, your campaign could be rejected. These required tags are also noted under Customize Your Footer Content.
When using links within your email, 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!)
Test your templates by creating a campaign and then customizing the template. This stress test can help you to make sure the template will work well for others who might be using it in different situations.