Code for humans.

Email Design 2021 - General Rule of Thumb

Chris Miller
Chris Miller

In this article, I wanted to outline how I help agencies and clients approach emails from inception to execution with the following goals in mind.

  • Budget.
  • Deadlines.
  • Responsive.
  • Accessible.
  • Clear.
  • Low effort.
  • High impact.

Keep in mind, low effort doesn’t mean cheap and cheesy. Low effort means “Let’s do the best work within the budget and timeline contraints while delivering the client results.”

Also, accessible doesn’t mean avoid images but being thoughtful and contextual with the alt text you use to describe your images so that screen readers can convey the purpose of the email.

Done poorly, the client may not maximize their return on investment, or even worse, users may decide to unsubscribe due to a bad experience.

It’s important to note that there is a lot of information online with different schools of thought and that’s ok! These are my approaches having been in this industry for over 10 years working with agencies to strike a balance between production costs and delivery to deliver on the business goals at hand.

The only hard and fast rule is that information is delivered to everyone, thoughtfully.

As a pirmer before we dive in, here's some things to consider.

Things you need to account for.

  • Font Support
  • CSS Media Queries
  • Emails Clients
  • Time, Resource, Budget, QA Constraints

What are emails?

  • They are personal.
  • They are delivered.
  • They are limited.

What are webpages?

  • They are public.
  • They are visited.
  • They are limitless.

Keep it short.

If you’re trying to recreate a webpage inside of an email, you’re trying too hard and doing too much.

Emails create awareness, webpages do the heavy lifting.

Make sure that your goals are clear and messages are focused. Give your audience compelling reasons to engage with your email and make it easy for them to click-through to the supporting webpage.

And in the famous words of LeVar Burton “…but, you don’t have to take my word for it!”

Do you really need all that content in your email to get clicks or conversions? Use link-tracking and other tools to figure out what your readers are clicking on and what they’re ignoring. Move to one primary copy block, or two at the most. Grab attention with a strong hero image instead of a cluster of smaller product photos.

Also, aim for shorter sentences and copy blocks. Five lines of copy in a standard desktop format can easily wrap to 10 or 15 on mobile.

Source: #NoFailMail: The 5 Most Common Email Design Fails (and How to Avoid Them) - Litmus

Stick with a 1-column design.

More columns introduce more complications. The more complications, the more resources and time that are required to build and QA the email. Marketing teams run on tight-schedules and they need quick-turnarounds.

Now you must be thinking “Hold up! That limits my creativity!”, check out some of the examples below.

Screenshot of Tock Email Design

Screenshot of Hunter Email Design

Screenshot of Milled Monochrome Email Design

The major drawback is that traditional responsive design isn’t supported everywhere. Most notably, Gmail does not fully support styles in the head of an email, rendering (pun intended) responsive techniques useless in Gmail’s various clients. All of that control is thrown out the window in something like Inbox by Gmail , and the results can be disastrous.

Understanding Responsive and Hybrid Email Design - Litmus

You can do a lot with a little and still make a big impact. The whole goal is to drive them to a webpage and convert, not trap them inside of an email.

Now, I wouldn’t say 1-column designs are a hard and fast rule but if you're all about “Low effort, high impact.” you’re going to reduce resources and time involved while increasing engagement and hopefully results.

Hybrid gets a bit complicated, though, when you start using it on complex layouts. While there are techniques for dealing with two, three, and four-column layouts, they are harder to implement and more fragile than the corresponding “target-classes-and-override” approach of traditional responsive emails.

Understanding Responsive and Hybrid Email Design - Litmus

When in doubt, use an image.

Having been engrossed with the simple philosophy that all text should be live text when it comes to web pages, the same rules may not always apply to emails.

An email has severe limitations and can cause a massive amount of QA debt impacting the timeline, budget, and quality of work.

Here’s my rule of thumb; if it’s not a paragraph of text, footer, or link; make it an image.

Easy peasy.

Now some of you might flip out and say “What about accessibility?” Yes, accessibility should always be considered and in this case, you should be using the alt text to provide context.

If there’s text in the image, write that as your alt text. If there’s no text in the image, do you best at providing context as to what purpose the image serves within the email.

Conclusion

Hopefully, you found value in this and while some might not agree with this approach, that’s ok. There’s always more than one way to approach things and this is my way of approaching email design challenges considering all of the factors at play.

I plan on expanding this article in the future so if you like what you read or want to contribute or champion a different approach you can find me on Twitter.

https://twitter.com/millertchris