Accentuate Your Message with a Simple MailChimp Template
Do you have a MailChimp list? Have you noticed the abundance of fancy email templates they’re pushing?
MailChimp has made it really easy to make fancy, graphics-laden emails.
But should you?
Multi-column, image-heavy emails may be appropriate for a travel agency, but in the world of designers and developers, the successful bootstrappers I follow use simply formatted emails.
Folks like Nathan Barry and Patrick McKenzie have thousands of subscribers. And after years of running their mailing lists, they’ve settled on emails with minimal formatting.
They know that over-styled, multi-column formatting pulls the reader’s attention away from your message.
Instead, you should aim for clean, minimally formatted emails that emphasize your content. This creates a more personal connection and the perception of higher value.
HTML vs. Plain Text
Should you use plain text then?
No, abandoning HTML is a mistake. With plain text, you can’t do any formatting or track opens. But you’ll want to keep the formatting simple: fonts, bold, italic, images, and clean, clickable links.
In other words, you’ll want to use HTML to enhance your message by using a minimal amount of formatting, while still retaining that “plain text,” personal feel.
Creating a Minimal HTML MailChimp Template
MailChimp doesn’t have a simple enough template out of the box.
Even the simplest “1 column” template has headers, images, and a website-like layout that you don’t want:
So, you’ll need to create your own HTML template that you can use whenever you compose a new MailChimp email.
If you follow these steps, you’ll be able to use the normal MailChimp editor when composing emails. This template is also mobile friendly, so it will render nicely on smartphones.
Here’s how to create your new template.
- In MailChimp, go to the Templates page, click the Create Template button.
- Select the Code Your Own as the starting point, and choose the Paste in code option.
-
The HTML editor will open. On the right side, select all the HTML and delete it.
-
Paste in the following HTML (here’s a GitHub repository that I keep up to date with the latest version).
- Click Save and Exit. Give the template a name when prompted.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
body {
background:white;
font-family:Arial,sans-serif;
font-size:12px;
}
.footer {
font-size:11px;
font-style:italic;
text-align:center;
color:gray;
margin-top:30px;
}
.footer a {
color:gray;
}
@media only screen and (max-width:480px) {
body{
font-size:18px !important;
-webkit-text-size-adjust:none !important;
}
}
</style>
</head>
<body>
<div mc:edit="body">
Put your email content here.
</div>
<div mc:edit="footer" class="footer">
<a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* from this list.<br /> <br />
*|LIST:ADDRESS|* <br />
*|IF:REWARDS|* *|REWARDS|* *|END:IF|*
</div>
</body>
</html>
Let’s review what’s in our minimal template.
Minimal CSS
The <style> block includes some very simple styling to get that “default Gmail” look. It also specifies a @media directive to increase the font size for tiny screens. A larger font is much easier to read on a phone.
These styles are a very simple starting point. Obviously, you can tweak them to suit your situation.
Body and Footer Sections
We designed our main div elements with the special MailChimp mc:edit=body and mc:edit=footer tags. This is what enables your template to work seamlessly with the standard MailChimp email editor.
The footer contains the MailChimp required unsubscribe and address information. If you aren’t careful with the footer, MailChimp will add its own footer to your email. For example, it’s not enough to include the *|UNSUB|* merge tag on its own. It must be within an <a> tag.
This is just a starting point. If you normally use additional merge tags, such as the *|ARCHIVE|* or *|FORWARD|* tags, you can add those in the body or footer as necessary.
Composing an email
The next time you create a campaign or autoresponder, your template will be available for use. Make sure you choose Regular ‘ol Campaign, not Plain-Text Campaign. Then, on the Template screen, click the Saved Templates category, and you should see your template.
Once you choose the template, a two-sided editor opens. You initiate editing by clicking a section on the left side (when you hover on the left, Edit markers are revealed). Then you can make your edits on the right side.
You can use the edit toolbar to set font styles and insert images, links, or merge tags. Be sure to click the well-hidden Show Extra Tools button to reveal the Merge Tags drop-down.
Any styles you apply while editing will override the styles in your template.
If you’re pasting in text from another editor, like Google Docs, be aware that sometimes the pasted HTML formatting can conflict and cause layout problems. If things don’t look right, select the text and click the Clear Formatting (eraser) button in the toolbar.
Test the email
It’s always a good idea to send a test email to verify the formatting looks good. Use the Preview and Test menu at the top of the window to send yourself a test email. View the email on both your computer and phone.
Create Your Own
This simple HTML template will accentuate your content and help create a more personal connection with your subscribers.
If you haven’t done it yet, sign in to MailChimp and create your minimal template now.
Even if you don’t use it right away, it’ll be ready for you when you compose your next campaign.
