Stensul Guide to Marketing Email Design

2 / 17

There’s something terrifying in those moments after you’ve just pressed “send” on an email campaign, plagued by the suspicion that you just released an enormous error into the world — those dreaded emails that begin “Dear {FirstName}” or end with “<insert clickbait here>”. But don’t let past trauma get you down – the positive impact of great email marketing is huge. While some seriously hyperbolic data gets thrown around – we’ve seen the promised ROI on email marketing range anywhere from 28.5% to 4400% – the investment in upgrading your automated, transactional, and promotional email campaigns can be a game changer.

That opportunity also means there are a lot of self-proclaimed experts out there, ready to lead you down the dark path of trying to trick your audience, or resort to quick fixes that promise to hack your click-through rate.

Intro“There are so many b.s. studies that will say things like, ‘An orange call-to-action will increase your audience by 200%’ or ‘These 50 phrases in your subject line will drive open rates way up” Jen Capstraw, Director of Strategic Insights at Iterable and cofounder of Women of Email, told us. “If it’s not your brand color, you shouldn’t use it. If you’re using silly tricks to get me to engage, I immediately have a negative sentiment toward your company.”

Unfortunately, the reality is that there are no magic buttons or enchanted subject lines. And all too often good design, compliance, and rendering fall by the wayside in the urge to find the perfect call-to-action.

In this ebook we’re going to offer up best practices when it comes to designing your marketing emails, from subject line to footer. Of course, in matters of taste there’s never going to be a final authority, but these are some of the things we’ve learned about performance over the course of a few decades working in the email trenches.

3 / 17

exist across different operating systems – so they’re not going to render the same for all users. And don’t forget about the snippet text for your email, which can prove make-or-break when it comes to a user opening your message. Now that many email clients feature short preview text in the inbox (typically somewhere around 100 characters), subscribers can get a sneak peek at what’s waiting for them inside that message. This is your chance to get them.

Naturally a subject line is going to largely concern the words, and thus resides just outside our purview, but it’s still possible to introduce design elements. We’re talking about emojis. The brain processes visual information far faster than text, which allows emojis to convey moods far more efficiently. That might explain why they are often very effective in engaging with your audience – Experian has found that using emojis can increase open rates by up to 56%. But not all emojis are created equal. A 2015 study from Ecoconsultancy reported that the snowman emoji increased open rates by more than 65%, while the finger pointing right decreased open rates by 9.5%.Keep in mind, if a recipient’s email client doesn’t play nice with emojis, they’ll receive a mysterious ☐ in its place. And you should also remember that different emoji libraries

The Subject Line

Experian has found that using emojis can increase open rates by up to 56%.

4 / 17

We’re all too familiar with the biggest stumbling blocks to effective email design: email clients. There are more than 50 different email clients out there (per Wikipedia), each one with its own quirks and limitations; there are more than 100 possible screen sizes on which to view those emails; and there exists no organization like W3C that develops and sets standards for email, which means responsive design isn’t a quick fix. In short, it’s a nightmare. That doesn’t mean it’s possible to accommodate the great majority of users. The dreaded Outlook desktop client happily mangles image padding, text wrap, and a slew of other niceties your design department likely spent good time getting just right.

While your sense of completionism might suggest it’s worthwhile designing for the Thunderbird email client (representing approximately 1% of all email clients

The BodyOptimizing Emails for Different Formats and Clients

worldwide), constraints around time and resources simply aren’t going to make that possible. A certain level of triage needs to take place. “My first step, when I’m designing an email, is to consider the audience – learning where they are, the platform they’re using, and making sure we’re going to hit the top five before I even start,” says Crystal Ledesma, Senior Visual Designer and Developer at Zillow. “I’m going to design an email primarily for those top five but still keep in mind that if it’s possible to make progressive enhancements from a baseline web-kit, it’s generally worth it.” If you are very constrained for resources, one thing is certain – it’s best to favor mobile optimization. At least 50% of emails worldwide were opened on a mobile device in 2018, and that number is rapidly increasing. And a 2016 study from Google found that mobile users check their email three times more often than desktop users.

My first step, when I’m designing an email, is to consider the audience – learning where they are, the platform they’re using, and making sure we’re going to hit the top five before I even start.

Crystal LedesmaSenior Visual Designer and Developer at Zillow

5 / 17

Emails should have a maximum width of 640 pixels. Your logos and images, however, should be approximately 1200 pixels to avoid a blurry appearance on high-resolution (retina) screens. Ensure that all your images have alt text, in case the images don’t render or are blocked by the user. You can get fancy with the fonts, but be aware that email clients don’t always play well with your Ubuntus or Yatra Ones. So when you do use web fonts, or a custom web font for branding purposes, it is essential that you also use web-safe fonts as fallbacks in your font stack.

When it comes to universality, the safest typefaces include…

Create both an HTML and plain-text version of your email. Keep the file size small so that your email doesn’t take valuable seconds before it renders. It’s also important because Gmail clips emails that are larger than 100kb, hiding the full content behind a link.

The Basics

Serif: • Courier• Georgia• New York• Palatino• Times

Sans-serif:• Arial• Geneva• Tahoma• Trebuchet MS,• Verdana

6 / 17

The visual hierarchy of your email goes an incredibly long way to determining what elements your already distracted audience will notice. There’s a fairly simple taxonomy of vertical email layouts that will help guide the reader to the most important information as quickly as possible. The Inverted Pyramid The header, images, header, and body text all converge on one message. These are particularly effective for marketing campaigns with a click-through call-to-action. (See above left & right) The ColumnWhen you want to convey information, using a simple one-column format, stacking text and images, is the most effective means. It’s also preferred for mobile users as they can easily swipe through the content. (See bottom left & right) The Zig ZagThe F-Pattern describes how most people scan blocks of content, which, it turns out, looks a bit like a capital F. Users first read the upper part of the content horizontally, then scan down the left side of the page. When they see something that interests them, they engage with it, and then continue the process. The Zig Zag pattern exploits this to guide the reader’s eye through the email, which makes it particularly effective for emails that contain a lot of different content or calls-to-action.

Design Layouts

MOST IMPORTANT INFORMATION

INFORMATION & VISUALS

CALL TO ACTION

7 / 17

While you might not be able to change the prose, the text itself should follow basic design principles that allow for quick scanning, and clear comprehensibility. Although you might feel the need to shove as much text as possible into your email, remember that white space is your friend. Not only is white space crucial for text’s readability, it also helps you direct skimming readers to the most important content or CTA button.

Avoid using a secondary CTA, but if you must, apply a different visual treatment so that readers can easily distinguish between the two.

“I call it a “ghost button” so that you have a good visual fallback for understanding the main call-to-action,” Capstraw said. “I’m also a fan of using the call-to-action as a survey, or a multiple choice question -- people are a lot more responsive.” Line spacing is particularly important to ensure you’re not presenting readers with dense blocks of text – try to keep it somewhere between 1.4 and 1.6. The body copy should have a font size of 12- or 14-point, to ensure mobile legibility. The call-to-action button should have short, simple, and specific text that ideally features a verb. The button itself should be large enough that people can easily tap it from their phone – at least 60 pixels tall – and it should also link to a mobile friendly website. The button’s color should contrast strongly with the background color and be offset with ample whitespace. Check your spelling and then check it again.

Working with Words

I’m also a fan of using the call-to-action as a survey, or a multiple choice question -- people are a lot more responsive.

Jen CapstrawDirector of Strategic Insights at Iterable and cofounder of Women of Email

8 / 17

While product shots, photographs, and illustrations are crucial in email marketing, there’s no reason to use an image if you don’t have to. When you dilute your messaging with visuals for the sake of visuals, your subscribers are going to be distracted. In other words, insipid stock images aren’t doing you any favors. When you’re using multiple images in an email, keep them thematically unified. If you’re featuring product shots, stick with product shots. In the split-second your subscriber takes to “read” the email, keeping images stylistically similar makes the process much easier. Using images to replace text might seem like a simple fix to getting your favorite font to render, but the practice presents several problems: it’s not ADA-compliant (more on that below), the text can appear blurry due to image compression; users who block images by default won’t see much of anything; the email is more likely to be marked as spam. JPEG, JPG, GIF, and PNG are the best compression formats to use. Use an image editing tool such as Adobe Photoshop to reduce the file size. Ideally the image should be between 100 and 200kb. And once again, white space is your friend. No one wants to receive an email that looks like a Geocities page.

Working with Images

9 / 17

Statistics suggest the CTRs for marketing emails that embed video are significantly higher than comparable emails that do not. This should not be an invitation to including video with every email, especially because most email clients can’t display video. That means viewers who click on that video will be whisked away to the web or an app, perhaps never to return to your video again. Unless you have an incredibly compelling reason to include a video in your email, don’t. Animated GIFs are a low-resolution, color-distorted, inefficient relic of the earliest internet, and yet they remain remarkably popular, likely due to the fact that they’re one of the rare formats that is widely supported across different email clients. That means marketers who are looking to add a little motion to their emails can rely on GIFs to step in where video cannot. Outside of offering a little eye candy, however, there’s not much to recommend using the format in your marketing emails.

Motion Pictures (aka Videos and GIFs)

10 / 17

We’ll cover this more in Accessibility and Compliance, but for now, know that your footer should contain the following elements: • Contact support• Social media accounts• Share with a friend• Unsubscribe• Legal • Link to website• Physical mailing address• “Why Am I Receiving This Email?”

The Footer

11 / 17

When email marketing is a team sport, it can prove remarkably difficult to maintain brand consistency. Maintaining a disorganized, ad hoc collection of branding standards and visual assets makes it near impossible for a company to uphold brand guidelines. It’s also incredibly inefficient. That’s where digital asset management and style books come in.

Digital Asset ManagementDAM is a repository of media files that can be easily searched through metadata – it’s the central hub for where your team will organize, categorize, produce, and distribute everything from digital catalogs to product images to brand logos. Effective DAM can prove to be a godsend for large organizations struggling to stay on the same page, but there’s one problem – setting them up internally can prove to be a slow, labor-intensive process. For many it remains more aspirational than actual. “It’s definitely still a work in progress for us,” Ted Goas, Senior Product Designer at Stack Overflow, told us. “We have a brand design team, and we do have a repository of some illustrations, but I feel like we could be doing a better job. So our solution is to stay in constant contact – we live and die in Slack and our own internal chat tool, as well as Google Hangouts.” “Right now my team has a shared Google Drive, which is fine because we’re still relatively small,” Ledesma said. “But we’re scaling up so quickly that we’re not going to be able to get away with that much longer.” So how can an organization that doesn’t have the resources to overhaul its entire production process start to get on the same page? There are a few essential components.

Digital Asset Management and Branding

When your team is sharing a cloud-based drive for images and video, establishing clear file naming conventions will prove enormously helpful. Of course, a simple thing like systematizing how you name files can prove a lot more difficult than you might think. How do you organize a chaotic assemblage of product images or create a taxonomy for dozens of different file types? And keep in mind, those naming conventions will need to anticipate the future as well. What if one of your email templates changes to include two hero images instead of one? Do all of the future header images now get tagged with “Left” and “Right” as well? Sadly, there are no quick fixes to getting this right, but here are a few tips. • Keep the name human readable. You might have created a foolproof

code for identifying images, but the point of all this is to make things comprehensible to your entire time, present and future.

• If files are being revised, include version numbers in the file name. i.e. HeroV04

• To indicate a new word, don’t use a space or _. Instead use capital letters. This aids in search.

• When using a date in your file name, work back-to-front, from year to month to day – this assures that your file names will maintain chronological order when they’re listed. i.e. 201908Hero not 082019Hero

• Avoid special characters, such as ~ ! @ # $ % ` ; < > ? , [ ] { } ‘ “^ & * ( )

• Organizing files should be nested according to what is most important when trying to disambiguate assets.

12 / 17

Style BookThis is step one in ensuring your brand voice and imagery is consistent among all the emails that your marketing team is sending out. A Style Book is your brand’s bible, dictating the look and feel of everything your company presents to the public. A Style Book should contain: Logo guidelines which establish acceptable color variations, size guidelines, white space rules, and a set of “Don’ts”. Typography guidelines which detail the fonts your brand will use in various placements. Include guidelines around spacing, kerning, and tracking. Image guidelines that help identify the kind of illustrations or photographs your company will use across a variety of interactions. A color palette that identifies approximately four main brand colors identified by PANTONE name and number, RGB and HEX codes, as well as CMYK. Establish a brand voice. How does your company talk to its audience? There should also be guidelines around social media, web ads, signage, stationery, and wherever else your brand’s messaging might appear.

Optimizing ProductionThis is where all that organizing and standardizing should pay off – the ability to send out email campaigns should become simpler, and faster, than ever. There are a few crucial steps to ensuring that your team can send out an email without facing a bottleneck somewhere in the process. Use modular design to increase efficiency. For marketers who have been forced to code HTML to create an email campaign, modular design will set you free.

“There are a ton of advantages to modular design,” Capstraw said. “It makes it far easier to adhere to branding standards and best practices, and saves a ton of time and money. Modular design also eliminates a lot of tedious coding work that marketers get forced to do, which frees them up to focus on other priorities, like campaign optimization.”

Think of every element in your email as a building block and allow for the creation of new marketing emails to simply involve some combination of those blocks. Modular design elements can include: pre-header, header, navigation, features, grids, social shares, footers, and a whole lot more. Establish a pre-flight checklist, ensuring that your email’s testing process doesn’t overlook a compliance test, broken link, or usability feature.

13 / 17

Email accessibility, or the practice of coding and designing emails that makes them accessible for subscribers who use assistive technology, is no longer optional for marketers. In general, 5% of the world’s population lives with a disability – that’s one billion people. Globally, the World Health Organization estimates that 253 million people live with some form of moderate to severe vision impairment. If that’s not reason enough to make you prioritize email accessibility, perhaps the long arm of the law will help motivate you. The Americans with Disabilities Act dictates that no business can discriminate against any person with a disability, and those laws are quickly finding their way into online content. But email accessibility isn’t solely about compliance – the practice will make your email content more readable to all of your subscribers. The W3C offers a set of Web Content Accessibility Guidelines that can assist designers in ensuring that their marketing emails meet or exceed the current standards. W3C breaks their guidelines down into the acronym POUR.

PerceivableAlternatives for text, video, and audio content should be provided. Content should also use color and contrast to ensure that users can see and hear content, including separating foreground from background. OperableAll functionality should be available from a keyboard, and various means should be provided to help users navigate and find content. And content should not be designed in a way that is known to cause seizures. Understandable The content and interface should be easily understood. That means making text content readable, offering consistent navigation, and helping users avoid input mistakes. RobustYou should maximize forward and backward compatibility of your content, including assistive technologies.

Accessibility

14 / 17

“There are three main components to how we ensure accessibility here,” Goas said. “The copy – that means we have a voice and tone content style guide that we use for email, as well as other content. Short sentences, simple words, set the hierarchy, avoid cultural exclusion, among them. “The design – so we pay attention to contrast ratios, ensure that we don’t include text in images, and that our tap sizes are big. “And the technical bits – the HTML is semantic, using tags, including alt attributes, and including a text-only version.” So how do you put accessibility into practice? Text tips for accessibility • Keep text left aligned. Some screen readers insert large gaps in text when the copy

is justified, and people with dyslexia find it more difficult to use.

• Keep the content concise and simple, avoiding large blocks of text. A single line of text should not be too long either – 60-80 characters per line should be safe.

• Pay attention to the contrast ratio between text and background – a minimum of 4.5:1 contrast ratio is the minimum required for visibility.

• Button and link text should be meaningful – give people information about where the link is going to take them.

Putting Accessibility into Practice

There are three main components to how we ensure accessibility here. The copy...the design...and the technical bits.

Ted GoasSenior Product Designer at Stack Overflow

15 / 17

Design tips for accessibility • Avoid using text within images, which

will be inaccessible to screen readers. Always avoid including important or accessible text within an image.

• Make sure your tap areas are large enough for people with limited mobility to be able to easily access them.

• Keep a strict hierarchy around content – the most important information should be placed highest in the email.

• Flashing or strobing should not be used.

Technical tips for accessibility • Use semantic HTML at all times – that’s <h1>,

<h2>, <p>, et cetera, ensuring that content is properly rendered and easily navigable.

• Include alt text with every piece of media to allow screen readers to describe them. Where appropriate include transcripts.

• The use of table formatting can make interpretation difficult for screen readers, so they should be avoided. If you must use tables, add role=”presentation”to the table elements, which will help assistive technology parse the content.

• Navigation in content should be logical, providing informative text to aid in navigation.

• Include a plain-text version of every email.

• Once you have completed a draft of your email, W3C links to more than 120 tools that can be used to test accessibility.

16 / 17

The wild west days of outlaw email marketers who could spam whenever and however they want are long gone. GDPR, CAN-SPAM, CASL and an alphabet soup of other communications regulatory laws mean that spammy email campaigns can result in significant fines. One of the most important issues when it comes to compliance is that you receive permission to email someone, whether implied or explicit. Implied consent suggests you have done business with someone in the past, allowing them to be added to your mailing list. Note that you will need to confirm expressed consent from these subscribers after two years. Potential subscribers should be required to check a box to opt-in to a subscription when signing up on a web form. While America’s CAN-SPAM says it’s legal to pre-check that box, Canada’s CASL and the EU’s GDPR levy heavy fines if you do. To be completely safe regarding your subscriber list, use the double opt-in method. Data privacy laws also make it illegal to “double dip” on those subscribers lists – you can’t transfer an old one to a new business.

Header Content Don’t lie, especially in your header information – that includes your sender name, subject line, reply-to, and routing information. Don’t try to fool your recipients into thinking this an email from a friend. The subject line should accurately reflect the content. Footer Content Your footer should include a valid postal address for your business, whether it’s a street address, PO box, or private mailbox. There should be a clear and conspicuous link for unsubscribing from future email correspondence. And once a user arrives at that link, you should offer a simple means of unsubscribing – don’t indulge in dark UX patterns to trick users. You are required to honor opt-out requests within 10 business days.

Compliance

17 / 17

As you can see, the list of elements to consider when building your marketing emails is long — and growing — but email still remains the highest ROI channel for many marketing organizations. As you think through building and optimizing your email program, we hope that your marketers, designers, and developers will find value in this overview.

Stensul uses technology to streamline the dozens of manual tasks that go into the creation and validation of each marketing email. Give us a shout at hello@stensul.com to set up an audit of your marketing email program and see how we can help.

Conclusion