Month: May 2017

Budgeted Fun: How a Design System Can Facilitate Innovation

Innovation is the holy grail of email marketing. With so many amazing resources (looking at you Justin Khoo), your team can feel substantial pressure from shareholders or fellow team members to create the next unique experience. However, we rarely have unlimited resources and/or time to implement these kinetic technologies.

Email teams (internal and agency-based, both large and small) tend to share a common approach to their email programs: a one-size-fits-all system that creates emails from either templates or one-offs. But what if there’s a better way?

Alternatively, if teams create a design system for their emails, they would be better equipped to build a sustainable email program that allows for efficiency, as well as innovation. Or as we like to call it, “budgeted fun.”

What is a Design System?

I’m often asked how long it takes for me to create an email, but there are entirely too many variables to provide an all-inclusive, standardized time. Ultimately, a marketing campaign’s level of effort is better determined by the functionality and components contained within the email, as opposed to the quantity of emails. By building a system of components to collate from, a lot of the repetitive work can be automated.

What problems does it solve for?

  • Efficiency: Pre-defining the components within the design system will allow your team to complete a lot of the work upfront. This provides time and resources to then focus on innovation, testing, and new campaigns.
  • Consistency: Establishing guardrails around colors, fonts, and spacing (and even messaging) will remove rogue deviations, thus creating a clean, cohesively branded campaign.
  • Aesthetic Fatigue: Often email marketers create one-off campaigns to offer something fresh to their subscribers. A design system allows you to automate the structure, providing more time to focus on the creative without blowing through your budget.
  • Adaptable: Templates lack the ability to really evolve—any evolution in a template is essentially a redesign. Instead, a design system encourages continual adaptation. You can test single components within the system and reiterate to better address data findings and keep up with your subscriber’s demands.
  • Easier QA: To address the reality of testing an email in 55 different clients, while maintaining our sanity, a design system helps to approach new innovations by taking a step back and breaking the email into smaller, more manageable parts. It also allows you to make adjustments to the code as new clients are released without requiring a complete template overhaul.
  • Shared Vocabulary: Strategists, copywriters, designers and developers are forced to think about how their decisions affect the broader design system. In this approach, no one department is responsible for “enforcing” the rules or restrictions of the approach. Rather, the entire team informs how the design system is created.

Style tiles help facilitate conversations about the campaign goals and help maintain a shared vocabulary

What can be defined as a component in a design system?

  • Color Palette: Establish a brand color palette with a small amount of supporting colors. Identify whether the color is used for a call-to-action, background, text element, etc. It will allow you to test the contrast for accessibility and avoid color combinations that are illegible.
  • Call-to-Actions: Identify the styling for all call-to-action items, including buttons and text links. Styling should include spacing, borders, font sizes, and colors, as well as messaging guidelines to help determine if including a text link or button is appropriate.
  • Fonts: Select a font that closely aligns with the fonts used on your other digital properties, then define the font-stack to include fallback fonts. This will show how the original web font degrades across different email clients, helping to set expectations with your shareholders.
  • Typography: Define the font family, font weight, font size, line height, as well as letter-spacing of headlines, subheads, body copy, and other supplemental copy. Include content hierarchy suggestions to help ensure the copy is accessible by a screen reader.
  • Images: Classify preferred image ratios, cropping, and treatment. This could include a hero image that is 600px wide (at full-width) or a secondary, square image with a solid, black 10px border. This will aid in imagery selection and creation.
  • Iconography: Determine guidelines around icon creation including stroke weight, colors, sizing, and use cases. In addition, create a repository of current icons to allow for easy selection.
  • Voice + Tone: As a brand, your voice may not change much, but the tone will have to adapt to the goal of the campaign. Identify how your brand will approach different use cases, such as sales messaging, personalization, and urgency, to help garner trust and interest from your subscribers.

There are many, many more components you can include in your design system, but don’t be overwhelmed! A design system is meant to be a living, breathing entity that you can refine and iterate on over time. Check out this gallery of brand design systems for more inspiration.

I’m sold! How do I get my boss and/or client to sign off on something like this?

One of the best exercises to provide a scope of work and buy-in from your shareholders is a template inventory. A template inventory captures unique elements and outliers to help identify inconsistencies across your email marketing campaigns. If you discover that there are seven unique styles of CTAs or 16 different font sizes and weights, this could translate into a lot of hours that could have been reduced, had a design system been in place.

After completing an audit, you can create style tiles or element collages that demonstrate color, type, and texture to facilitate crucial conversations about overall design direction and how they relate to the project’s goals. Clients and team members are able to better appreciate the idea of a design system by actually seeing the steps laid out in front of them.

Lastly, approach a design system as you would a marathon, not a sprint. You’re laying the foundation for campaigns to come and will only build to improve as time and testing goes on. Once your design system creates efficiencies in your campaign builds, you can start focusing on the facets of email marketing you are truly passionate about.

Don’t guess, test!

As always, whenever you’re making changes to your email development process it’s important to ensure you test ever iteration. That’s why we offer a 7 day free trial of our testing suite.

Tutorial: Implementing Navigation Controls in Image Carousels for Email

This is the final follow up to the Animated Image Carousel for Email tutorial series. In this article, we will go over how to add navigation arrows as and thumbnails to manually transition from one image to another.

See the completed example here.

The Checkbox Method

As can be seen in this tutorial, the checkbox is the workhorse of interactivity in email. Using labels that target checkboxes and radio buttons we can control which image is displayed will depend on which checkbox or radio element is in the “:checked” state.

.radio1:checked ~ .container .img1{ display: block }
.radio2:checked ~ .container .img2{ display: block }

Stopping the Animation

Since the carousel will animate by default, we’d want the carousel to stop animating when any radio element is checked. This can be achieved by setting the animation of animating elements to “none”.

.radio:checked ~ .container * {
  -webkit-animation: none;

Left and right navigation controls

As mentioned earlier, we can control the display of images by having labels that target radio elements that hide or display certain images.

We implement left and right navigation controls by absolute positioning a set of left and right navigation on each image consisting of labels that target the radio elements keyed to the next or previous image. This would mean if we had 3 images, we’d need 6 labels, 3 sets of left and right labels.

[ Carousel code ]

We can display arrows in the labels by using images or CSS techniques like this or this.

  .carousel .car-ltn,
    .carousel .car-rtn {
      width: 10%;
      height: 100%;
      position: absolute;
    .car-ltn {
    .car-rtn {

    .carousel .car-ltn::after,
    .carousel .car-rtn::after {
      content: '';
      width: 0; 
      height: 0; 
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      position: absolute;
      -webkit-filter: drop-shadow(1px 1.5px 1px rgba(0,0,0,.4));

    .car-ltn::after {
      border-right: 8px solid #ffffff; 
      left: 30%;
    .car-rtn::after {
      border-left: 8px solid #ffffff;
      right: 30%;

In order to only display a set of left and right labels, we absolutely position them over each other and keyed to be displayed using the radio :checked technique as well.

  .carousel .car-ltn,
    .carousel .car-rtn {
      display: none;

     .carousel .car-cont .car-nav-1 {
   /* they will overlap when displayed */
    .car-radio2:checked ~ .car-cont .car-controls .car-nav-2,
    .car-radio3:checked ~ .car-cont .car-controls .car-nav-3 {

Here’s the final code (Click on the View Code link).

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!

4 Reasons Why Segmenting Your Lists Dramatically Impacts Your Success

Gone are the days when digital marketers would send the same generic email blast to their subscribers. Now, every savvy digital marketer knows that segmenting their email marketing list is key to running successful email campaigns.

In fact, many customers have come to expect this high level of personalization. A report from AgilOne found that 79 percent of U.S. consumers expected personalized experiences with the brands they shopped with and that 50 percent expected them to remember their past purchases.

Fortunately, it is easier than ever for eCommerce marketers to meet these high expectations. Now, we have automated marketing tools that allow us to easily segment our email list, giving subscribers the personalized experience they crave.

With the abundance of affordable marketing tools these days, there isn’t a reason to not segment your email lists. Not doing so can significantly hurt your online store’s success. If you aren’t convinced yet, here are four major reasons why your ability to segment your email marketing list is directly tied to your success.

1) Improves Customer Satisfaction

Everyone is different, so why would you send them all the same email? By segmenting your email list, you can satisfy your customer’s needs by sending them offers and content that are tailored to them specifically. This will improve the customer experience and increase their chances of converting.

For example, let’s say that you have customers who purchased a skincare item from your eCommerce store. Because this item will eventually run out, you can build a customer segment based on customers who purchased this item and send them a gentle reminder to reorder before they run out of the product. Not only can this increase your conversions, but many customers are grateful for the reminder.

What’s more, this segmentation strategy goes far beyond satisfying a single customer. A happy customer wants to share their experiences with everyone, which means that segmenting your emails can lead to more referrals. According to a Nielson Trust Study, referrals from family and friends are the most trustworthy type of marketing.

Simply put, segmenting your email list satisfies current customers and can potentially expand your customer base.

2) Boosts Open and Click-Through Rates

If you want more people to open your emails and click the links inside them, then sending them relevant content is a must. By segmenting your email marketing list, you can significantly increase both of these key metrics.

There are many ways in which you can increase your opens through email segmentation. One effective strategy is to build segments based on where they are at in the customer journey. For instance, you could segment subscribers by those who are highly engaged with your content and send them targeted offers.

As for the subscribers who aren’t engaged with your content, segmentation can be invaluable as well. Marketers can segment those who aren’t engaged and set up a re-engagement campaign to try to bring them back.

A good example of this can be seen with Quip, an online collaboration tool. After not using Quip for an extended period of time, you may receive a reminder email like the one below:

This gentle reminder may be all it takes to get a subscriber or customer to re-engage. If they aren’t responsive, then it’s important to take them off your email list. These inactive users may reduce your Sender Score, which could end up hurting your email deliverability.

3) Recaptures Lost Leads

Shopping cart abandonment is a problem that plagues all eCommerce merchants. According to Baymard Institute, the average shopping cart abandonment rate is at 69.23 percent.

Consumers abandon their shopping carts for all sorts of reasons, but the good news is that you can bring them back with the power of segmentation and retargeting. You can set up automated triggered emails, which helps recover lost sales and win back your customers.

The great thing about segmenting your email list is that you can recapture lost leads no matter where they are at in the sales cycle. Sending targeted emails that re-engage them at the right time will maximize your conversions and have a huge impact on your store’s success.

4) Builds and Sustains Customer Relationships

Gaining new subscribers and customers is important, but nurturing the relationships you have with existing customers is key to building a loyal customer base. If you need reminding how valuable loyal customers are to your online store, then consider this study by Adobe which found that repeat customers are 9x more likely to convert than a first-time shopper.

People have subscribed to receive your emails because they have faith that you will provide them something of value. By segmenting your subscribers based on their interests, you can send them personalized content that they will enjoy.

You can also take advantage of segmentation by setting up triggered emails that welcome new subscribers or send discounts to subscribers on their birthday. With an automated marketing platform, this is incredibly easy to set up and a great way to boost loyalty in your subscribers.

Segmenting your email list is also essential for online merchants who have their own loyalty programs. Sending these members exclusive content and promotions is an effective way to keep them subscribed and further increase revenue and profitability.

Final Words

If you aren’t convinced that email segmentation can bring you a better ROI, there are plenty of success stories that may sway you on the matter. Consumers demand personalized and highly targeted messages and those who don’t provide will find themselves falling behind. By segmenting your email list, you can increase the impact of your message and boost your bottom line.

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished segmenting your lists, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!