2017 Dec 06

MailChimp is a marketing automation platform and email marketing service that allows users and businesses to send custom designed emails that can be pre-scheduled to be sent when traffic is highest. MailChimp allows you to send beautiful mass emails to your subscribers, connect your e-commerce store, advertise, and ultimately, build your brand.

MailChimp uses HTML coding to create their email templates. Though there are some design limitations—due to the incapability of email programs to read CSS with HTML in emails—there is still a lot we can do within HTML to make the design look great. 

“Things are changing and we’re getting more creative freedom, but I don’t expect it to be near the same playing field as what you can do on a website anytime soon. And that’s fine. Our little community is scrappy and hacky, and we like it that way.” 

Alex Kelly; 
Email Developer at MailChimp 

MailChimp does allow you to import custom fonts but most of your users won’t be able to view it like that, so it would be set back to default in most email viewers. At Industrial, we choose to use fonts that can be viewed in any person's inbox from the start. Accessible design is a key part of our core design principles, so we want to make sure we deliver content to all users, regardless of the technology they are using. There is only a short list of fonts that are web safe and will be usable in all email viewers. 

Pro Tips

Stay on brand at all times. 

Use your brand's hex colours and a readable font that matches your brand's primary font. Once you have established your MailChimp template style, stick with it!

Create a master template that contains all of your graphic elements in one place.

Create a template and name it MASTER. Refine your master template until you're satisfied with the overall design. Think about the different content types that you'll need in your emails, and create a generic block of content styling that would work for each type. For example, your content types might include video, photo galleries, a feature image with paragraph and caption, body copy, typographic call to actions, headers and footers, etc. Include all of these different content blocks in your master template to ensure all of the content pieces have consistent styling. Once you're happy with your master template, save it. Don't edit it unless you have to, and educate others on your team to do the same. This will help ensure that your outgoing emails are styled consistently, no matter what content they have or who sends them. 

master temp

Replicate the master and work from it. 

Replicate the master template and delete all of the content that you don't need for that specific email. For example: You want to create an email that promotes a new product and includes a header, image, headline and description, call-to-action, and a footer. Delete all of the other content types like the video, gallery, etc. and keep all of the content blocks that you want to work with. Save this new template with a new name, say 'New Product Update Release' and you now have a consistent template to use every time you want to feature a new product. 

duplicate master

 

new template

 

Your go-to fonts to be web-safe.

If you use one of these web-safe fonts, most of your audience will view the email exactly as you have designed it: 

Sans-Serif Web Safe

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

Serif Web Safe 

  • Courier
  • Courier New
  • Georgia
  • Times
  • Times New Roman

Monospace Web Fonts

  • Courier
  • Courier New

Amp up that font size. 

Choose a legible font size of at least 16px. Add bold calls to action to sections where you want to promote an element.

We like big buttons and we cannot lie. 

Buttons should be large enough for your user to press them with their thumb on a mobile device. A button should be at least 44px high according to Apple's accessibility guidelines. There is no use in having a call to action if the user struggles to click on the button because it's too small. Large buttons attract the user's eye to an important area where you want them to take action. Those call to action buttons are your key to success. 

Get to the point.

When creating an email, keep the focus on the message you are conveying and keep the design simple and minimal. Lay out all of your information in a structure so that the most important information is at the top of the page. You have now created a hierarchy of content. This allows users to quickly scan the email or only view the top portion of the email, but still will get the point across. Make your emails clear and break up sections by using dividing lines. 

“It’s a huge thing to be invited to someone’s inbox. People are allowing your email to enter a space that is occupied by emails from their friends and family. Remember that. ”

 

Go easy on the images.

All-image emails look great... if you can see them. If not, then your viewer is losing all of the important content and completely defeating the purpose of your email. Most email systems won't load images within an email until the user clicks 'show hidden content' or 'show images', so it's best to use the least amount of images as possible. The images you use in your email should support the content, but your user shouldn't lose any information or knowledge if the image isn't there Think about it like this: if your user can't view any of the images in the email, will they still understand the meaning of the email? Make sure your meaning is communicated through the text. Images can add visual interest in an email, but don't rely on them for meaning.

Need inspiration?

Head over to MailChimp's inspiration gallery of emails.