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 Basicoption 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:
<!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, andbackground-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: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: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-heightrule 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 anmc: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’stemplating 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, visitmailchimp.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, visitMailChimp’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 list.
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 theReports 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 Reportsin 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 Reportstab 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.
Like this:
Like Loading...
2014: A Comprehensive Guide to Online Politics for Campaigns & Advocates”, available in the Amazon store for the Kindle e-reader and as a PDFn Epolitics.com.
