Email Development
Tips for Email UX and Design Best Practices
Email Development
I only have 50 milliseconds to grab your attention.
The same holds true when you go to capture a user’s attention in an email.
User experience (UX) is important, and while there is ample content out there for anyone interested in learning more about web UX, there seems to be less when it comes to email marketing UX.
Email UX is often forgotten, ignored, or treated like the red-headed stepchild (no offense, redheads). Poorly designed emails can lead to fewer conversions, lost revenue, and erosion of brand trust. After a lot of reading and research, I’ve compiled my best advice for good UX in emails. While I won’t be getting into email accessibility, I’ll be exploring how to create the best UX for your email subscribers, focusing on the email content instead of the whole subscriber journey.
Email UX is about keeping the email as simple and honest as possible. What do I mean by simple? It doesn’t include any extra information, images, or text than it needs in order to achieve its goal (usually with a single click). What about honesty? The content in the email isn’t fake, disingenuous, or a bait and switch.
The most successful emails make it easy for the user to consume and act upon your content.
Most emails have a handful of elements that work together to achieve a click. If one element is out of place, it can impact all the work you’ve put into the other elements and can dilute your chances for a click or conversion.
This is your chance at a killer first impression to get the reader to open your email. It includes the subject line, preheader text, sender address, sender name, and reply-to address.
Don’t look like a spammer.
Start with your company’s name as the sender and use a monitored email for your reply-to address. Trust is built when your reader quickly knows who the email is from and what to expect from the content. There’s a potential to test different senders if that aligns with your branding guidelines, but the goal is on-sight recognition and readability. Plus, including a monitored reply-to email address completes the feedback loop.
Your subject line should answer the question, “Why should I open this email?” Keep it as short and to-the-point as possible. Crafting the perfect subject line and preheader text may seem daunting, but it’s very possible.
Better known as everything your email contains.
When you emphasize everything, you emphasize nothing
You have 11 seconds, at most, to communicate your message. Writing clearly and succinctly is difficult and is not given the respect it deserves, especially in email. This is a lengthy topic, but I’m going to touch on a few elements to improve the UX of your content.
Let’s start with the assumption that your subscribers will only scan your email. Make it easy for them.
The average adult reader can read 250 to 300 words per minute. If the average reading time for an email is 11 seconds, then the ideal length of an email is around 50 words.
I want to talk briefly about cognitive load, which is the amount of mental resources required to operate a system. According to the Nielsen Norman Group, minimizing cognitive load maximizes usability because humans have limited processing power.
When the amount of incoming information exceeds our ability to handle it, performance suffers. We may take longer to understand the information, miss important details, or even get overwhelmed and abandon the task. Cognitive load is the science behind why it’s important to trim your content, chunk it, and use a content hierarchy (more on that below).
Design elements down to color selection and image choice are not to be overlooked when creating your email.
How does your email look and behave, and how will your subscribers interact with your email?
Great design is eliminating all unnecessary details
Visual design is the mechanism through which we interact with subscribers.
Let’s review a few key design elements and how to optimize each for the best email UX.
Contrast is the name of the game.
Using colors that don’t have enough contrast makes your email difficult to read. Consider colorblindness when choosing your palette, as well as using colors that have ample contrast, meaning there’s a big difference between one color and another—like a black background and white text.
These can be still photos, animated gifs, icons, and more.
Avoid large files and long load times. Email file size should be below 100KB. Image sizes should be less than 1MB. Maintain your image crispness on retina devices by using 2x image width while keeping the file sizes small.
If you use background images with HTML text overlay, make sure your image isn’t busy or distracting. If it is, try using a background color with live text instead. Remember to use contrast to draw attention to your message.
Users expect to click on graphics to be redirected, so don’t forget to link every image, gif, icon, etc. in your email. Gmail adds a download button to images larger than 200x200px if they’re not linked, so it’s always best to link.
According to the Picture Superiority Effect, images are remembered better than words. Use images that complement your email’s message and don’t distract from the goal.
Remember that many subscribers have images blocked by default, so including descriptive alt text for them and your visually-impaired audience who use screen readers is essential to accessible email UX.
If people can’t read your words, why bother using them?
Use bold, italic and varying font weights and sizes to illustrate hierarchy and contrast. Use fonts that are readable and email client safe, such as Georgia, Arial, Times New Roman and Verdana.
When possible, bullet lists. They make content easier to skim, but be sure to limit it to three to five bullet points. Paragraphs should be five lines or fewer. As a rule of thumb, paragraphs longer than three lines should be left-aligned, not centered.
Don’t be afraid of white space. Use padding, especially between headlines, subheadlines, and body text.
Font size is also important. Small text on a desktop client is very small on mobile, which is why you need to adjust your fonts for those subscribers. On desktop, the recommended minimum is 16px for body text, and a maximum of 21px. Pay close attention to line-height; depending on how much text you have, you may need to adjust it.
If possible, always underline links and avoid clustering links, as they can be difficult to click (especially on mobile). Make your links stand out for easy access!
Highlighting the most important point of your message
Subscribers on mobile are limited by screen size. According to the experts at ActionRocket, your job as an email marketer is to make the act of scrolling easy and attractive. This can be achieved by employing good design and proper distribution of content.
Using visual cues that guide the reader to scroll through your email, such as diagonal lines, screen-size chunks, and the S-curve layout is one way to keep readers engaged. The S-curve approach includes a two-column layout with an image on one side and copy on the other, switching sides with each subsequent row. Check out this example of an S-curve layout from BBC, courtesy of ActionRocket.
To figure out what elements stand out most in your email, do the “squint test.”
What do you see when you squint at your email? Obviously not much, but the elements that stand out the most (even while blurry) are the prominent pieces your subscribers will see.
Use a CTA to tell the reader what action you want them to take. CTAs don’t have to be buttons, but they tend to be buttons. They can encourage digital actions (click, read, buy online), drive readers to a digital property, or take an action offline. For our purposes, since we mostly see buttons and text link CTAs in email, that’s what we’ll talk about here.
Hick’s Law stipulates, “the time it takes to make a decision increases with the number and complexity of choices.” This is why email marketers don’t typically include multiple primary CTAs in one email. There are a few exceptions, such as long-form newsletters.
Your CTA design is a visual cue, so make them easy to click across devices. The size should be a minimum of 44x44px and your button should stand out from the rest of the content. Use a contrasting color (on-brand, of course) and use a filled-in button for primary CTAs. Ghost buttons or text links are fine for secondary CTAs, but in my experience don’t perform as well as regular filled-in buttons (maybe they don’t pass the squint test).
If you have your email metrics handy, closely monitor them to see which CTAs your subscribers engaging with most.
Use live text whenever possible and always use a bulletproof button (an HTML button that works in all email clients). That way, if your subscribers have image blocking, they will still see your CTA.
As for placement, CTAs tend to be somewhere below some of your explanatory messaging. People won’t take action if they don’t know what they’re getting out of it. The simpler your message is, the more acceptable it is to have your CTA toward the top.
When possible, code all text as live text (not images) for best accessibility, readability and mobile responsiveness. Keep critical pieces of information as live text instead of images, again, due to image blocking.
Speaking of mobile responsiveness, remember to make sure your email templates are designed with a mobile-first approach. Consider the sizes of image, text, and HTML files. Depending on the industry, mobile can make up at least 50% of all opens, and emails that don’t render correctly may be deleted within three seconds.
You can always refer to Email on Acid for further tips on effective email development.
Remember to test and optimize your email designs before pressing send with Campaign Precheck. Keep them simple and to the point. Consider creating a design system, brand guidelines, and code snippets (modular templates) that have UX in mind.
Email marketing should be a cohesive part of your overall strategy, and therefore email UX is as integral to your business as your website, display advertising, social media, and the rest.
