Palantir and Zeta Global announce strategic partnership.Read News
Cutting corners in email design might save time, but it’s costing you customers.
Productivity hacks that skip best practices can tank engagement and slash revenue. In fact, every dollar saved can cost ten times more in lost conversions.
Here are four shortcuts that sabotage performance, and how to build smarter, faster emails instead.
Designing emails as one big image is fast. It also allows your company to avoid making any brand guideline compromises on email fonts or anything else.
But emails aren’t print campaigns. Technical pitfalls can derail your message in multiple ways. Sometimes images don’t load because of low bandwidth or image blocking by users or security features. Voice assistants and assistive technologies for people with visual challenges can’t read text that’s embedded in images. In each of those cases, the subscriber is unable to engage with your message, which hurts your campaign’s performance. And if it happens enough, they’ll opt out from future campaigns, which hurts your email program’s performance long term.
Image-based emails are bad for human audiences, and they’re bad for AI audiences, too. The AI summary features in Gmail, Apple Mail, and Yahoo Mail can’t read graphical text, which may lead to error messages or inaccurate summaries. All-image emails also ignore user preferences like dark mode. When you do that, you’re prioritising brand control over the user experience and user comfort.
Instead of embedding your text in images, use HTML text wherever you can. A good guideline is the 60/40 Rule: an email should be 60% visuals and 40% HTML text. This balance keeps content both beautiful and usable, for humans and AIs.
In terms of fonts, feel free to use a custom font, but you’ll need to define a font family of fallbacks for those cases when an inbox doesn’t support your preferred font, or even your preferred second choice. This introduces some variability to how your email will render, but what’s important in inboxes is clear communication, not pixel-perfect rendering.
Coded into individual images, alternative (alt) text is displayed when those images are blocked or fail to load, and in some inboxes, when subscribers hover over those images. Alt text is also read by voice assistants and screen readers, which are used by people with vision challenges, cognitive disorders, and mobility restrictions. Most AI summary features currently in inboxes ignore alt text, making HTML the preferred choice whenever possible.
Writing alt text takes time, especially good alt text. That’s why some marketers are tempted to skip it.
First, understand that not every image needs alt text. Leave an image’s alt tag empty (alt=””) when the image is:
All other images likely deserve to have alt text, which you should keep short, limiting it to under 120 characters. Here are some common cases and the appropriate alt text.
Finally, if an image is linked and therefore functional, you’ll want to include wording in the alt text that describes what happens when a subscriber follows the link, like alt=”8 foot aluminum ladder – buy now.”
Ultimately, crafting appropriate alt text comes down to understanding the intent behind every image in your email. Alt text should offer context and insight into why this particular image was included by the brand.
Color is one of your most powerful design tools, but it has limitations. If the contrast ratio between your text and the background color or image is too low, the text becomes hard to read. This is especially true if an email is viewed on a mobile device outside in bright sunlight.
Achieving a strong contrast ratio is even more challenging when you understand that not everyone perceives color in the same way. Around 1 billion people globally live with vision impairments, and about 300 million experience color blindness. Designing only for those with typical color vision alienates a massive audience.
Rather than leaving contrast ratios to chance, use tools like the WebAIM Contrast Checker and AudioEye’s Color Contrast Checker to ensure you’re achieving at least the WCAG recommended 4.5:1 ratio for readability. Figma plugin Stark and email preview tools like Litmus and Email on Acid can check the contrast ratios of text over images and run color-blindness checks, too.
Don’t rely on color alone to highlight clickable elements and text. Reinforce that with underlines, bold text, or distinct shapes. This ensures users who can’t perceive certain colors still understand what’s interactive.
The display defaults in Outlook, Gmail, and other inboxes for interpersonal text-only emails can give you all the wrong ideas for what effective communication looks like. Default font sizes are relatively small and, depending on your screen size, lines of text can be dozens of words long.
Add to that misplaced urgency around trying to get as much of your message above the fold as possible and you have a recipe for overly dense and uninviting email campaigns.
Subscribers aren’t going to read your campaign if it looks like too much work, is hard on their eyes, or is hard to understand. In fact, most subscribers aren’t actually going to read your campaign at all. They’re going to skim it.
Great design is more than aesthetics; it’s about clarity and comprehension. Thoughtful typography, spacing, and structure make content easier to digest, especially for the more than 60 million Americans with learning or attention issues.
Start by thinking of your email as a vertical canvas, not a poster. Lead with your most important message, then taper down in prominence and detail, using what’s called the inverted pyramid model. This approach maximises the skimmability of your email, while also clarifying what the most important messages are.
These best practices enhance readability and results:
Clear variations in font sizes, font weight, spacing, and background colors guide the subscriber’s eye, create natural clusters of related information, and create hierarchy that emphasises what’s most important. This helps readers set their own pace and focus on what matters most.
The result? Emails that are not only beautiful but also more engaging and effective.
You don’t need shortcuts to work faster. Brands can safely accelerate email production times by adopting modular design systems.
Instead of using a static template for each type of email you send, modular design systems are a library of modules that you can mix and match to create whatever design you need for a particular campaign. When Zeta’s Creative Services team creates them for our clients, their email production times decrease by up to 40%.
Speed of email creation is only one benefit of a modular design system. They also make A/B testing, personalization, template maintenance, and future redesigns easier. And lastly, modular design systems help codify all the best practices we discussed in this article, making it easier to use lots of HTML text, enforce color usage and contrast ratios, ensure text is legible, and establish clear content hierarchies.
Shortcuts might feel efficient, but they rarely pay off. Smarter design choices, like modular systems, help you work faster and get better results.
Learn three timely email design trends that foster emotional connection and enhance user experience with softness, doodles, and rounded box outlines.
Look at 20 high-performing email campaigns from T-Mobile, Chipotle, Zappos and more to learn how to emotionally engage with customers.
The Zeta Marketing Platform empowers businesses to offer highly tailored experiences driven by AI.