Most marketers spend considerable time and effort seeking to eke out even a tiny bit more performance from the emails they create. Much of that hunt is focused on finding the perfect subject line, a way to track opens or the CTR to end all CTRs. While those areas have merit, so too does designing emails well. Better designed emails can work wonders – from engagement to action. Such emails can help beat the control for practically any metric.
Yet, too often, the cry is heard: “We don’t have the time or budget for that!” Yes, the urge to find the perfect CTA can overpower the desire for good design, compliance, and rendering. But that’s really wrong thinking.
After working with many of the world’s top brands to help create thousands of emails, Stensul has found that good email design makes a difference to the top and bottom lines. We’ve also determined there are nine steps you can take to create great looking emails that perform better. Those steps – best practices, really – are:
- Optimize your design resources
- Know the email basics
- Get the layout right
- Choose your words carefully
- Use images for impact
- Manage your digital assets wisely
- Set branding guidelines
- Understand accessibility
- Simplify the email creation process
To learn more about email design, download the eBook 9 steps to creating emails that look great and perform better.
Step 1: Optimize your design resources
There are about 50 different email clients. Each has its own quirks and limitations. Add to that the 100+ screen sizes on which to view emails and you have a situation that calls for pragmatic email design management.
You can’t have your email creation team design for every one of those clients. So find out which five the majority of your subscribers use and – to the best of your team’s ability – design to fit them. The other reality that needs to be central to your design thinking is that fact almost 50% of emails worldwide are opened on a mobile device. Design with mobile optimization in mind.
Step 2: Know the email basics
Like most things, even email design has essential rules of thumb, the basics. They include:
- The maximum width of an email should not exceed 640 pixels.
- Logos and images should be 1,200 pixels to avoid blurriness on retina-quality screens.
- Give images alt text in case they don’t render or are blocked by the email’s recipient.
- Use web-safe fonts as fallbacks in your font stack, such as:.
Serif
- Courier
- Georgia
- New York
- Palatino
- Times
Sans-serif
- Arial
- Geneva
- Tahoma
- Trebuchet MS
- Verdana
- Create both an HTML and a plain-text version of your email.
- Keep the file size small so your email doesn’t take too long before it displays.
Step 3: Get the layout right
Your subscribers are distracted, using one of three proven email design layouts will help get readers’; attention and then guide them to the most important information quickly.
The Inverted Pyramid
The head, images, header, and body text all converge on one message. This layout is particularly effective for marketing campaigns with a click-through call to action.
The Column
When you want to convey information, using a simple one-column format, stacking text and images, is the most effective way to go. It’s also preferred for mobile users as they can easily swipe through the content.
The Zig Zag
The F-pattern describes how most people scan blocks of content. That’s because it just happens to look a bit like a capital F. People 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 continue the process.
The Zig Zag pattern exploits the F-pattern to guide the reader’s eye through the content, which makes it particularly effective for emails that contain a lot of different content or calls to action.
Step 4: Choose your words carefully
Even though you might feel compelled to shove as much text as possible into your email, don’t. Use the white space available to you. It can dramatically improve the readability of your text and help direct skimming readers to the most important content or CTA button.
The body copy, the main block of text in your email, should have a font size of 12- or 14-point to ensure legibility on mobile devices.
The CTA button should have short, simple, and specific text that ideally features a verb. After all, you do want the reader to take some kind of action. The button itself should be large enough so 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.
Oh yes…don’t forget to check your speling… spelling. And check it again.
Step 5: Uses images for impact
While product diagrams, photographs and illustrations can be useful in email marketing, there’s no reason to use an image if you don’t have to. Using an image just to use it may dilute the power of your message and its potential impact.
When you’re using multiple images in an email, keep them thematically unified. In the split-second your subscriber takes to “read” the email, keeping images stylistically similar makes the communications job much easier.
JPEG, JPG, GIF, and PNG are the best compression formats to use. Ideally the image should be between 100KB and 200KB.
With images, white space is your friend. It sets off the image in a way that allows the reader’s eyes to be drawn to it.
Step 6: Manage your digital assets wisely
Having a disorganized collection of digital visual assets is incredibly inefficient. That’s why you need digital asset management. Also known as DAM, a repository of media files that can be easily searched through metadata. Think of it as a central hub for where your email creation team will organize, categorize, produce, and distribute everything from digital catalogs and product images to brand logos.
While it aids efficiency, effective DAM is tough to achieve. Even organizations with limited resources can get started by employing a few essential components.
Establishing a clear file naming convention should be done first. Unfortunately, it’s not simply accomplished. The reason being your digital assets are a chaotic assemblage of images or a crazy taxonomy for dozens of different file types.
Beyond getting what you have in order, the future has to be anticipated 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?
It’s not simple or easy, but these tips can help get your DAM set-up and serving your email creation team well:
- Keep the file name readable and comprehensible.
- If files are being revised, include version numbers in the file name, like 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 orient it year-month-day, 202109Hero. This will help keep chronological order.
- Avoid special characters, such as ~ ! @ # $ % ’ ; < > ? , [ ] { } ` “ ^ & ( )
- Organizing files should be nested according to what is most important when trying to disambiguate assets.
Step 7: Setting branding guidelines
It can be remarkably difficult to achieve let alone maintain consistent branding. That’s where a branding style book comes in. This is the first move to make to ensure your brand voice and imagery is consistent in all the emails being created by your organization.
Think of a Style Guide as your brand’s bible. It specifies the look and feel of everything your company presents to all audiences. It should contain:
- Logo guidelines which detail acceptable color variations, size guidelines, white space rules, and a set of “Don’ts.”
- Typography guidelines that define the fonts your brand will use in various placements.
- Image guidelines that help identify the kind of illustrations or photographs your company will allow.
- Color palette that offers the brand colors that are identified by PANTONE name and number as well as RGB, HEX, and CMYK numerical codes.
- Your brand voice which explains how the company talks to its audience – in written and oral form.
Step 8: Understand accessibility
More than 250 million people live with some form of moderate to severe vision impairment globally. If that’s not reason enough to make email accessibility an priority, perhaps the Americans with Disabilities Act (ADA) will. It’s a law that dictates no business can discriminate against any person with a disability, and that includes online content.
But email accessibility isn’t just about compliance with the ADA. Designing emails accordingly will make their content more readable for all of your subscribers.
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.
- Avoid using 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 the text and background – a minimum of 4.5:1 contrast ratio is the minimum required for visibility.
- Button and link text should give people information about where a link will take them.
Design tips for accessibility
- Avoid using text within images. They’ll be inaccessible to screen readers.
- Make sure tap areas are large enough for people with limited mobility.
- 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>, etc. – to ensure content is properly rendered and easily navigable.
- Include alt text with every piece of media to allow screen readers to describe them.
- Table formatting can be difficult for screen readers to interpret, so avoid them if possible.
- Navigation in content should be logical, providing informative text to aid in navigation.
- Include a plain-text version of every email.
Step 9: Simplify the email creation process
You’ve got everything organized and standardized. Those efforts have given you the ability to send out emails simpler and faster than ever.
Still, there is something you can do to best allow your team to send out an email without having to contend with a bottleneck somewhere in the process. Use modular design.
If you’re forced to code HTML to create an email, modular design will let you do it all with far less complexity, time, and risk. Using modular design makes it far easier to adhere to branding standards and best practices, while saving a ton of time and money. Modular design eliminates a lot of the tedious coding, so marketers can focus on other priorities, like message strategy or campaign optimization.
Think of every element in your email as a building block, kind of like a piece of Lego. Just as a child puts together the pieces to create something, modular design lets you use those building blocks to create an email with ease, speed, and full branding and regulatory compliance.
Modular design elements can include:
- Pre-header
- Header
- Navigation
- Features
- Grids
- Social shares
- Footers
An excellent way to create emails with modular design is to use an Email Creation Platform. To learn more or to see an Email Creation Platform in action, visit www.stensul.com
