Insights and best practices for digital media professionals, by Manning Krull.

Disclaimer: The views expressed on this site are my own and do not necessarily reflect those of my employers. :)   – Manning Krull

A perfect email

What makes a perfect email? It's a combination of all of the following:

Another way to look at it is this — a perfect email prioritizes these four things: engagement, accessibility, efficiency, and cross-platform compatibility

Following everything in that first list is the way to make sure we're achieving everything in the second list.

Let's break it down...

Subject and preheader

I'll write a more in-depth article about this topic, but the most important things to remember are A) these two pieces should work together to entice the user to open the email, and B) they will be truncated (with "...") for many users; this is fine, but for this reason it's a good idea to keep your most important words toward the beginning.

Mobile-first, single-column layout

The designer should lay out the mobile view, send it to themselves as a pdf, and review it on their phone to confirm that everything is easily readable.

The default in email design is that all elements should be stacked. Some elements may be side-by-side for both mobile and desktop.

The layout for the mobile view should be 375 pixels wide, 72 dpi. The layout for the desktop view should be 600 pixels wide, 72 dpi.

The designer (or an accessibility consultant) should check that all text colors, link colors, and background colors have a high enough contrast ratio for ADA compliance.

Web-friendly fonts only

All fonts in an email should be web-friendly, i.e. Arial. All text should be live html text rather than images. For accessibility, my minimum recommended font size for our smallest text in an email (e.g. footnotes, references, global links, end matter) is 14 pixels. My minimum recommended size for body copy is at least 17 pixels. Bigger is better!

Font sizes should be the same for mobile and desktop.

Make sure the leading isn't too tight for any text elements. Outlook has a minimum leading that's fairly large — if we lay out text with very tight leading, we may not be able to achieve this in the programmed email.

Header area

If there's a header image (and there always is, right?), that image should be the same for mobile and desktop — in email, we should not display different images (or different croppings of images) for mobile and desktop.

The headline text should be live html text, set in Arial, above or below the header image (usually below). The headline text should not be layered onto the header image. This is because A) background imagery behind html text is not widely supported in email, and B) if we make the text part of the image, many users won't see it, as a large percentage of users have images hidden by default.

A note about the header image, and other images in an email

Any images we place in an email should be the same for mobile and desktop. In email, we should not display different images (including different croppings of images) for mobile and desktop. Some email vendors will do this, but it goes against best practices for several reasons. Check out my article on

image swapping in emails.

Content best practices

The content in your email should be stacked, and broken up into bite-sized sections for easy scannability. The last thing you want is a wall of huge paragraphs. There are tons of visual things that can help break up content to make it skimmable:

The content in your email should be brief and lead to a clear CTA. Don't include everything and the kitchen sink — that's what your website is for. When thinking about how much content to include, ask yourself, "Have I ever read an email this long?" Why would users want to read your long marketing email if you know that you youself would not read a similarly long marketing email? Hmm?

Remember, the goal is to get the user to the CTA as quickly as possible, using just enough words so that we have the greatest chance of convincing them to tap/click the CTA. Once the user is on your website, they'll have access to all of your content. At that point they're done with the email; they'll never come back to it. The email's job is not to educate, it's to get the user to go somewhere.

CTA

Your CTA (call to action) should be designed so that it can be programmed with live html text, i.e. Arial — it should not be formatted as an image.

To design a CTA that A) can be programmed with html only, and B) will display the same for all users, we're fairly limited in our styling choices. The CTA must be a solid-colored, plain rectangle — no rounded corners, no drop shadow, no gradient background. (A small arrow image or other icon, inside or beside the rectangle, is fine.)

If we use a brand font for the CTA, or design the CTA with rounded corners, a shadow, etc, then it would have to be formatted as an image. Since a large percentage of users have images hidden by default, this would spell doom for the overall success of the email. Remember, for most emails, the CTA is the main focus; we want that tap/click more than anything. So let's make sure all users can see the CTA and easily engage with it. Our clients will measure the success of the email in taps/clicks.

I say this all the time: in email, the less glamorous CTA will perform better than the branded, beautiful one. It's important we all understand this; we should educate our clients about this too.

Your CTA must use meaningful link text, as is required for ADA compliance. Not "learn more" or "click here." (We should always avoid "click here" language anyway, as mobile users don't click, they tap.)

For very long emails (have I mentioned we should avoid making very long emails?), consider including two CTAs — one near the top, and another near the bottom. Maybe that first CTA hooks the user without much context, or maybe our content is so engaging they're enticed to scroll all the way down and tap/click on the second CTA. We can even track the clickthrough rates of both CTAs and see which one performs better.

Inline links

As with the CTA, make sure all inline links use meaningful link text, as is required for ADA compliance. Links should also follow UX principles for link affordance, as well as color contrast requirements for ADA compliance.

Positioning

This is a huge one. In email layouts, we may be tempted to place some elements side-by-side for desktop, and stacked for mobile. In email, we should always avoid this. In some cases it's simply not possible to achieve this repositioning of elements as designed. In other cases, it is possible, but it incurs additional dev/QA/routing time that's completely unnecessary, with no benefit to the user or client.

So, the rule of thumb is that all elements in your email should be stacked, for both mobile and desktop.

However, if two small elements look okay side-by-side for mobile, they will definitely look okay side-by-side for desktop. The inverse is not true.

(In websites we often reposition elements — stacked for mobile and side-by-side for desktop. This is not best practice for emails. I would argue that in most cases it's not even a good idea for websites. But at least in websites it can usually be achieved in a way that looks fine across platforms, without a ton of effort.)

I realized I had a lot to say about this one, so I wrote a whole article about it: Repositioning elements in email

A checklist for success

That's just about it! Follow the rules above and you'll be designing emails that both streamlined and effective.

– Manning

Back to top  |  Articles list

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.