Email Newsletter Design Best Practices with 40+ Examples

Updated on March 21, 2023

I’m sure that there were a couple of newsletter design articles you checked out before you found this piece of content.

I did detailed research on this topic as well and bounced into many articles that either felt too general for me or didn’t deal with the whole picture.

I couldn’t find what I was looking for: a comprehensive article that would list email newsletter design best practices, not only for beginners but for seasoned email marketers as well.

That’s why I decided to sum up all my email design expertise using tons of great newsletter examples which will truly inspire you in your next email design project.

Use this blog post as a guide rather than an article to read – I recommend saving it to your bookmarks.

A quick recap for newsletter beginners:

What are the 5 types of newsletters?

Newsletter designs vary depending on their type. Company newsletters have a professional design with branding elements, while industry newsletters prioritize efficiency. Educational newsletters have a casual and varied design, personal newsletters are informal, and promotional newsletters aim to encourage action.

• Company newsletters: These newsletters often have a professional and polished design, reflecting the image of the company. They may include the company’s branding, such as its logo and colors, and may use a corporate font. The layout may be structured, with sections for different types of content, and images may be used sparingly.
• Industry newsletters: These newsletters may also have a professional design, but may be more focused on delivering news and information quickly and efficiently. The layout may be more modular, with sections for headlines, short summaries, and links to more detailed content. Images may be used to illustrate key points or catch the reader’s attention.
• Educational newsletters: These newsletters may have a more casual and approachable design, reflecting the tone of the content. They may use a mix of fonts and colors to create a friendly and engaging feel. The layout may be more varied, with a mix of short and long articles, images, and other visual elements.
• Personal newsletters: These newsletters may have a more informal and personalized design, reflecting the writer’s style and personality. They may use a mix of fonts, colors, and images to create a unique look and feel. The layout may be less structured, with a more conversational tone and a mix of personal anecdotes, recommendations, and other content.
• Promotional newsletters: These newsletters may have a more sales-oriented design, with a focus on grabbing the reader’s attention and encouraging them to take action. They may use bold fonts, bright colors, and eye-catching images to create a sense of urgency or excitement. The layout may be structured around a specific offer or promotion, with clear calls-to-action and links to landing pages or other resources.

How to design a newsletter

Regardless of your newsletter’s audience or goal, you need to plan the copy and design principles based on your marketing strategy before you start designing the final newsletter template. A company newsletter or ecommerce newsletter should be a bit different, general email newsletter templates will not fulfill the job.

It’s a process that involves copywriting, design, and a bit of email-specific restrictions to come up with the right structure – you need to check it for mobile devices and make sure that the cta button is always clickable, etc.

In the following sections, you can learn about the steps and stages of designing a successful newsletter design while at the end of the article you will find some examples for inspiration.

Before I jump into the different parts of email design, let me start with an all-time favorite question:

Email design or email content first?

It’s a long-debated question, but still worth mentioning, since the web is full of free responsive email newsletters that include Lorem ipsum only. These are mostly leveraging a general newsletter layout and having lorem ipsum as text.

What’s wrong with Lorem ipsum?

Nothing, when you know what will replace Lorem ipsum in your design. Never start working on the design until you are not sure what the content will be.

Why?

Content should come first. If you can’t come up with the content, how do you imagine anybody to come up with the right design for your need? It doesn’t matter if we’re talking about a newsletter design or a website.

Sit down and write the copy of your email as soon as you can. It will give you a clear idea of the look and feel, even if you are not a designer.

Besides the email copy, it’s useful to come up with an email design brief, even if you don’t work with an agency but instead use a DIY email builder to design your newsletter.

What should an email design brief include?

The goal of the email design brief is to have answers to all the common questions a designer might have when working on your project. When you have a newsletter outline, you can start on your brief.

Objectives and Goals

What’s your goal with the design? Do you want to sell something or deliver useful information? In case of a newsletter design project, the information should be front and center, and sales should be secondary.

Budget and schedule

It’s important to clarify deadlines and cost limitations as early as possible. If you create the design for yourself, the cost side is not that important, but timing is. If your email is part of automation or a series, you should plan the whole thing accordingly.

Target audience

Who’s your email for? Who are on your email list? The basic principles of a design can greatly differ if it’s for millennials or for people over 50.

Subject line

It might sound strange to include the subject line in an email design brief, but let me tell you why it’s needed. Your subscribers decide to open your email mostly based on the subject line, so this is the only thing they read before opening the email itself. The subject line will already set some expectations in their minds, and if it’s focused on a single product, for example, that product should be at the center of your design.

Email copy

What’s the message that you want to deliver with your newsletter design? Write the actual email copy. It doesn’t matter if it’s not 100% finalized yet, but aim to get as close as possible to the final version. Make sure that the copy complies with your writing style and matches the language of your audience. Your writing style will greatly influence the mood of the design as well.

Images, graphics, or any visual material you want to be included.

Include your logo, the photo of your team, product, and anything that you want to be present in the newsletter design. For example, if you want a headshot to be included in the footer/signature, include that photo in the brief.

Targeted email clients

This is an email-specific question that needs to be addressed, due to the different limitations of email clients. For example, if 90% of your audience uses Apple devices, you can use fancy fonts and interactive elements in your design. If they use old school Outlooks, you have to keep the design more minimal.

Style guide

If you have specific brand colors, fonts or spacing requirements mention those in your style guide for newsletter designs.

Don’ts

If there are certain things that you don’t want to include in the newsletter for some reason list them out. Maybe you don’t want a three-column layout since based on previous A/B tests you already know that a single-column layout works better for your audience.

Before you start your next newsletter design, come up with a detailed email design guide, for your own sake.

Now let’s move on and analyze which email design best practices should you follow to make your subscribers engage more with your content.

How to create a great email newsletter design

To be honest, a newsletter design doesn’t feel like an interesting project, since in most cases the goal of a newsletter is quite simple: tell subscribers about the latest news, offers or articles of a website.

It’s a challenge for any designer to come up with a compelling newsletter design. But it’s not an impossible challenge.

By reading this article, you’ll learn how to make yours one of the beautiful ones.

In order to create a good email design, we recommend you to use a professional email newsletter designer because of it’s flexible drag’n’drop editor. You can craft a beautiful email within minutes. There are great email builders & designers that you can use for free.

For example, in Chamaileon, you can create an email newsletter that renders perfectly on all devices- it’s fully responsive. You can create your email for free by accessing it here.

While designing a product launch email, you need to follow these best practices:

Let’s start with two great newsletter design examples to give you an idea what you can get if you follow the best practices listed in this article.

This one from Designernews is a nice-looking newsletter that delivers the latest news from the community along with a bit of promoted content.

Does it look fancy? Well, it might not be fancy, but it’s very clean and to the point. Appealing to the eye. Easy to scan. Easy to consume. So it’s perfect for designers who live their lives under time pressure and want to get jobs done quickly.

Let’s take a look at another beautiful newsletter from Really Good Emails.

This one is more colorful and playful than the Designernews newsletter design, simply because “fun” is an important part of the Reallygoodemails brand.

The logo, the small emoticon, the little paper planes, clouds, envelopes and the colorful email newsletters with a mixture of fun in the email copy make it a newsletter that most subscribers can’t wait to open every Friday.

I’m curious to know what their open rate is for these newsletters, but I’m pretty sure that it’s well above 25%. (I’ll ask them and update the article if they share this information with me).

What’s similar in these two email newsletters? I’ll list most of those common traits among the newsletter design best practices below.

Keep your email width 600 px as it is recommended in most cases

600 px has been almost a standard for email width in the email industry since it’s a number which works well in most email clients still today.

There are many companies that experiment with various email widths, but 600 px seems to remain a quasi-standard for many designers and email coders.

If you wish, you can move up to 640-650 px without any problems. Those widths will work well in most email clients, but anything above might cause problems in Yahoo Mail, for example.

We have a very detailed 2,000+ word article about the limitations of email design width and size for you if you want to learn more about this topic.

Use the newsletter header design best practice

For many years a newsletter header used to have the following elements:

• Preheader: a short line which stands for the preview text in most email clients and a “view online” / “view in browser” link, where users can click if the design is ruined on some email clients.
• Logo: Helps subscribers to identify who the email is coming from.
• Navigation menu: A website-like menu where the most visited parts of the website are highlighted.

Recently, preheaders started to disappear from email designs, maybe because email service providers like MailChimp started to introduce an option to add the preview text into the newsletter as part of the email campaign creation process.

Another reason for their disappearance is that the view online / view in browser options are less used in properly-coded responsive email newsletters. Users don’t really click those links if the email falls apart on their mobile. They instead delete the email or unsubscribe.

If you have properly-coded responsive email newsletter and either an email builder or ESP that supports the addition of the preview text, you can get rid of the preheader without problems.

Check out this newsletter header design from Starbucks:

Source: Beansnrice.com

There’s no preheader in the email, but the logo and a simple navigation menu are present, just like in the Designernews newsletter above.

Sometimes there’s no preheader and no navigation menu either. Just a logo or a visual item which clearly identifies the brand.

Source: Chanel.com

Source: Uber.com

The bigger brand you have, the less information you have to involve in your header.

Apple is famous for their minimalist and clean designs, so they even dare to involve only a minor logo in the top left corner of their newsletter header sometimes, and that’s it.

Source: Apple.com

You don’t have to stick to the rules always. You can mix them up the way you want, depending on your audience. For example, you can experiment with adding social sharing in the header like Litmus does in the newsletter below.

source: Litmus.com

Or IFMA Central Ohio which left out the logo from the newsletters and focused on the invitation right away.

source: Pinterest.com

Use the newsletter navigation bar design best practice

The use of navigation bar in email designs is derived from web design. A regular mistake marketers make with navigation bars in email is that they try to replicate the website’s experience inside the email.

But an email ≠ a website!

What’s the problem with navigation bars in email design in general?

They simply break the flow of the email. Imagine that:

• Your subscriber reads your charming subject line about a great offer with 30% off.
• When he opens your email, what he sees first is not the offer, but a thick navigation bar, which pushed down the content he was looking for based on the subject line.

Is it a good user experience? Not really.

The same rule applies to email design as in landing page design:

• The less CTAs (call to actions) you have, the higher your CTR (click through rates) will be.
• Leave out the navigation menu if possible, since it’s just a way to distract your subscribers from the primary goal of your email and having too many links might even increase the likelihood of being considered as SPAM.

Why can navigation bars still be useful in a classic newsletter?

In your newsletter, you are not in “sales” mode in most of the cases. You rather aim to deliver valuable information to your subscribers instead of being pushy with your product.

Adding a small navigation bar which points to your most important lead generation pages or selected discounts might be a smart decision to make in your newsletter designs. Make a good newsletter outline and design your lead generation pages following the best practices.

Let’s take a look at the following newsletter navigation bar from REI, an e-commerce site selling outdoor equipment.

Source: Rei.com

They pretty much replicated the most of the website menu right inside their newsletter.

This menu might work on desktop and webmail clients when viewed on a laptop or tablet, but such a long menu can’t work on smartphones. That’s why they reduced the number of menu elements on mobile.

The key takeaway is that if for some reason you decide to add an extensive navigation bar in your email, make sure that it is consumable on mobile as well.

Here’s another example from GAP, a fashion brand which sells clothing online as well.

Source: Gap.com

They use a very minimal design, which is good for some reasons:

• It’s easy to consume for the eye even if ALL CAPS makes it harder to read.
• It takes a small real estate from the screen (on laptop and tablet) but has to be reduced in number on mobile.
• It requires less complex HTML code to be used, which helps with SPAM filters.

If you or your email designer/developer is in for fancy things, you might try to implement a so-called hamburger menu in your email newsletters.

Source: Freshinbox.com

It’s called “hamburger menu” since the small navigation icon including three horizontal stripes looks like a minimal hamburger. When you click on the icon, it’ll show what’s inside, just like when you would tear a hamburger apart into parts.

Those who want to see your navigation menu can tap on the hamburger and see all your links listed under each other.

The point of using hamburger menu is that you can hide the navigation bar completely on smartphones, saving a bunch of space and still packing your navigation into the mobile version of your newsletter.

Coding a hamburger menu might not be easy though, and you won’t find ready-made free responsive email newsletters online that include a hamburger menu.

Check out what GoPro did in the below newsletter.

Source: GoPro.com, Stylecampaign.com

They used only three navigation options in the desktop version of the email and decided to hide the navigation completely on the mobile version of the newsletter. The three options could have easily fit into the mobile screen as text links if they wanted to, so I suppose there was a reason for hiding those elements on mobile.

If you decide to use a navigation bar in your next newsletter design, I would advise you to:

• Keep the number of navigation links minimal. Max 5, but ideally no more than 3. If you know enough about your subscribers’ preferences, you can use advanced email personalization to only offer those options which are relevant.
• Be consistent. Have the same links in your newsletters so your subscribers can get used to it and will know that if they can’t find the real value in your email, there’s the navigation option they can use to get to your “latest deals”, for example.
• A/B test if you really need a navigation bar or not. If you do it the right way, a navigation bar may come in handy, but if overdone, it will negatively impact your overall conversions. Only your own tests can tell if a navigation bar is a win or lose for you.

Let’s move on from newsletter headers to hero unit design, which is usually the most important part of any email.

Use the hero section/unit design

The hero section/unit is the part of your business newsletter where you want to direct the most attention. Generally speaking, it contains the main message and a big call-to-action (CTA).

The whole hero image concept comes again from web design, just like navigation bars, and it became fashionable in the last couple of years.

The image in most cases is in the background while the text and CTA are overlaid on top of it.

Unfortunately, background images are not supported in Outlooks and Outlook.com, so in many cases, email designers have to look for a different approach or choose tricky ways to still make that single background image work in Outlooks as well.

The best practice would be to avoid adding the hero image as a background image to your newsletter and instead add the hero image and the text into separate containers.

Check out the below example from Hawaiian Airlines, which does a great job in separating the background image and content.

Source: Hawaiian Airlines, Reallygoodemails.com

Since the plane is right under the main text and CTA, it can be added as a content image to the newsletter instead of adding as a background image.

If it’s not clear to you what the difference is between a content image and a background image, check out the following guide on email layout and structure.

Here’s another great example from clothing retailer company Frank and Oak.

Source: Frankandoak.com, Reallygoodemails.com

In this example, you see that they used a two column layout for their hero section. An image is placed into the left column, while the main text and call to action go to to the right column which has only a single background color — something supported in all email clients.

Their email design team must be full of smart people, since they went this route instead of exactly replicating their website’s look and feel (which includes huge background images and overlaid texts).

Email design requires some compromise in many cases, and you either have to accept the limitations or spend more on your email newsletter and get them custom-coded.

If you’re tricky enough, you can sort out many things and even create something almost like this using an email builder and smart image slicing.

Source: Pinterest.com

Be careful with responsive email newsletters that you can purchase online. Many of them involve background images which won’t work on Outlooks and Outlook.com.

Source: Pinterest.com

Avoid designs like above, or make sure that it is mentioned somewhere on the template’s page that they made the background images work in Outlooks as well.

Use animated GIFs in the hero section/unit

Since embedded video is not supported in email, most email designers turn to animated GIFs to bring that extra interaction into email newsletters as well.

GIFs are a very popular replacement for static hero images these days, mostly because they are really effective in triggering an emotional response.

I looked for A/B tests that can really prove how can animated GIFs improve email revenue, and found the below case study on Fueltravel.com.

Source: Fueltravel.com

They A/B tested a static image vs. the animated GIF version that you can see in the newsletter above. Nothing else was changed in the design of course.

What’s your guess how much CTR improvement did they get?

21% was the biggest CTR improvement with unengaged users, who haven’t interacted with any of the emails in the past months, and 13% increase in case of engaged users, who regularly interact with their emails.

Both improvements are significant especially if they result in increased email ROI and conversion, which was not measured in this A/B test, unfortunately.

Another test by Dell (2014) proved to be extremely successful since it increased email revenue by 109%!

Source: Marketingsherpa.com

Instead of a static product image, they used an animated GIF which showed the product’s various uses in a glance.

Since 2014 animations became more common in the email industry, so maybe an animated GIF won’t double your revenues right away, but I’m sure it will increase email engagement and conversions by 10% at least, in most cases.

Now let’s look at other inspiring examples for animated GIFs in newsletters from various industries.

Source: Oshkosh.com

For example, OshKosh, an online children’s clothing retailer, brought some life into their email by adding a colorful but still very simple animated GIF as the hero image of their newsletter.

Here’s another simple one from Blacktux.com, which plays with black and white.

Source: Theblacktux.com, Reallygoodemails.com

And a more complex one with custom-made animation from Harry’s.

Source: Harrys.com, Reallygoodemails.com

Here’s a very exciting one by Complex.com. It looks cool, isn’t it?

Source: Complex.com, Reallygoodemails.com

Yes, but the problem is that the size of this email was 6.4 MB! Pretty huge size for an email right? Downloading an email like this might take 10+ seconds on a mobile connection I’m sure.

Generally speaking, I would not advise you to go for such complex animations and huge email size, since instead of a boost in conversion or CTR, you might end up with lost subscribers.

People tend to close, delete an email or even unsubscribe from your list if your newsletter doesn’t show as expected on mobile.

How would you react if you open this email on your mobile while on the go with only a 3G connection?

Pretty disappointed, since most of the images wouldn’t be visible at first.

Challenges with animated GIFs in email

Thankfully animated GIFs are supported by most email clients except for Outlook 2007-2013 and Windows Phone. In these email clients, the animations don’t play and only the first frame of the GIF is displayed.

When using animated GIFs in your email newsletter make sure that the first frame of your animation contains the main message for those who use email clients which block animations.

Besides compatibility there are couple more issues with animated GIFs which you should tackle:

• Optimize GIF size – Unfortunately animated GIFs can easily end up being over 2 MB in size if you want to deliver a video-like experience. Email size really matters when it comes to deliverability and subscriber experience. Always make sure that you optimize your GIFs with an image optimizer solution. Aim to bring down your total email size under 1 MB. The smaller, the better!
• Use simple, easy to consume GIFs which are understandable at first glance and won’t confuse your subscribers with a long message. A less complex animation usually means smaller GIF size, which is generally good for you, for the reasons mentioned in the previous point.
• Make sure that the GIF is noticed by everybody who opened your email. The easiest way to make sure that they’ll see your GIF is to add it as a hero image to your newsletter. If you want to emphasize your GIF, you should also get rid of the navigation menu of your email newsletter or at least make it less prominent.
• Include a separate call to action text and button. In most cases, you’ll need to reinforce the visual message of your animated GIF with a line of conversion centric email copy and a dominant call to action button.
• Don’t overuse animated GIFs in email. Of course, animated GIFs are fun, and there are tons of them on Giphy you could use. But if you use them in all your emails, your audience might get bored with you and your content.

If you want a video tutorial with exact steps on how to insert a GIF to your email in the email editor you can see it here.

Learn how 30 brands use GIFs in their email designs to boost engagement.

Use best recommended fonts for your email newsletter

Before we would dive into which trendy fonts should you use in your newsletter, let me clarify one thing:

Only web-safe fonts work properly in all email clients!

• Arial
• Courier
• Georgia
• Lucinda Sans
• Lucinda Console
• Tahoma
• Times New Roman
• Trebuchet
• Verdana

Web-safe fonts are boring, right?

Yes, they are boring for many, because most of them have been around since commercial internet was born.

You can use not only web-safe fonts in email, but also fancy Google Fonts or even others, by creating font stacks in CSS. We are adding support for Google Fonts in Chamaileon.io, so you’ll be able to choose from a host of options when creating newsletters.

BUT when you use Google Fonts or other web fonts in your email, you have to accept that instead of the font that you chose, a fallback option — a web-safe font — will be displayed in many email clients.

Web fonts are only supported by:

• AOL Mail
• Native Android email app (not Gmail)
• Apple Mail
• iOS Mail
• Outlook 2000
• Outlook.com app

“Fun” fact: Google Fonts don’t work even in Gmail. You might ask: “What???”. Yes, you heard it properly. There are strange things you have to accept in email design.

We would advise that you use web fonts only if most of your audience uses Apple devices. If the majority is on Android or uses Outlook, you’re better to stay with web-safe fonts.

But which web-safe fonts should you choose?

Source: Mashable.com

According to a report by Bloomberg both Arial and Helvetica are bad for email, even if for many years Arial seemed to be the standard web font on the web.

Designers argue that both fonts have “ambiguous” letter shapes — their b, d, p, and q are mirrored forms of each other, which makes them harder to read in longer texts.

Ok, so no Helvetica or Arial… then what?

Georgia and Verdana seem to be the most popular fonts in email due to their readability and widespread support in email clients.

For long-form text, we advise you to choose from these two, and for headlines, you can either use other web safe fonts or experiment with Google Fonts or similar — knowing that on Outlooks and Gmail, a fallback option will be displayed instead.

Sometimes even in an email newsletter, you want some text to appear in custom fonts:

• a logo
• a precious headline
• a promo text
• a discount

The ultimate fallback option is to add your text as an image instead.

But make sure that the given texts work on mobile screens as well, when scaled down and reordered on mobile. Or use the combination of our hide on mobile/desktop feature to swap out the given image with another one on mobile.

The only problem with adding text as an image is that it won’t show in case images are blocked in the given email client — mostly happens with Outlooks again.

You see? That’s why the bulletproof option is to go with web-safe fonts only. But there are fewer and fewer trendy-looking newsletters which would choose the safe way.

Best practice font size and line height in email

There’s no uniform rule. If you have an older audience, it will make their life easier if you use larger fonts, while for young people, smaller fonts won’t cause any problems.

Industry best practice suggests that:

• Header font size should be around 22 – 28 px.
• Body font size should be in the range of 14 – 18 px.
• Line height should be around 1.4 – 1.5 times more than the font size, for best readability.

These are just ballpark numbers; you might discover that your audience preferences are different.

Unfortunately, there’s no email case study online which would compare how different font sizes influence email conversions.

Let me show you an example from Clicklaboratory.

Simply by changing the font size from 10 to 13 px and adding some more line height, they managed to improve the bounce rate of the Numara website by 10%, exit rate by 19%, pages per visit by 24%, and conversions by a stunning 133%.

Do you still use small fonts and single line height in your emails?

It’s time for a change.

If you do so, please A/B test the effect of your changes and share the results with us in a comment. We would love to publish a case study on our site about how can different font sizes influence email conversions.

Now let’s move on to couple examples for creative font use in email newsletters.

Source: Kuratedemail.co

This one from Airbnb features a background image with an overlaid huge BEACH LIFE text (as an image) and some additional (Let’s be honest…) text on the image as well.

What’s the problem with this one?

The background image, which won’t work in most Outlooks. I tested this newsletter, and it fell apart in Outlook 2007, 2010, 2013, 2016, and even in Gmail.

You could create a design like this in a professional email builder without problems if you understand how an email layout is built up.

Let me show you what I mean.

This part should be added as a content image. Not as a background image with overlaid image.

This part could be added as a separate block of text with a background image and a fallback color picked from the background image.

Not that tricky, right? But still, you can see that even a huge company like Airbnb doesn’t really care about issues on Outlooks… surprising indeed.

You can do better than this simply by using an email builder like Chamaileon.io.

Here’s a simple design which plays with fonts in a clever way.

Source: Trunkclub.com, Reallygoodemails.com

Simple design, yet compelling to the eye.

The problem is that the whole cool part is an image. They didn’t want to mess around with fonts, fallback options, or a separate call-to-action. They instead used the old approach: add it as an image.

It’s the easiest solution; I have to admit.

It might work if you style your image properly and make sure that it will be readable on desktop and mobile too while keeping a healthy (50:50) text to image ratio.

Here’s a beautiful, custom-coded responsive email newsletter from Litmus with 1390 px maximum width.

source: Litmus.com, Reallygoodemails.com

Our friends at Litmus always come up with beautiful and unique email newsletters so they can show off their email coding expertise.

Here’s an example from Evernote including Caecilia LT Std Light, with fallbacks to Helvetica and Arial.

Source: Evernote.com, Reallygoodemails.com

This other one from Lyft features Gotham font with fallbacks to Montserrat (a Google Font), Proxima Nova, Helvetica Neue, Helvetica, Arial, and sans-serif.

Source: Lyft.com, Reallygoodemails.com

These examples show you that if you want to create a trendy email newsletter design, you have to move away from using web-safe fonts only and be creative with font use.

The limit of your creativity is only your budget really since a very custom email design can cost thousands of dollars or you can rely on DIY email builder and design your own email newsletters using Google Fonts.

We went through headers, hero section, fonts, now let’s move on to call to action (CTA) design, and we’ll finish with footer design.

Bonus PDF: Get access to the free PDF version of this guide.

Use the Call to action (CTA) best practices in your business newsletter

Just because you have a beautiful call to action button in your email, it doesn’t mean that everybody will click there.

The design is only one part of the story in this case as well. Call to action copy is at least as important, and of course previous parts of your email newsletter — including email header, hero image, headline — matter as well.

What makes a good email call to action?

• Actionable language – No “Click here” or “Read more” please. Instead use active language, which has a sense of urgency and clearly presents what happens after someone clicks the button.
• Get your free product sample now
• Start your 14-day free trial
• Shop sleeping bags now
• Try one month free
• Order online now
• Sign up for early access
• Make the CTA stand out – Your call to action must stand out from its environment, so always make sure that it has:
• Easily noticeable color
• Substantial white-space around
• Font type and spacing, which make it readable at first glance
• Make it responsive – Enlarge it on mobile screens, stretch it to full-width and make it easily clickable on smartphones as well.
• Personalize the call to action – Customize it not only according to the email’s content but also to the preferences of the subscriber who reads the email. In-depth personalization is a complex issue but the deeper you go with targeting and personalization, the higher your email conversions will be.
• Minimize the number of CTAs – Generally speaking, the fewer call to actions you have in an email newsletter the higher your click-through rates will be. The abundance of options can easily overwhelm people.

In an email newsletter, you’ll usually end up with a series of call to actions. So in this case, make sure that the one you want them to interact with is the most prominent part of your email design and that secondary actions are well separated from that one.

Is there an ideal CTA size, color or shape?

Apple suggests any touch point to be at least 44 px tall. That’s why we would advise you to have a CTA which is taller than 44 px. The average CTA height is 47.9 px, and the most popular CTA height is 50 px — a round number at least.

Generally accepted best practice is to match the CTA color with a brand color.

Source: Reallygoodemails.com

The study shows that blue is by far the most used call-to-action color in an email. Actually blue is the all-time favorite color on the web, so it’s not that surprising that email designers love blue as well.

In a recent global survey, Mars Green was chosen as the World’s favorite color. Although it’s called “Mars Green” nobody can really decide if it’s green or blue.

Source: Telegraph.co.uk

What do you think, is it blue or green? 🙂

Don’t worry if your button color is not blue. You are not necessarily doomed. If you find that red, yellow, or green fit your design better, go for it.

Every color seems to work for buttons except for brown, which was not used in any of the designs studied by Reallygoodemails. I can’t remember any design either where brown would be used as a CTA color, online or offline.

Buttons with rounded edges seem to be the most favored (54%), square buttons are in the second position (28%) and pill-shaped are the last (18% and trending upwards).

If your button is properly sized, has actionable language, has an eye-catching color, you are good to go, but don’t forget it’s easy to A/B test your email CTA, so test variations frequently.

Let’s see a couple of inspiring email newsletter call-to-action designs. I haven’t included standard designs, only those which feature something extraordinary.

Source: Reallygoodemails.com

This email from KLM matches the color of the brand with the hero image and the call-to-action as well.

What a smart way of adding a bit of passion and pinch of summer into a “boring” newsletter.

This email from Alit uses a very balanced, light pink color scheme to show off their rosé wine.

source: Reallygoodemails.com

Notice the actionable call-to-action text as well. No “order now”; instead they chose to use something more surprising, yet easy to understand.

Here’s a fun example from Semalt’s promotional email.

Source: Reallygoodemails.com

They feature not only a creative animated GIF, but an irregular call-to-action as well, which will definitely grab your attention if you open the email.

They used an unusual CTA text, which doesn’t make too much sense at first sight, but combined with the animated GIF, it works.

Check out the following newsletter from Litmus.

Source: Litmus.com, Reallygoodemails.com

It’s quite a long newsletter indeed, but it’s definitely attractive to the eye and easy to consume. They play creatively with their different brand colors in the newsletter (and usually on their website as well), which makes it an interesting a newsletter that you can’t wait to open.

Don’t be afraid to bring some fun into your newsletters. You send it to human beings anyway, who are flood with boring stuff. If you can make them smile and remember you for something, you’re already much better than most companies they receive emails from.

Here’s a great example of smart use of contrasting colors, spiced with a drop shadow-like bottom border.

Source: Nordvpn.com, Reallygoodemails.com

Fonts, buttons, colors, and spacing all play an essential role in the overall look and feel of your newsletter.

In the previous parts of the article I showed you a bunch of examples of the separate elements, now let’s move on and check out what are the characteristic properties featured in eye-catching content blocks.

Don’t forget about the email content block design best practices

It is really difficult to decode what makes one design beautiful while another is offensive to our eyes, but let’s try to find the most common traits of nice email designs in general.

Keep a healthy image to text ratio

According to Email on Acid and Return Path, you should aim for a 60/40 text to image ratio in your email newsletters.

It’s worth it to note that your email should contain at least 500 characters of text, since if you have less, you are quite likely to get trapped in Outlooks’ SPAM filters.

Another best practice advice from Mailchimp says that you should aim for an 80/20 text to image ratio, meaning that only a fraction of your email should involve images.

No matter if you stick to 60% or 80% make sure:

• Your images have alternative texts (alt tags).
• Avoid sending emails which contain only a single image.
• Test the SPAM score of your emails and tweak the content, as long as it’s needed.

Optimize for scanning and easy readability

According to an old but gold UX study, most people read in an F shape on the web.

Source: Nngroup.com

The same is true for emails, with an important caveat: namely that most of us don’t read an email at first, but rather we just scan the content to figure out what is it all about.

Maybe a captivating storyline can make somebody read your email in its whole length, but it’s rarely the case with most newsletters.

Make use of white space

Don’t stuff content together. Let the different headers, texts, buttons, images, and content sections of your newsletter breath.

White space helps a lot with readability in general, and also makes the flow of the newsletter easier to follow.

Important to note: be consistent with white space! Use the same spacings in text and between your email content blocks as well, so people won’t be frustrated by different spacings when they scroll through your email newsletter.

Use quality images and icons only

No more boring stock photos and clipart icons, please! Maybe those can work for older audiences, but believe me, people under the age of 50 will get goosebumps when they see irrationally happy faces around.

Source: Shutterstock.com

Thankfully there are many websites where you can find free, high-quality images for your email designs.

If you want to design images with custom overlaid text, for example, you can use a tool like Canva.com, which already includes a bunch of great images, fonts, and responsive layouts that you can easily repurpose for your use case.

Keep it clean and simple

The clean and simple design style has been trending in the last couple years both on the web and in email as well.

Nowadays a clean design is not a differentiator, but rather a requirement if you want to stay among the most advanced players in your industry.

Of course, there are many old-school websites and email newsletters out there with outdated, cluttered designs, flood with information. But their days are numbered — even if they are still successful to some extent.

Keep an eye on email and web design trends

There are other trends in design besides clean and simple design every year. If you want to create really fashionable and innovative designs, you have to keep an eye on design trends for sure.

There are only a couple sites like reddit or craigslist which managed to live on with a superb old design.

Don’t take them as good examples for your next email or web design project. These sites live on not because of their design, but because of the community that they managed to cultivate during those years.

Now let’s analyze a couple of great email content block designs that you could use in your next newsletter.

Note: all examples in the rest of the article are sourced from the wonderful Reallygoodemails.com.

Single column newsletter block designs

What makes this one great?

• Unique and stylish hero image
• Easy to read headline and text
• Prominent CTA design

Nothing special right? But it still works:

• Meaningful custom hero image
• Easy to consume heading and text
• Simple, to the point CTA

Another simple one from Zapier:

• Custom hero image
• Title included as HTML text, not written on the image
• Big contrasting button with clear call-to-action

Custom icon and a nice background image can mean magic:

• Huge headline
• Nice looking background image (won’t work on Outlook but has a similar background color as fallback)
• Simple icon where the glare effects are animated (check the animated version of the email here)

Two-column email newsletter block designs

Even two-column responsive layouts can look nice if done the right way, like in this example from Airbnb.

• Rounded image corners
• Colorful texts
• Images of the high standard

A simple icon, and a contrasting call to action button with actionable text.

A targeted offer can do the trick as well:

• Personalized offer
• Easy to recognize product image
• Button and discount presented in lively colors

You can think outside the box and play with different responsive layouts and colors like Helix Sleep does.

Their design is definitely compelling to the eye. I would only add some more white space to the top of the call-to-action and would also increase font size by 50% or so.

Custom images and creative email copywriting make this one by ofakind.com stand out from the crowd.

In this simple two-column example Campaign Monitor sticks with their brand colors in the columns.

Three or more column email newsletter block designs

Three or four-column layouts are far less popular than two-column ones because it’s usually hard to fit in the considerable amount of written information into 200 px wide containers.

That’s the reason why most of these designs include very short text, a compelling image and a small, to the point call-to-action.

Penguin.co.uk spices up the game with creative color use in their newsletter.

Simple and very minimal design can work as well with high-quality product photos by Huckberry.com.

Even four-column layouts can learn if you include the only minimal call to action text like Target does.

Just make sure that you reorder the columns on mobile and you make the whole image clickable, to make these elements easy to tap on mobile screens as well.

I hope the above inspirations will help you to create really nice newsletters even on your own using an email builder like Chamaileon.io.

Newsletter designs don’t have to be boring at all as you could see from all the examples above.

You can play around with colors, white-space, images, and different layouts as well. All of them will cause your subscribers to feel different emotions.

Believe me, it’s all about emotions. If you can’t make them feel anything when they open your email… you lost. They’ll move on.

These feel like closing thoughts now, but we are not there yet. There’s one more design piece I wanted to walk you through, and that’s the footer.

Newsletter footer best practices (+ examples)

Sine you need to include an email footer in your newsletter, you need to take a look at the email footer best practices. Creating a newsletter footer design is not easy as you may think.

What is an email footer?

It’s a block at the end of your newsletter where you need to include certain information.

Although the footer is the last item in your email newsletter, it’s still an important part of your email design. Why?

People expect an email footer to be present in a newsletter no matter what.

How to use the email footer accordingly

If you fail to include an understandable and visually appealing footer design in your email newsletter, you might mess up the whole user experience for users who get to the end of your message.

You need to comply CAN-SPAM Act of 2003 to make sure your newsletter doesn’t end up in the spam folder. Information that is required in the CAN-SPAM email footer is the company name, company street address, city, state and the unsubscribe link.

Also, if you will use a newsletter legal disclaimer you need to be especially careful. There are specific types of disclaimers, for contracts, security, confidentiality, etc.

There are certain elements that you must include in your email footer because of certain SPAM regulations, and others which should be there to meet the expectations of your audience.

But what are these?

Company and/or contact information

This should include all possible ways they can contact you if they have something to say.

• Reference to your website – You should include a visible link to your website. The link can be either a simple text link or you can include your logo and add the link to it.
• Your email address – Where they can get in touch with you easily. It’s not related to the footer, but make sure that if they hit reply to your newsletter what they get is not a “no-reply@” email address, but one which is monitored by your team.
• Your physical address – Required mostly because of certain SPAM regulations, but can be useful if you have a physical shop where you sell your products or services.

Social media sharing and follow options

We know that email is one of the most effective online marketing channels, but it doesn’t mean that you don’t have to deal with other channels.

According to Salesforce, it takes 6 to 8 touches to generate a viable sales lead, so the more channels you use to communicate with your customers, the higher chance you have to make them buy from you (again).

Maybe only very few people will share your email using these icons or even less will follow you on Twitter for example. But it’s not a big effort to add these options there, right?

Just make social sharing and follow options available at their fingertips, to maximize your chances of spreading the word or your following on other channels.

Other elements

• Permission reminder aka, Why you’re receiving this email. People receive hundreds of promotional emails from companies and sometimes they simply don’t remember when and how they subscribed to a newsletter. This handy reminder can help them to put your email into the right drawer in their minds.

A good permission reminder should clearly clarify who sent the email and when they signed up to that list. If you are not clear enough and they can’t remember you, your email can be easily marked as SPAM.

• Privacy policy – Data privacy is an ever increasing concern for most Internet users these days. A link to your privacy policy simply shows them that you take care of their information in the proper way.
• Copyright – Not a must-have element of the footer, but it’s a best practice (just like on websites) to mention that the content delivered belongs to your Brand ©.
• Unsubscribe or update preferences – Of course you don’t want to lose your subscribers, but you don’t want SPAM complaints either. That’s the reason why you should make the unsubscribe link or update preferences link clearly visible in the footer of your email newsletter.

Those who are not interested anymore can easily opt out from your list. If they can’t find it, they are very likely to mark your email as SPAM.

So this is pretty much the main content you should include in your email footer. But of course, you can extend it with additional points if you think those are relevant to your audience.

How to make your email newsletter footer compelling for the eye?

Make it simple and easy to consume – Don’t flood your email subscribers with too much information in the footer.

Here are some great email marketing footer examples that will help you with your email footer design.

If you want to include a sitemap-like link collection in the footer, make sure that it’s not crowded and it’s easy to scan, like in the example below from Algolia.com.

Focus and hierarchy – Present the most important action you want your subscribers to make on the very top and include the rest right under.

Check out this example from Manchester United, which clearly shows that they are only focused on increasing their following on other channels.

The only bad thing about this email is the closing sentence: “Please DO NOT reply to this email”. This is something you should avoid in your email footers. Use an email address for sending which accepts replies from your subscribers.

Make it useful – Those people who scroll down to the end of your newsletter are usually your best customers, so your goal should be to keep them and engage with them in any possible way.

Use the footer to show them that you care about them and you are ready to address any of their questions. Show that you care about them, like in the below example from The New York Times.

Use background colors creatively – As you could see all the above examples took advantage of background colors and made the “boring” closing part of the email more lively.

The right use of colors can do some magic and make your whole email newsletter more memorable and easier to associate with your brand.

The above example from Flywheel reuses the primary colors of their brand in the footer. You should do the same in your footer designs since it helps your subscribers to identify the email and will also make it easier for them to recognize your brand when seen elsewhere.

Tookapic has a different approach to their footer. Instead of strengthening their brand, they focus on delivering a thoughtful message to their readers.

Even a single line like this can add some value to your newsletter and can mean a lot to some of your audience.

The most important message for you:

Be brave and creative with your newsletter designs!

Your email newsletter designs shouldn’t be boring after all!

At least not yours! If you read through this article till the very end, you learned a lot already. Now it’s time to take action and spice up your newsletter designs.

Since it was a superb long article let me sum up the most important points for you:

• Keep in mind that email design has its limitations.
• Use a professional email builder
• Your email header should represent your brand and include your logo and minimal navigation menu.
• Try to avoid using background images in the hero section/unit of your newsletter, since those won’t show on Outlooks, or if you do so, make sure you add a relevant fallback color.
• Use animated GIFs to bring life into your newsletters, but don’t overdo it!
• Georgia and Verdana are the best web-safe fonts you can use safely in your emails.
• Stick to best practice font sizes:
• Headers: 22 – 28 px
• Body font size: 14 – 18 px
• Line height: 1.4 – 1.5x font size
• The CTA should stand out from your design and include actionable copy!
• Smart use of different colors, quality images, and layouts can make your newsletter content and footer design cause the WOW feeling. If you don’t believe me simply scroll up and check out the 40+ examples I listed in this article.

Bonus material: Free newsletter templates

We recently published our email newsletter collection with more than 100+ predesigned newsletters that you can use for free in your campaigns.

Access the collection here in our app when creating a new email. You can modify them using this free email designer, builder, and editor. Use the flexible drag-n-drop editor and export the code to your ESP.

Wish you a successful campaign!