If you’re like me, you may have uttered the phrase “but I’m no designer…” in your team meetings, usually right after giving some creative feedback or when faced with an email marketing deadline. Thankfully, Justine Jordan snapped me out of that. Back in April, she presented Email Design for the NonDesigner at the Kansas City Direct Marketing Association monthly program and insisted that if you’ve ever made something that elicited opens, clicks and actions… you’re a designer!
I’m embracing my inner designer, but I definitely lean on these tips she shared then and reiterated recently at Litmus’ Email Design Conference in Boston. As you tackle your own email design, here are a few ways to keep it looking sleek:
Judicious use of white space increases readability, usability, and clarity. White space doesn’t have to be white at all. This “breathing room” between different topics allows a reader to more easily and quickly digest the content and direct the reader’s eye to your call to action. It also helps mobile viewers click on the right links!
QUICK TIP: Keep 40-60px of white space between every link, which is the average width of a thumb that’s clicking on a mobile screen.
Visual hierarchy is key for fast paced readers and short attention spans. Put your most important item first! And don’t provide too many calls-to-action in a single email. Don’t use too many fonts — more than 2 is probably too many. Consistent styling for headlines, subheads and body copy makes an email easier for the reader to digest.
QUICK TIP: Your font size should change by 4pt for each “level” of your hierarchy. For example, if your body copy is 14pt, your subhead should be 18pt and headlines should be 22pt.
The default blue color for links is actually tough to read against any sort of background color.
QUICK TIP: Style your email links to increase legibility. Remember that you’ll want to style your link color “in-line” meaning right where your link information is (as opposed to in the header information).
Animation and inclusion of video content can help drive response, but when it comes to animated images, go for subtle and purposeful. What relevant motion can your imagery show?
QUICK TIP: Video still doesn’t play in-line in most inboxes, so stick with a still (or animated) GIF from the video and a play button overlay that begs to be clicked.
Aim for Modular email design. Break designs down into smaller bits. Keeps focus on components rather than grand designs. Spongy, not fully fluid. Sketch out common design patterns: calendars, image with caption, buttons etc. The aim of spongy design, or any kind of email design, is not perfection. Pixel-perfect design in email doesn’t really exist. Breaking down email designs into simpler components allows you to visualize how best to mark things up with tables.
Giving your entire email template a refresh? For your first few sends, it would be a good idea to acknowledge the new design right away, so your subscribers aren’t surprised by the new look and feel. Mention that you’re sharing the same great content with a fresh, new look. For one eCommerce client, this “new, fresh look” email drove 5x more website revenue than a standard newsletter!
The most clicked links in this email were near the bottom, resulting in thousands of visits to the site: