UX Design for Email Newsletters: 5 Things to Know

Published in

Thinking Design

9 min readSep 1, 2017

The topic of UX in relation to email newsletters perhaps doesn’t come up that often in conversation. Not that I talk about email newsletters that much with my friends over a pint of beer anyway.

But still. It seems niche. It seems like this one thing that’s “out there somewhere” that should just probably take care of itself. After all, emails are a one-off thing, right? Once you send them out, and people read them, they vanish, never to be seen again. So whatever mistake we make in email newsletter design will quickly be forgotten. Plus, 20% is considered a good open rate these days anyway, which basically means that people don’t care for email in the first place.

This sort of reasoning doesn’t make sense at all when we dig deeper into it. The fact is that email is still the main method of communication online, and even in the age of social media, it’s still the most reliable.

There’s over 205 billion email messages circulating the web every single day, and most of it promotional to some extent — read: “newslettery” in its nature.

The Story of UX vs Email Newsletters

As we all know, UX is not just “a single thing.” It’s not something you can “construct” based on a template. UX is about a lot more. As defined by Don Norman of Nielsen Norman Group:

“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

What this means is that email newsletters play as much of a role in contributing to the overall UX of something as any other element of the company’s presence or their products. Here’s how you can think of it:

Therefore, how should we design email newsletters with all that in mind? Let’s talk about this below. Here are 5 crucial things to know:

1. Make the Experience Congruent with Everything Else That the Company is Doing

UX is about the whole. Not the individual.

This we know.

The way to take that idea and run with it when working on an email newsletter design is to focus on three key aspects:

The spirit of the communication needs to be the same.
The email newsletter itself needs to play well into the other tools that the brand is using.
The newsletter needs to be congruent with the source through which the person got introduced to the newsletter and to which they will most likely be sent over from every single edition of the newsletter.

Let’s start with A) Each business or website has its own way of talking with their clients or audience. Whatever style you utilize in your design needs to play well into the bigger picture of what the company wants to present.

This sounds obvious, maybe, but it’s about a lot more than just the visual style of the newsletter. Have a look at this quick example by Vox. First the website:

Now the newsletter:

Both their website and the newsletter are very similar in their overall feel and the way they interact with the reader. They employ a content-first approach, in a manner that doesn’t make it hard for the reader to get to the information they want. The communication is done in very much the same way.

Moving onto B) Like the idea of UX itself, it’s about the whole experience, not just about the emails themselves. In other words, email newsletters shouldn’t exist as their own standalone things.

Good UX is when everything that a company does plays into a bigger narrative, with each element moving it forward in a direction that brings value to the customer/audience.

The goals of the email newsletter can be slightly different or slightly more specific than the goals of the website (or some other components of the brand’s presence), and this needs to be reflected in the design of the newsletter.

The thing you should be careful with, for instance, is reusing the same design elements over and over again purely because they’ve been featured heavily on the company’s website. Doing so might be a good idea, but only if the goal of the newsletter warrants it.

This brings me to C) The newsletter doesn’t exist on its own. To say this in simple terms, every recipient is introduced to your newsletter through something — most commonly a subscription form on a website. Then, later on, as they start receiving individual messages, each of those messages will refer them to another place so that they can check out some further information or buy a product. This, again, most commonly is the website.

A brand’s newsletter and website are tightly interconnected and tend to intertwine all the time in an effort to keep the reader engaged and coming back for more.

To make that happen, the design of the newsletter needs to be in tune with the website, but not in a too obvious way (like using all the same design elements all over again — what I mentioned earlier).

Take a look at that Vox example one more time. The newsletter uses a different layout and doesn’t replicate the exact look of the website, yet it’s still very similar and doesn’t seem out of place in any way.

In the end, your newsletter design doesn’t need to be flashy, just congruent with the rest of the brand’s presence. If that presence is, say, simple for the most part, the newsletter should follow suit.

2. Mind the Technical Limitations

Working on a newsletter design is, unfortunately, nothing like working on any other kind of web design. Mainly, the available technology is very limited. The main problem is that most email clients use rendering engines that are not the pinnacles of web technology, so to speak.

For instance, Outlook 2007–2013 actually uses Microsoft Word to render emails, and some older versions still use Internet Explorer. Of course, you still have the more modern clients using WebKit or Blink, too. So the tough part here is that you need to make your email newsletter compatible with as many rendering systems as possible. Otherwise, some of the recipients will not see the email correctly.

What this means is that, for the most part, you need to forget about HTML5 and stay with the old-school way of building layouts via HTML tables.

How does it relate back to UX? Well, available technology often has a huge influence over how we can design the user’s experience. So in a scenario where some of our tools are highly limited (no cool HTML5 elements that might be used heavily elsewhere), we need to find a way to make the message consistent through only the simplest of means.

And I’m afraid you don’t get to use CSS3 either. Inline styles are still where it’s at with newsletter design.

Then, there’s also the topic of mobile. As of June 2017, it’s reported that the leading platform for sending and receiving email is Apple iPhone, with over 31% of the market share. Next one in line, Gmail at 22%. And when we add the percentages of all the mobile platforms featured in the report, we get more than 51% in total.

What this basically means is that email lives on mobile these days, and it’s not likely to come back.

For that reason, the most important thing you need to achieve is provide a good UX to everyone who happens to be reading the newsletter on mobile. To do that, think of what the recipient can gain from the newsletter while they’re on the go, and what you could show them (in terms of design and content) that they can either get value from right away, or save for later when they’re back on desktop.

3. You Don’t Need a Lot to Make the Design Pop

A lot of things can go wrong when building an email newsletter design. Mainly, you can end up with something that’s not accessible via mobile, hence alienating more than half of your recipients.

The way you can save yourself from a situation like that is by utilizing only a minimal range of design elements when building the newsletter template. As I explained in the previous point, you have to stick to tables for layouts, but that’s just step one.

The other thing you can do is stick to minimal branding and make the color scheme the main design tool at your disposal.

It’s also generally a good idea to limit the number of images you feature and not rely on those images being displayed in the first place. Some email clients simply block images by default. What they don’t block, though, is the color scheme. Keep things interesting by slightly changing the style from newsletter to newsletter, while keeping the color scheme consistent and in tune with the main brand.

Ultimately, keeping things interesting is key to good UX. If the newsletters are always the same and always too predictable then people will naturally lose interest over time. This brings me to the next point:

4. Make People Feel Happy To Be Part of Something

The main goal with newsletters isn’t to sell, or to drive traffic, contrary to popular belief. What really matters is, in fact, making people feel like, “Oh, it’s nice to be a part of this! Good thing I joined.” Because when that happens, money and traffic will come as a byproduct.

So how to do that in relation to UX? Some options:

Keep things interesting — discussed in the previous point.
Welcome them. The first message people get — the “welcome message” — is often the most crucial one. The style, the tone, and the contents of that message set the stage for things to come and also set the expectations.
Do something the person doesn’t expect to receive.

Let’s focus on that last thing for a minute. Doing things that the person doesn’t expect to receive can be difficult. But you can come up with some angles based on who the sender is and what’s usually expected of them considering their business model.

For example, an online store is expected to constantly promote their products. So how to surprise people? Forget about promotion every once in a while. Instead, give people advice on how to do something that’s only loosely related with the product. Selling running shoes? Send an infographic on how to make running less painful over long distances. This sort of thing brings value right away and makes people happy that they joined. Plus, most importantly, it contributes hugely to the overall UX.

5. Mind the Legal Requirements

UX and content are one thing, but you also can’t forget about the elements that every newsletter is legally required to feature.

There’s this thing called the CAN-SPAM Act of 2003. I won’t list the individual requirements here, but I urge you to visit the document and study it deeply.

Additionally, if the newsletters are meant to be sent to audiences in other countries, also look for the local requirements.

Good UX vs Email Newsletter Design

If I were to summarize what newsletter design is all about in terms of UX, I’d say that newsletters need to provide value first of all, and only then try to guide the recipient elsewhere (like to a website or a product).

Always think how you can help the recipient achieve X through what’s being sent in the newsletter.

And whatever you do, don’t use the do-not-reply address. The only thing it achieves is it communicates to the recipient that you don’t care about their opinion. All newsletters should be in some form personal, and there’s no better way to mess that up than by putting a do-not-reply wall between the sender and the recipient.