Email Design Systems: Bite-Size Templates for Accessible and Consistent Branding

There’s a lot to keep up with when it comes to good email design, especially in terms of accessibility. The need to have an eye-catching design is always a challenge for email marketers in order to get subscribers to start scrolling. Luckily, you can make this process easier on yourself by using an email design system.

We recently hosted a YouTube Live webinar with Stack Overflow’s Ted Goas and Email on Acid’s Karlene Swalley to chat about design systems and making them accessible. Here’s what they had to say.

Watch the Webinar

While the exact definition varies, Ted stands by this one:

Ted says to think of it as lightweight scaffolding and guidelines to assemble an email with, rather than creating one from scratch. “Imagine it like a LEGO set: a collection of individual pieces that can mix and match to build something unique each time. Having a design system means email marketers don’t have to create their own LEGOs. They only need to assemble them.”

Their modular structure allows team members the flexibility to move them around and play with the layout.

Similar, but not an exact match. Design systems are pre-designed components of an email, so they’re like templates of certain email elements.

If this brick represents an email, the LEGOs make up its individual component templates.

Now, let’s talk about what happens when organizations don’t have email design systems in place.

Design systems add flexibility and scale to a business. With larger organizations, scalability is a must, but smaller companies can benefit from design systems too. In smaller organizations, marketers wear multiple hats, so having pre-designed email components significantly streamlines the email creation process.

An email design system saves time and money by codifying common email components, improving email consistency, and educating the team around how to build proper emails.

Some email marketing programs, such as Stack Overflow’s, decentralize their email production. Meaning, multiple teams might work on an email, but they don’t always talk to each other. This creates an environment where emails can be:

• Inconsistently designed and off-brand because there is no shared record of email design.
• Expensive to make, due to spending a lot of time recreating the same components.
• Often broken messages, because no one person specializes in email and folks aren’t sure they are “doing it right.”

Stack Overflow sends millions of emails every week, so this was a big problem at their scale. Their email design process was completely undocumented and every email was treated as a one-off, making things slow, inconsistent, hard to test, and difficult to maintain as teams grew and work volume increased.

Building emails that are accessible means you’re able to reach more subscribers. This can drive greater ROI and have a noticeable impact on a brand’s bottom line.

Design systems by nature allow flexibility for email marketers. Every team should make the choice for themselves based on their users, goals, and business needs. With that, design system components should be kept flexible and ultimately serve the needs of the team.

Having enough modules available so the email marketing folks can quickly and easily assemble an email is key. All components of the design system should be made accessible and thoroughly QA’d and tested prior to use. And of course, once the email is assembled, it needs to undergo one final test to ensure it will render as intended.

Ted’s main suggestion is to not let “great” be the enemy of “good.” Ship the design system or groups of components as early as you can, even if it’s only a small handful. A few simple assets can help a lot of people, but not if they’re sitting on your personal computer where no one can access them. Shipping early allows other folks to start using the design systems right away. You might even get some interesting feedback that will help you understand where folks are struggling and what you can build next to help them.

This varies greatly across teams and organizations, depending on culture and working style. What works well for one team may not make sense for another.

The beauty of starting this process is that it first shows you just how differently everyone on your team thinks about email.

At Stack Overflow, they brainstorm ideas in a Google Doc. This lowers the barrier to entry and allows everyone to collaborate without having to be familiar with code or technical software.

This low-barrier collaboration, where no one needs technical knowledge to participate, can show you where to focus your initial efforts. It might even be necessary in some cases to pull in the brand manager or creative director. They’ll be able to ensure each aspect of the design system stays on brand.

Getting buy-in across your organization is also key, along with involving your email team early on so their voices are heard.

Design should be collaborative, so an email design system’s goal isn’t to eliminate the need for a designer. Rather, it allows other team members to build properly designed, on-brand emails without needing to be email experts. This can drastically cut down on the amount of time a designer spends on each email. As a result, it affords scalability which has a tremendous impact on productivity, and therefore a brand’s ROI.

Freeing up design time for larger campaign work also allows an organization to recognize more ROI from not only those campaigns, but deploying more emails.

Since Stack Overflow’s launching of their design system, Ted has seen folks with little email experience build some pretty nice emails on their own.

Every email should be tested every time. When you run an email test, you are really checking your content. And not just the obvious things like spelling and grammar, but the behind-the-scenes elements like your title, preheader, alt text and body copy. Plus, email clients are changing all the time and often don’t make formal announcements, so you want to be sure you’re testing against the latest versions on live clients.

Using a design system doesn’t negate the need for testing and QA. It simply allows the process to be faster (and usually, error-free)!

According to the World Health Organization (WHO), approximately 1.3 billion people worldwide live with a form of visual impairment, which is about 17% of the global population. Approximately 36 million people worldwide are blind. Designing emails that ensure all people, including those with visual impairments, can read and understand is not just good marketing, it’s also good for your bottom line. Making emails accessible is just as much of a strategic decision as it is an inclusive one.

There are three main components that make an email accessible: copy, design, and code.

Write copy everyone can understand. Simple words, short sentences, and a consistent structure for calls-to-action (CTA) all help keep an email accessible. Avoid things like jargon, inappropriate jokes, and cultural references that can exclude people.

Design with accessibility in mind. Ensure your emails have a mix of text and imagery, a scannable structure, and a color contrast that passes Web Content Accessibility Guidelines (WCAG 2.0 AAA).

Accessible design includes:

• Good contrast ratio. This is especially important for older readers whose eyesight may not be what it used to, and also for subscribers who suffer from color blindness. To that end, keep fonts at a minimum of 14 pixels and use a contrast checker (like the one available in Campaign Precheck) to ensure the text color is legible against the background color.
• Accessible links with indicators. Depending on the type of color blindness a subscriber may have, they may not be able to easily see a link or CTA. Indicate text links with bolding, underline, or even a special character, and make sure CTA buttons are apparent.
• Strategic alt text on all non-decorative images. Don’t duplicate alt text or start with “Image of” because screen readers already preface alt text by saying “Image of”. Having a good handle on best alt text practices is very helpful to connect meaningfully with screen reader users.

Code for both email clients and assistive technologies. Little coding changes can significantly improve an email’s accessibility (and therefore, your chance of achieving a click).

Accessible code includes:

• Semantic HTML tags (headings, paragraphs, lists) so screen readers can differentiate between headings and paragraphs. This makes it easier for someone who is listening to easily digest the content and navigate your emails.
• Set the language attribute. This may not seem like much, but setting it tells screen readers how to pronounce or display your email.
• Include role=”presentation” on tables so screen readers don’t read the table’s structure aloud. It’s not a pleasant listening experience and detracts from the quality of the message.
• Hide decorative elements from screen readers using Accessible Rich Internet Applications (ARIA) roles.

There are many other things you can do to make your emails accessible. Campaign Precheck removes the manual lift and guides you through a series of robust content and accessibility checks, which offer click-to-fix capabilities (patent pending) that can automatically make ADA-compliant code adjustments for you. The end result is a polished message that can be understood by all subscribers.

The first step to scaling accessibility is baking it right into your design system components. When accessibility is baked into the root of each component, it will spread much more quickly throughout an organization’s email ecosystem. Including accessible code samples or starter templates ensures accessibility each time those components are used in an email. Pre-testing the modules of a design system will certainly help with scalability as well.

Stack Overflow has seen success scaling email accessibility by baking it into their own design system, including code samples and starter templates:

• Tables have ARIA labels included.
• Text is defined in semantic HTML tags (<h1>, <h2>, <p>, etc.).
• Color contrasts pass WCAG guidelines.
• Images have alt attributes.

As we’ve mentioned, baking a few small things into a design system’s components go a long way in making an email design system accessible.

Ted also strongly cautions against skimping on the design system’s documentation. The documentation is a shared record of the team’s knowledge, so it’s the most important piece of a design system to maintain. It’s best to note and explain all the ways to improve email accessibility in those docs, including technical details (like ARIA roles) as well as recommendations for creating accessible copy and visual designs.

Another thing Ted suggests is to test a design system’s code in assistive technologies: using screen readers; turning on the voice and accessibility options on mobile devices; navigating an email with a keyboard; and listening to how emails sound when read by assistive technologies.

To get the latest accessibility standards in email marketing and apply them to your emails, check out our recent white paper with eye-opening stats and actionable accessibility measures you can implement today to boost email ROI!