Emails: four types of watchouts
A big part of my job for several years now is reviewing tons of layouts for emails, flagging any issues, and making suggestions for corrections/improvements. The issues I flag fall into four big categories:
- Things that are not possible in email from a dev perspective.
- Things that are not ADA-compliant and/or not best practice for accessibility.
- Things that are not best practice for engagement.
- Things that are not best practice from an efficiency standpoint — meaning the email will take a long time to program/QA/route/etc, for no added benefit.
Another way to look at these categories is to think about the opposite of these things, and that's what a good email layout should be: achievable in dev, 100% ADA-compliant, written and designed to be highly engaging, and easy/fast/cheap to program. That right there is the formula for success when it comes to emails.
If you read my article about a perfect email, all of the items described there correspond to one or more of these four goals. That article is basically a cheat sheet for creating an engaging, successful, streamlined email.
I'll break down these four categories a bit; here are some of the things I look for and flag when I'm reviewing email layouts:
Not possible in dev*:
- Swapping in different images for mobile and desktop.
- Background imagery behind html text.
- Box styles (e.g. rounded corners, shadows) that don't work across platforms.
- Fonts that aren't supported in email.
- Repositioning elements (aka column juggling) in a way that changes the order of elements.
Not ADA-compliant:
- Bad color contrast.
- Links that are not meaningful, e.g. "click here" or "learn more."
- Text in charts that becomes microscopic on mobile.
- Tiny html text that's likely to become very pixelated and unreadable on Windows machines.
Not good for engagement:
- Not designed mobile first (or mobile wasn't provided at all).
- Text formatted as images.
- Way too much content.
- A wall of huge paragraphs.
- Font sizes that are smaller than best practice.
- CTAs that are styled in a way that means they'll have to be formatted as images.
Not efficient for dev:
- Tons of repositioning of elements from mobile to desktop, aka column juggling — what I mean here is that tons of elements are side by side for desktop and stacked for mobile.
- Font sizes change from mobile to desktop.
- Gutter widths aren't consistent all the way down the layout.
The above lists aren't exhaustive, but they basically cover the main types of things I flag all the time. My hope is that if you can calibrate your brain to think about email best practices with these four categories of watchouts in mind, you'll be able to design better emails, and/or catch these kinds of things in email layouts that you review.
*Some of these items are technically possible in email but are not consistently supported across devices/platforms. In my industry — healthcare advertising, aka pharma — this is not acceptable, and from a best practices perspective I don't think it should be acceptable in any industry. But I do see marketing emails for consumer brands that do some of these things and just let them gracefully (or not gracefully) degrade. I say we can and should do better.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.