Email Design Systems are one of the most powerful tools to boost email production and improve brand consistency. But how can you implement one for your team?

In this webinar we heard from Crystal Ledesma (Manager Email Design Systems at Zillow), Matthew Smith (cofounder at Really Good Emails), and Elliot Ross (CEO at Taxi for Email) about the steps they have taken to implement Email Design Systems — and what mistakes you should avoid along the way.

Answers to your questions about Email Design Systems

A big thank you to everyone who offered a question during the webinar! Since we didn't have enough time to answer them all during the live session, we wanted to share them all here.

)As a part of a small team, what recommendations do you have to receive buy-in from individuals who haven't necessarily made emails in the past, who might not be comfortable to use the system we create and apply it themselves?)

As a first step, find out why they're uncomfortable using it. Are they uncomfortable because email marketing is unfamiliar territory? Does the Email Design System not do what they want it to do? Or are they finding new tools hard to use?

In an ideal world, you'd involve all team members who build campaigns early in the process to understand their goals, pain points, and concerns. If your team can provide input into shaping the Email Design System and the new processes that come with it,  getting buy-in is easy. 

In general though, humans are creatures of habit, and it's normal that there's insecurity — and yes, sometimes resistance — when adopting new processes and tools. Taking the time for thoughtful onboarding can do wonders. Walk them through how to use the Email Design System (and whatever tools you use to manage it and create your emails), and make it easy for everyone to ask questions and give feedback about it along the way. 

Within Taxi syntax, I see the character limit on the button. Is that something that can be enforced within Taxi? (Can Taxi actually limit the characters, or is it relying on the marketer to adhere to that limit?)

Yes, Taxi can do that! The beauty of Taxi Syntax is that you have the power to decide how your design can (and cannot) be edited — down to the details like setting character limits. 

To prevent users from going beyond your character limits, you can use the copy-limit attribute. Simply find any rich text field that you'd like to apply a copy limit to, and specify the maximum character count allowed on that field. For example, if you'd like to set a character limit on a headline, it  looks like this in Taxi Syntax:

<editable rich name="text" default="This is a headline" expect="copy-limit:50"></editable>

Once that's set up, your email creators will see a warning in the editor should they exceed a character limit, so they can tweak the copy right away — and they won't be able to export the mailing until the error is fixed. 

The copy-limit attribute is just one of many powerful Expectation attributes that let you set the rules and best practices for how your emails should be built. You can learn more about Expectations here. 

)Are there typical UX/usability testing methods that any of you have used in better ideating an ideal design system?)

Crystal shared that as the manager of the Email Design System at Zillow she heavily relied on user interviews to better understand how teammates use the system, see where they're running into issues, and collect ideas for improvements. You can facilitate interviews either by opening up office hours or actively scheduling check-in calls with those who are using your Email Design System. 

How do you account for Dark Mode when creating a new Email Design System?

There's a few tweaks you can make to your code and your email designs to help your campaigns look great in Dark Mode. If you're using these tricks in your Email Design System, that means all emails created from it will be Dark-Mode optimised. 

So what should you consider when creating an Email Design System that powers emails that look great in Dark Mode? Here's a few tips to get you started: 

• Add in the relevant Dark Mode meta tags at the top of your HTML.
  Using Dark Mode specific media queries means your email will render Dark Mode specific styles if supported in the email client.
  
• Use transparent PNGs for your images.
  Illustrations or icons are often set on a white background. If the background colour is inverted to a darker hex code, you'll be left with a white block around your images. Using transparent PNGs can lead to a much cleaner looking email design because the background colour behind the image will now match the rest of the email. If you update images and icons in your Design System — like your social media icons in the footer — that update will trickle down to every email you create.
  
• Add outlines to your logos and icons. 
  If your logo or icons are set in a dark color, there's a risk that they disappear when viewed in Dark Mode. Adding a thin white or translucent border to the darker logos is a simple way to make sure they, or any other icons, are visible for everyone.

  
  

  

• Optimize your background imagery.
  If you're working with background images to place copy on top of imagery, you're likely running into rendering issues with Dark Mode. We found that adding a coloured layer between your copy and the image can help, so we recommend adding this to your background image modules in your Email Design System. 

Want to keep learning about Email Design Systems?

Here are more great resources and how you can get one off the ground: 

• Webinar: An introduction to Email Design Systems 
  If you'd like to start with the basics, this webinar is for you. You'll learn what an Email Design System is and what benefits it can bring to your team, see examples from leading brands, understand when it's worth investing in an Email Design System (and when it isn't), and more. Watch the recording. 
• Video series: Build your Design System like the pros 
  In this video series by InVision, leading design experts share how Design Systems help you scale. While this class isn't specifically about email, there's plenty of helpful advice that applies to email, too. Definitely check out their episode on how to sell the value of your Design System and what new roles and processes can come with implementing one.

• Blog: 5 myths about Email Design Systems (and why they're simply not true) 
  You might have heard some misconceptions about Email Design Systems so frequently that you might think they're true. But it's time to bust some myths.