How to Create Newsletter Designs That Convert
Email newsletters are great extension to your business communication. Karol K gives us some good advices, so that we’ll be prepared to create successful email campaigns. This article was originally posted at blogs.adobe.com. Karol (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com. Image courtesy Michal Bednarek via Bigstockphoto.
Oh, email, my friend, everybody hates you, yet we still can’t imagine our online lives without you.
… This kind of sums up what most people think about email and everything related to it.
Let’s face it, there’s more than enough spam circulating out there, and we surely don’t want to see any more of it in our inboxes.
But there’s also the other side of the coin… If you’re a business owner – or you’re a designer contracted by one – how else can you reliably contact your customers online?
Facebook? Forget it! Only about 2 percent (or less) of the people who have liked your page will see your updates in their News Feeds.
Twitter? Certainly a solution, but you have to rely on the reader looking at their feed right at the very moment when you’re sending your update. Otherwise, your post will get buried in the archives very quickly.
So whether everyone likes it or not, email is still king when it comes to communicating online.
Interestingly, email became a marketing tool very early on in its lifespan (it was somewhere around 1976), and it’s been a never-ending task for designers and marketers to make commercial email appealing ever since.
The game is for really high stakes. Various stats indicate that around 66 percent of online consumers in the US made a purchase as a result of marketing emails. And apparently, 72 percent of US adults prefer communication with companies to happen via email (says MarketingSherpa).
So, what makes a quality email newsletter design?
The tale of conversion
Above all else … setting all the visual bells and whistles aside … the most important trait of a quality newsletter design is its ability to generate good conversions.
It’s literally the only thing that your client cares about and the only success factor by which your newsletter design is going to be judged.
In other words, a quality email newsletter design is one that converts.
How to design a newsletter that converts
Like with most things where conversion is part of the picture, there are two keys to success:
- good technical setup that doesn’t interrupt the reader and doesn’t make their experience difficult or confusing, and
- good storytelling.
Both of those play a crucial role, and it’s hard to get good results if one of them is just not up to par.
Let’s start with the technical stuff, as it’s what contributes to the first impression more than anything else:
First impressions matter
What is the first thing that the reader sees when they view your newsletter?
Or rather, what’s the first thing they’re trying to see?
The answer’s validation. With so much spam circulating around, the first thing the reader needs is some proof that what they’re looking at is a genuine message from someone they know.
Of course, the From name and the subject line contribute the most to this, but the design – the overall look and feel – is the final deciding factor.
In short, make your design look professional.
And “professional” is a big umbrella term, so rather than listing what to do, let’s talk what not to do instead:
- avoid shouty colors and uppercase text,
- avoid timers counting down to something when there’s no reason to,
- avoid stock photos,
- be careful with dollar signs and other similar things,
- don’t do anything else that might feel like a late-night commercial.
Here’s an example by Shopify; the design looks simple and professional above all else. It’s not shouty, and doesn’t feel like it’s trying too hard:
Keep in mind that this part is about the overall feel of your design, and not that much about its individual elements. Those we’ll discuss in a minute.
Make everything responsive
Responsive design is probably the biggest trend in modern web and newsletter design.
The standard not that long ago was to just do some research, find the screen resolution used by your audience the most often, and then optimize your creations to render well on that specific resolution.
These days, however, people use so many different devices and screen sizes that you can no longer focus on serving the majority. Perhaps, there’s no such thing as “majority” any more.
So to battle this, you absolutely need responsive design. And not only for websites, but for newsletters as well.
Here’s an example by Medium. No matter where you view the newsletter, it’s always going to look the same.
How to do this? Why not just use Dreamweaver? Responsive design is something Dreamweaver has been able to do for a long time, and working with it doesn’t limit your creativity in any way. You can build whatever you want to build, and then make sure it’s responsive.
Columns are done, for the most part
Somewhat a consequence of the above, columns are pretty much done in modern newsletter design.
Many devices simply don’t have big enough screens to fit more than one column of content.
And don’t let the pixel dimensions fool you. For instance, a device such as the iPhone 6s might offer a 1334-by-750-pixel resolution, which is more than enough to fit even a handful of columns, technically speaking.
However, let’s not forget that the screen is still only 4.7 inches across. Those 4.7 inches are simply not enough if you want to have more than one column.
Make the design optimized for its designated email distribution tool
Right now, hardly anyone sends their email newsletters by hand, or via an in-house email server (unless we’re talking really big firms).
In most scenarios, business owners use external tools to handle their email distribution. This gives them: a) certainty that all emails get delivered, and b) quite nice stats on the campaigns’ effectiveness.
Now, why would you need to pay attention to any of this?
Frankly, since your client is going to take your design and try using it in their email delivery tool anyway, why not making sure that the design is optimized to work with that tool? That way, you’re making everybody’s job easier and also ensuring that your newsletters are going to look great in the recipients’ inboxes.
Two ways you can go about this:
- Either input your finished design straight to the tool’s HTML editing module. Every popular email delivery tool enables newsletter design importing in raw HTML. Or:
- Use the email delivery tool’s built-in newsletter design module.
This really is a mandatory step. You need to send a test email to yourself first to make sure that everything is in order. Remember, this is about making a good first impression.
Think content first
The key to good storytelling is being able to adjust the design to fit the story that you want to convey, rather than adjusting the story to fit the design that’s already there.
It’s literally the only way to create an effective, complete newsletter. It’s how you create something that feels like one consistent thing, instead of being a pair of text + design.
For instance, if you were promoting a new product feature, using an image right up front that illustrates exactly what its all about will capture the reader’s attention and focuses it in on the sole goal of that particular newsletter. This type of visual presentation makes the message hit harder and resonate better with the reader.
Use good visuals
Did you know that people process images 60,000 times faster than text? (Although it’s hard to get to the original research on this, it seems to be a widely accepted number throughout various resources on the web.)
More interestingly, when Vero analyzed over 5,000 email campaigns, they found that those with images had a 42 percent higher click through rate.
Lesson? Good visuals matter.
A picture is worth a thousand words, they say, and if you have a very limited space to convey your message – like in an email – perhaps visuals are the way to do it.
Just three things to keep in mind, though:
- carefully select stock images – make sure these images appear authentic and align with your brand,
- use your own images – pictures either taken by you / the brand running the newsletter, or custom-designed for the newsletter’s purpose,
- use animated GIFs if it makes sense and fits the brand.
(Note: Optimize your GIFs as much as possible, even if this means losing some of the quality.)
Use minimal branding
You can have the logo.
That’s pretty much it.
Actually, you don’t need anything else to convey your brand identity and help the reader recognize whose message they’re reading.
After all, they do see the From name and the subject of the message, don’t they?
See this example by the guys from Ello:
There’s just their logo, plus the font selection reflects the one used on the actual site. Everything remains consistent. This is the kind of branding you need.
Make the message simple and modular
Less is more in many aspects of design, and especially if we’re talking newsletter design.
The thing is that people are not particularly fond of spending hours in their inboxes. They just want to get in, scan, get out.
Modular and simple designs help them achieve this.
For instance, see this newsletter by Kickstarter:
See how the first block flows naturally to the second. This gives the reader an opportunity to scan everything and decide quickly whether they want to find out more or not.
(Optional) make it different on an email to email basis
Email newsletters are very different in nature than websites. Mainly, a website design doesn’t change every week, or even every year.
Newsletters, on the other hand, should be at least a little different every time.
The goal here is to make the experience fun for the reader. Frankly, if they’re going to be receiving the same design week after week (even though the content is different), very soon it will become harder and harder to get their attention. The design will simply start wearing out its novelty.
So if there’s budget for it, create different designs for individual emails/newsletters.
Or, there’s a simpler alternative:
Lead with the hero image
If the newsletter is meant to promote something specific, like a product or a post on the blog, then start off with an individual and original hero message each time.
That way, even if the core of the design is the same, at least the main header image makes every message visually distinguishable.
Here’s an example from FC Barcelona, the football club:
Every newsletter looks quite the same, and the only major difference is that first image.
Use plain text with caution
There’s an interesting trend in newsletter design, and it’s been with us for years now.
Actually, it’s not a trend in newsletter design, it’s more like lack thereof.
I’m talking about plain text emails, emails that feature no design, emails that look basically like they’ve been written raw in Gmail and sent out.
The advantage of emails like this is that they appear like something a friend would send you. The disadvantage is that you don’t get to use any of your visual arsenal to make the message hit harder.
When use plain text emails? I’d advise only when the copy is top notch and there are no additional storytelling tools needed.
Make it short to get a click
Want people to click a link in the newsletter? Make the message quick and to-the-point. Use design elements to catch the reader’s attention. Literally give them no other option than to click on what you want them to click.
Make it long to get engagement
On the other side of the spectrum, if you want engagement, you probably need to make the whole thing longer. Leave the copy a bit more place to establish a connection with the reader.
Prepare the design in a way that encourages the reader to go deeper and deeper, and get lost in the story being told.
Need more inspiration?
Don’t forget about the extensive collection of creative work on Behance. There are loads of newsletter designs there to keep your inspiration muscle flexed.
What’s your take here? Do you think that newsletter design is evolving just as fast as web design, or maybe things work a little different there?
