Welcome to fusionSpan

Resources - Bridging gaps through technology

Blog Home
5 Ways to Improve Your Next Email Campaign in Mailchimp
By Pravin Shewale and Komal Chauhan | November 5, 2020

In today’s age of social media and digital transformation, email is often overlooked as a marketing tool to effectively use to reach members. Email campaigns are an inexpensive option for associations to reach a large group of members and are even still relied upon as the primary form of communication.

One email marketing tool that fusionSPAN’s Digital Strategy team assists clients with is Mailchimp. Though it may seem to be one of the more inexpensive marketing tools, Mailchimp is one of the more commonly used platforms throughout the association space due to its ability to automate marketing efforts and provide users with the ability to design creative and interactive email templates.

At its core, Mailchimp is an all-in-one marketing platform that shares emails, ads, and other messages with audiences. These email messages are referred to as “campaigns” when created in the platform. Campaigns provide flexible settings and design options, as well as tools that help users build and create the best email templates for their target audience. 

Getting Started in Mailchimp

It is important to understand the skill set required to create email campaigns in your organization’s Mailchimp platform. By default, you can create campaigns using Layouts, Themes, and Code Your Own Templates.

Layouts and Themes are two easy-to-use features, as they include drag-and-drop content blocks consisting of various options. They do not contain complex code and are rather easy to maintain.

On the other hand, the Code Your Own feature, which is also called import HTML, import zip file, or paste in code, requires the Mailchimp user to have a strong working knowledge of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). Learning the required HTML and CSS can take a long time for team members that do not have a basic understanding of computer programming languages.

Therefore, if associations want to leverage custom HTML features (which is the preferred method for organizations sending frequent and/or complex communications), they need to have a team member on staff who knows HTML and CSS well or leverage a partner such as fusionSPAN.

Five Ways to Improve Your Emails

When creating a new campaign, users can add designs either via drag-and-drop templates or through a coded template of their own. Let’s explore the five best practices that the fusionSPAN team recommends to improve your next email marketing campaign!

1. Understand Content Blocks in Regards to Layout, Theme, and Code Your Own Templates

Email templates and landing pages can be easily created in Mailchimp with drag-and-drop content blocks, available in both Layout and Theme templates. There are a variety of content block types for users to implement when creating email campaigns, such as text boxes, RSS feeds, dividers, images, buttons, signup forms, and more! Content blocks are designed to be easy to use and can be dragged horizontally or vertically throughout your email template to provide the required outcome. In fact, depending on the content block, there are various styles and settings features to allow for even more customization of your content.

 

It is important to keep in mind that custom coded email templates do not contain the drag-and-drop content blocks. Creating a Custom HTML email is not much different than coding a website, as the same design tools are used to produce your result. Using Mailchimp’s template language, users can add editable regions to their custom coded email templates.

To get started creating custom email templates, you will select the “Code Your Own” template option. Code all structures using the table element. For more complicated layouts, you should nest tables to build complex structures. Remember that leveraging the Code Your Own feature will require a front-end designer with an intermediate working knowledge of HTML and CSS.

2. Use Background Colors in Your Template Designs

Mailchimp email structure is divided into three basic parts: header, email body, and footer. When designing campaigns, you can actually assign different background colors to each part of your email. By default, the Mailchimp content blocks do not allow you to assign a background color to the full content block, and will always keep some default padding. 

In terms of HTML, coding all structures using the table element allows users to nest tables to build complex structures. The background color can be customized in each of those table element structures/content blocks. Having background colors implemented throughout your email will help differentiate sections and create a more attractive design. 

3. Insert Buttons To Share Links

The Button content block creates a button in your email that links to a website or file to download. Buttons are a great way to call out a particular link that you want readers to click, drive visitors to a particular product on your online store, and more.

The drag-and-drop Button block allows for various alignment, width, and style options to most effectively design a call-to-action in your email. In fact, the Style tab allows you to adjust settings for the border, corners, background, font, font size, and padding. Keep in mind that you can not use custom padding for a button you insert, as it will assign the same amount of padding to the top, right, bottom, and left side. Additionally, you can not use any icon or image under the button style.

In terms of HTML customization, button width is dependent on the amount of text inside of the table cell. Within the cell, you can design your button coded to your exact requirements. Users can code custom padding, icons, or images for buttons in their email campaigns. While it is sometimes difficult to edit the custom HTML button within Mailchimp, it allows for more customization that an image or drag-and-drop content block would.

4. Leverage Social Media Icons

To make the most of your Mailchimp email template, you will want to give your readers a way to share what you have sent and interact with it on social platforms. The social follow content blocks will give you the option to add social profile links to your email or page, whereas the share content blocks will allow readers to share your content on social media. Like buttons, inserting social media icons will allow you to create more interactive content for your readers. As with other content blocks, the social follow and share content blocks allow for a variety of design and display options within the style and settings tabs. Furthermore, creating custom email templates via code allow you to use a wide range of social icons and can be easily adjusted as your campaign design requires.

5. Don’t Forget About Mobile Responsiveness

Mobile responsiveness is an incredibly important yet often overlooked aspect of marketing campaigns. Chances are a good portion of your audience views your emails on a mobile browser, and could very well make up the majority of your email viewers depending on the target audience.

By default, Mailchimp campaign templates use responsive design to adjust the layout of your campaign to appear correctly on any device. Each content block in the Campaign Builder includes a Mobile Styles section, where you can change designs as your campaign requires. However, not every device handles responsive code the same way, which in turn can make your campaign appear slightly different on mobile format than in a web browser. This is where having an HTML and CSS expert is not so much of a want as a need.

Resolving Mobile Issues Via HTML/CSS

To resolve mobile responsive issues, media queries are used in the code to modify email template layouts depending on screen size. It is necessary to inline CSS styles, either by hand or through automation, before an email is sent. Since media query styles work on a trigger, and are not default styles, it does not make sense to inline any of it. Therefore, the email’s normal CSS needs to be inlined and the media query CSS needs to override those styles once it is triggered.

Media queries use an @media rule to determine whether or not to include a block of CSS properties. They consist of three parts: the media type, a condition, and the styles that need to be applied. If this is not the case, your inline CSS is used. Media queries are specified in the <head> section of the document and only work when embedded in the HTML. This means that you cannot use media queries as inline styles. Inline styles have the highest specificity in the cascade, it’s necessary for every media query style rule you write needs to be marked with an !important declaration. With this declaration in your code, you override all the inline styles.

Contact fusionSPAN for More Assistance!

As you can see, Mailchimp allows for a great deal of customization on top of their out-of-box templates. Users have the choice to build emails and pages using drag-and-drop content blocks on a variety of templates or have the option to build out completely customized content of their own via code.

While the standard templates and designs would work for some basic communications, building out any sort of complex email or page requires a significant amount of HTML and CSS knowledge. For more complex or frequent communications, a custom HTML design would be a much better fit for any organization looking to deliver the most value to members. Don’t hesitate to reach out to our talented Digital Strategy team here at fusionSPAN for more resources and assistance!

Pravin is a UI Developer with 6-plus years of experience in collaborating with creative and development teams on the execution of ideas and projects. He enjoys the opportunity to help grow fusionSpan’s in SF Pardot templates and complete projects across web and SF department and is also well-versed in email template creation such as Pardot, Mailchimp, and HubSpot.

Komal brings three years of information technology and service industry experience to the team, and is experienced in both the Software Development Lifecycle and various automation tools. She has extensive Salesforce experience, including Sales and Service cloud, and is also well-versed in tools such as Pardot, Mailchimp, and Hubspot. Komal is passionate about learning new things and enhancing her skills to deliver the best marketing automation solution possible to clients.

Follow Us on Twitter!

Latest News