Can Accessible Design Help Brand Emails Break Through?
Learn how to design a modern email for audiences of all abilities by using the new Salesforce builder
Given customers still prefer email over any other channel, you want to make sure everything that hits a customer’s inbox makes the maximum impact. So what do today’s most popular email designs have in common?
Many are incorporating bold colors, large headline text, and fun illustrations like the example below.
This showcases personality and simplicity. It also proves how digital accessibility standards are easily attainable. Keeping them in mind benefits everyone. And people with a variety of capabilities can independently engage with your content.
Now, building these designs is more straightforward than ever. You don’t need specialized knowledge about HTML tables or CSS support. While our team loves coders and developers, we don’t think you need to be one to build an email for Salesforce.
In this article, we’ll show you how to design one of today’s most popular email layouts — and we’ll do it using Salesforce’s email template builder.
The email builder lets you quickly construct your design and test personalization as you go along.
Let’s Build an Example
We’ll build the content sections from top to bottom. For each one, I’ll cover the benefits and, most importantly, the step-by-step playbook for how to create it.
Content Section 1: Header
The first bit of content is our main call to action. This section works well because the heading is clear and simple and it’s readable at a glance. Remember, the most important part of your content is the text. Make sure it’s large enough to read easily, and that there’s sufficient contrast on any device. For large text (14pt/19px+), WCAG 2.0 level AA requires a contrast ratio of at least 3:1; for smaller text, the ratio is 4.5:1.
Section 1 Steps:
- Open up an email record in the builder
- Add a personalized pre-header
- Set the background color for the email and the content body on the Style tab
- Add an image block and upload the logo (alt text: Brand Name)
- Use a Rich Text block for the Header and set all the text to H1
- Use a contrast checker to make sure the contrast between the text and background is < 3:1.
Here, our white text on a purple background (#1E0953) has a 17:1 contrast ratio.
So we’re good to go!
Content Section 2: Illustration & Button Image
The illustration adds context without being distracting and the nearby button action is clear. It’s also worth noting that your choice of illustration or image can be an inclusive consideration. Libraries that prioritize diversity like Blush or unDraw provide thoughtful illustrations that can be customized to match your brand. For stock images, consider a resource like Tonl or The Gender Spectrum Collection to better represent the diversity of your community.
In addition, always include well-written alt text for important (non-decorative) images. Alt text allows people with visual impairments to understand what the image is communicating — and it’s especially important for email. Many recipients have images disabled by default, which means the alt text is all they’ll see.
Section 2 Steps:
- Add an image block and upload the illustration (Our alt text here: “Person standing outdoors happily listening to headphones”)
- Use a Rich Text block for the paragraph and set all the text to H3
- Use a contrast checker to make sure the contrast between the text and the background is at least 3:1 (here the light purple (
#a67ac7) leaves us with a 5:1 contrast ratio) - Add a simple button component for the call to action. Note: Linked text should describe what’s going to happen when it’s clicked (here: Reserve your spot now)
- Ensure the contrast ratio is high enough
- Add padding to ensure the button is large enough to be easily selectable on any device.
Content Section 3: Related Content
We’re halfway done! It’s a great idea to include additional links and resources given your call to action may not interest everyone. Keep the branded theme going by using more illustrations and keeping the tone consistent.
Section 3 Steps:
- Add a Rich Text component for the header text and set it to H2
- Add 2-column rows (image on the left and text on the right)
- Add a row component directly.
- Add a column and set the width to 6/12 to even them out
- Hop over to the Style tab and set Column Alignment to “Middle” to keep everything looking neat
- Add an image block and upload the illustrations (alt text not required as they repeat the text beside them)
- Add a rich text component with an H3 header for the linked CTA
- Add a button component but this time remove the background color and additional padding. Instead, underline so it looks like a standard link
- Duplicate the row of content
- Replace the images, text & link
Finally, it’s always a good idea to have a trusted group of reviewers with diverse backgrounds to give feedback before things are completed. We can all benefit from a range of viewpoints and experiences!
Building Great Emails Takes Practice
One maxim that’s remained consistent over the decades of email’s domination: the best way to get better at sending email is by sending more emails. That’s not to say you should send emails too often — instead, look for opportunities to send emails to smaller segments and experiment with design, content, and subject lines.
Salesforce’s builders allow you to learn the interface deeply and apply that knowledge while building all sorts of content — from emails and landing pages to websites and communities.
It’s true that writing HTML and CSS directly will always provide the most design flexibility. However, it can lead to wasted time and energy in your workflow. This is especially true for personalized emails with merge fields or conditional logic. Responsive email code is generated for you — so, if you can build it, you can trust it’ll look great to your customers as well. Plus, Salesforce builders are increasingly integrated across products. This way, you’ll be able to reuse your work and uploaded assets in many cases — an evergreen wish of email professionals.
Now, Salesforce Designers can save time and keep companies on brand more easily with builders.
Interested in expanding your Salesforce skills and gathering with Trailblazers worldwide? Sign up at no cost for TrailheadX (airing virtually on June 23) and select “Designer” in the dropdown. RSVP today.
Ready for more email best practices? Skill up with our Trailhead module that shows you how to create an email template in Pardot Lightning App.
Learn more about Salesforce Design at www.salesforce.com/design.
Follow us on Twitter at @SalesforceUX.
Check out the Salesforce Lightning Design System.
Take design-focused content on Trailhead:
Designing for Accessibility: Contrast Ratio
A Practical Guide for Developing Accessible Products
7 Things Every Designer Needs to Know about Accessibility
Designing Accessible Builder Apps
