MailChimp
For Designers
Hello
Welcome to MailChimp. Maybe you’re a freelance web designer hired to
create email templates. Maybe you work for an agency, and you’re setting
up a client’s MailChimp account, designing their templates and teaching
them how to use the application. Maybe you’re a web design consultant. In
any case, you can use MailChimp to create beautiful emails for your clients
and see to it that their email marketing plan is successful. MailChimp got its
start as a web design firm, so we’ve made it a priority to create a system
that empowers both designers and their clients.
That said, if you’re looking for a completely rebranded email marketing
solution that encourages you to charge a penny per send, then you should
look elsewhere. We don’t want you to click every button and send every
email for your clients, because as a web designer, your expertise goes far
beyond button clicking. If you agree to hold a client’s hand throughout the
entire process without teaching them anything, you’ll be forced to become
an email marketing manager and a deliverability expert and a professional
copy/paster. That’s not what you’re trained to do— and you probably
wouldn’t enjoy it, either.
Different clients will want different services—you might choose to limit your
email marketing work to template design, and that’s perfectly fine. But if
your clients are looking for more involvement from a creative agency, you
should know how to set up their account, create their templates, and teach
them how to use MailChimp so they can send their own emails.
The setup phase usually involves general MailChimp training, creating
accounts and lists, consulting your client on list management, and coding
templates. Your client might even ask you to help them determine what kind
of templates they need or how frequently they should send campaigns.
After setting up your client’s account, work with them to determine which
features they should use. Set up social sharing options like auto-tweet, and
add a signup form to their Facebook page. If your client has a blog, tell them
about our RSS-to-email feature. Look into how to make it personal.
From there, teach your client how to send a campaign, and introduce them
to MailChimp’s reports. Check in often to see how their campaigns are
going, and ask if they need any new templates. Down the road, you might
even want to look into API integration. And of course, always keep an eye on
your client’s list to make sure they’re not spamming.
Once you learn your way around MailChimp, you can apply to become an
Expert–our Experts Directory connects email marketers with creative
agencies. Now, let’s get started.
Manage Your List
In order to manage multiple clients’ email marketing plans, you need to know
how to build lists and group them. First, decide if you’re going to set up
multiple accounts, multiple lists, or just create multiple groups within one
list. Here’s the breakdown:
One list, no groups
If your client plans to send only one type of newsletter to one group of
people, and they want every one of their campaigns to go to every one of
their subscribers, then you should create one simple list in MailChimp.
One list, multiple groups
If your client plans to send different types of content to different segments of
one subscriber list, then create one list for the company, and divide it into
groups. For example: A nonprofit might have separate groups for volunteers,
news, board of directors, and more—no need to bug the board with the
volunteer schedule. And when the content applies to everyone, they can
send a campaign to the entire list.
Multiple lists
One account with multiple lists makes sense for people who have more than
one business. We know it’s tempting for web designers to set up one
agency account and a list for each client, but it’s a bad idea. We
recommend an account for each client for a few reasons: First, if you only
have one account, you can’t give your clients access to your account,
because other clients’ data is there too. Second, if certain clients take over
their own email marketing and get in trouble for spamming, then your
account will be shut down—and you could lose a lot of business over it.
Multiple accounts
Agencies that send email campaigns for different clients should create a
separate account for each client—you don’t want your data for one client
mixed with data for another. Plus, if you part ways with one client, you can
simply remove that account from your keychain (we’ll get to that later).
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. Additionally, our Drag & Drop editor makes
campaign creation quicker and simpler.
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 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:
html <!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:
html <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:
1. Make sure that when defining background images you’re using the
“background-image” property and not the compound version of
“background” as in:
css 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.
2. 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:LIST_ADDRESS_HTML| 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="|UPDATE_PROFILE|"
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:allowtext style="max-width:600px;
max-height:250px;" />
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 tests 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.
For additional information about designing your email campaigns, visit
MailChimp's Email Template Reference.
Avoid Spam
Filters
You work hard on your clients’ emails, and we wouldn’t want all that hard
work to end up in spam folders. Your clients can make sure their newsletters
go straight to their subscribers’ inboxes by learning how spam filters think.
Spam filters look at a long list of criteria to decide whether or not an email is
junk. The list of spammy criteria is constantly growing and adapting,
because spam filters learn more about what junk looks like every time
someone clicks the This is spam button.
Common mistakes to avoid
Using spammy phrases like “Click here!” or “Once in a lifetime
opportunity!”
Going crazy with exclamation points!!!!!!!
USING ALL CAPS
Coloring fonts bright red or green
Coding sloppy HTML (usually from converting a Word file)
Sending an email that’s nothing but one big image
Sending a test to multiple recipients within the same company
Warning signs that your client is spamming
Can you tell if your client is spamming? Unfortunately, it’s the most common
issue we see designers having with email marketing, and we’ve had to shut
down a lot of agencies for their clients’ bad email-marketing practices:
sloppy list management, poorly designed emails, purchased and old lists.
This stuff gets the client—and the agency—reported for spamming, and
often blacklisted.
Again, you should have a separate account for every client. If one of your
clients is spamming on your account that they share with some of your other
clients, then everyone gets shut down. And you probably lose a lot of clients
as a result.
If your client has their own account, MailChimp can be the bad cop when it
comes to spamming. But in any case, your role as an agency might be to
consult your client on email marketing best practices, so you need to notice
the way they manage their lists.
Understand Your
Reports
You’ve worked with your client to create a beautiful and unspammy
campaign, and it’s out the door. Now what? Take a look at your client’s
MailChimp reports so you can analyze the campaign’s performance and
make notes for next time.
Click the Reports tab and then on the title of the campaign. It’s especially
important for agencies to know what the reports mean, not only so they can
impress their clients with all the opens and clicks, but also so they can
make informed recommendations for upcoming campaigns. In the next
section, we’ll explain how to take it a step further by rebranding these
reports so your client can see them without having them log in to MailChimp.
Subscriber activity
If you want to know even more about your clients’ subscriber activity, click
the Reports tab, then select Subscriber activity from within an individual
report.
These reports give you extra insight about your clients’ recipients, like who
opened the emails and what they clicked. See a real-time report for each
recipient’s email activities: when they opened, what they clicked and when
they came back. You can even generate a list of people who did not open,
and send them a modified campaign.
Social tracking
MailChimp’s Social Stats allow you to watch your campaigns make their way
around Facebook. To find out how many people like your campaigns, click
Reports in your MailChimp dashboard. Select a campaign and click Social
Stats.
The like stats are located under Facebook Activity and organized by
subscriber. You can see how many times each subscriber liked your
campaign, and how many other likes they generated. Good to know!
We even track comments and analyze their sentiments with our Facebook
Comments feature.
Twitter stats are located in the same place as Facebook stats: Click the
Reports tab in your MailChimp dashboard, and you’ll see a list of all your
campaigns. Select a campaign and click Social Stats.
Under Twitter Activity, you’ll see how many times your campaign has been
tweeted and retweeted, who did the tweeting, and a timeline of all tweets.
Only tweets that include the automatically generated eepURL for your
campaign are included in this report, so you might have even more tweets
than you think.
To really dig into what these stats mean and how you can learn from them,
check out MailChimp's Understanding Reports guide.
Collaborate
You're already juggling plenty of tasks, which is why we focus so intently on
collaboration features. We realize that email is not your job, but it is a part of
your job, so we've created some features and integrations to hope you
collaborate better with your clients.
Multi-user accounts
MailChimp's multi-user accounts allow you, the account Admin, to grant
permission to Managers, Authors, and Viewers, depending on how much
access you'd like for your collaborators to have. Some people will work on
your campaign, others will send, and some will only want to see the results.
Now you can make those decisions.
Comments
Our email designer allows you to leave comments on campaigns. Start a
conversation with your coworkers, or make sure something important gets
changed. Your collaborators can respond to your comments in real time,
complete tasks, and leave their own feedback so everyone's on the same
page.
Experts
If you’re a freelancer or agency looking for work, and you know your way
around MailChimp, then check out our Experts program. Experts are
freelancers and agencies who know email design, coding, and programming.
We have a lot of customers who need help with their email marketing— with
list importing, HTML email design, API programming, e-commerce and more.
MailChimp’s Experts database gives users a list of third parties who can
help them.
You can learn more and register to become an expert at
experts.mailchimp.com.
Keep Your Data
Safe
MailChimp has lots of security measures in place to keep your data safe.
But when you’re responsible for your clients’ email lists, it’s especially
important to stay informed and paranoid when it comes to security.
Security questions
MailChimp asks you to create security questions for your account, so that if
we ever detect anything weird, like a login from a suspicious IP, we can ask
one of the secret questions to make sure you’re the one logging in to your
account. You have an option to force the security questions whenever we
detect a login to your account from a different IP that you normally use. This
is a great way for creative agencies to keep their clients’ data super safe.
To activate the security-question feature, log in to MailChimp and click
Account > Username/Password & Security Settings. Check the Ask
Security Question When Your Location Changes under Security
Questions.
Email/SMS notifications
If you want to go the extra mile when it comes to email security, sign up for
our security notifications. We’ll send you an alert via text message or email
whenever we detect any of the following:
A login to your account
An API key has been generated
An account key has been created
Your contact info has been changed
Someone has attempted to download your list
To activate the feature, log in to MailChimp and click Username/Password
& Security Settings. Under Notifications, fill in your mobile number, or your
email address if you’d prefer email alerts.
Now you’ll get a simple message every time a security event is triggered
within your account. We’ll include the IP address and approximate
geolocation, to give you an idea of where the attempt is coming from.
AlterEgo
AlterEgo is the two-factor security web app we created to add an extra layer
for thwarting phishing attacks and breaches caused by insecure passwords.
It works by generating a temporary auth code only accessible on a user’s
mobile devices, and requires that code for entry. We offer a 2% discount for
any MailChimp user that activates AlterEgo. Think of it as a "good driver
discount" you’d get from your insurance company.
MailChimp takes security extremely seriously. But you have a responsibility
to protect your clients’ data too, so make sure you’re using a safe password
for your MailChimp account that you don’t use anywhere else, and stay on
top of our security updates. Check out our Email Security guide for tips on
how to protect your data and what to do if you get hacked.
We appreciate what you do as a web designer. Our creative users are
special to us, and we work hard to make MailChimp a product that you’re
excited to use and share with your friends and colleagues. Thanks for taking
the time to learn your way around MailChimp. If you have any questions or
suggestions, feel free to contact our support team at
mailchimp.com/support.
