Mailchimp For Designers
Mailchimp For Designers
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.
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.
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:
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 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.
If you’re providing your own code, choose Import. If you want to create a
template for your clients, choose Code Your Own.
If you’re using a DOCTYPE declaration in your HTML email, you should use
the Transitional Doctype:
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
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:
<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
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
<a href="|UPDATE_PROFILE|"
target="_blank">change subscription
preferences</a>
A link for users to update their subscription preferences.
(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.
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.
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.
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
Comments
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.
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.
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:
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.