The Importance Of Email Design: Best Practices, Tips, and Tools

Why Email Design Matters

In his famous “The Design of Everyday Things” book, designer Dan Norman tells how irritated engineers and developers sometimes are when people choose or fail to choose products because of their aesthetics. The golden ratio and all, people are drawn to harmonious things that evoke pleasant emotions. Yet, good design is not (just) about how something looks. It’s about how you structure it and how it works. So don’t worry if the notion of design is alien to you and you think it’s too artistic. It has more to do with science than you might think.

In the case of emails, a well-designed message is not only aesthetically satisfying. It makes sure you reach your business objectives. A good design optimizes every metric there is from clicks to conversions. In one of his email design case studies, designer Andy Birchwood describes how he increased open rates 5 times and got 40% more clicks.

How Email Design Is Different

First, a bit of information about what makes email design unique. Creating email messages is different from developing websites and apps:

• Many CSS and HTML tags don’t work in emails. For example, you can’t superimpose two elements on top of each other as you do on websites. You also can’t add animation to a button. You can’t add things like JavaScript, forms, and parallaxes. In short, email design is a bit more old-fashioned than websites and some of the latest tricks don’t work there. HTML tables rule there as they used to in web design back in the day.
• You cannot design an email as a single picture that makes up the entire message as many websites do. This trick is often used by spammers, so email services are suspicious of such messages and often throw them into spam.
• Emails are opened in different clients: Outlook, Gmail, Apple Mail, etc. Websites are displayed in different browsers too but mail clients are another matter. Sometimes they display messages so differently that you need to have a special kind of expertise to ensure they look OK. What’s more, there’s simply a lot of them. Litmus has a tool that checks your email with 90+ email clients. That’s an impressive number, for sure.

Coding a website and coding an email are two alike but different things. Because of these features, separate professions have even appeared: email designer and email developer.

Email Design Best Practices

Now that you have a basic understanding of what email marketing design is about, let’s turn to the main part of this article: email design best practices.

There are two major things that affect the design of an email:

• Type of email. There are different types of emails: welcome, promo, transactional, newsletters, etc. And you design them differently. While a transactional email is concise and on point, a newsletter can be long, artistic, and complex.
• Target audience. Any marketing effort, email campaigns included, starts with studying the people you’re addressing. A tone of voice that’s great for hipsters and fashionable outsiders, can be totally off the mark if you’re writing to bankers and investors.

Still, there are some general practices that can improve any email message. Let’s look at the most actionable ones.

Add a Strong Subject Line

A subject line is the first thing your reader sees when they open up their email client or receive a notification. Here it is:

A strong subject line is:

• Short.
• Inspiring.
• Contains no spam trigger words.

It can be exact or you can play with it and make it seductively ambiguous so that your readers would want to find out what you mean. It depends on your audience. A subject line about shipping details performs best very concrete whereas you can title a promo message with a bit of imagination.

Another point is the subject line’s ability to stand out among dozens of other messages an average person receives per day. You can make your subject lines more interesting by adding:

• Emojis.
• Names and other personal information.
• Numbers.
• Questions.
• Idioms and metaphors.
• Urgency.

… and An Attention-Grabbing Preheader

Here it is:

You can come up with a smart subject line that might not be very self-explanatory but you still want to keep it. Use a preheader to help it. A preheader is the Robin to your header’s Batman. Don’t repeat the meaning, but make it highlight and support the main point.

You can improve on the pre-header by:

• Adding a call to action.
• Building on curiosity.

Choose The Right Content Length And Create The Text Hierarchy

How long should an email be? There’s no right answer. According to the latest report by AWeber, an average email consists of 434 words. Earlier findings claim that the perfect email length is between 50 and 125 words. Everything depends on your email type and target audience.

Look at this message from Headspace:

Source: Really Good Emails

And here’s me scrolling through a typical Brain Pickings newsletter:

It doesn’t matter how many words your message has. What matters is how relevant it is. Every word, every line should have a purpose. When watching a movie, you can feel a script is good when there’s nothing you can add there and nothing you can take.

Make the content simple and easy to digest and you won’t have to worry about its volume.

People don’t read every single word even when they subscribe to information-packed newsletters. The best-case scenario is they read headers and scan the text, more often than not they scan the headers only, so it’s not a good idea to send a wall of text. Break it into smaller chunks and provide headings.

A few extra suggestions on how to make your messages clearer:

• Place the most important information “above the fold”, in the top part of your email.
• Use sub-headers, bold and italic texts, quotes.
• Play with font sizes.

More on the point of visual hierarchy next.

Use The Layout To Enhance Your Email’s User Experience

As we mentioned earlier, in order for an email to be displayed properly on different devices, designers assemble the layouts using tables, this is what you’ll find in every ESP’s editor. So what you have to work with is a grid. But grids come in different varieties, so what composition to choose? It depends on your template’s goal. Some templates and layouts work with welcome emails, others are great for promoting a new product.

The layout is your message’s backbone so it better be strong and balanced. You decide where the reader’s attention goes and you manage their journey along your message’s path. You have the power to highlight the information you think is important and motivate a user to perform a certain action.

Without a distinct visual hierarchy, a message feels cluttered, unorganized, and hard to consume. And the harder it is to understand what you want from a user, the less likely it is for them to actually do it.

• Use whitespace to give your layout a bit of air.
• Place important elements like CTAs strategically.
• Show the most important and intriguing information above the fold.
• Provide directions.

A couple of examples:

Universe uses the most popular single-column layout when each element has its own line and even shows the direction with an arrow. Source: Really Good Emails

A Kids Book About uses the popular inverted pyramid layout when you build up until a user has nothing to do than to click a button. Source: Really Good Emails

Honey uses the same technique + places the rest of the content into a zig-zag layout that makes it easy for subscribers to scan the content. Really Good Emails

Keep Your Email On-Brand

When choosing the color scheme for your emails, choose your brand colors. Email marketing is perfect for upholding your brand consistency because it gives you much more freedom with design than social networks, for example.

An email is usually a continuation of the website and other brand assets so use the same font family, the same logo, and color combination. This way you’ll preserve the corporate style, and it would be easier for subscribers to recognize you among the incoming mail.

Let’s play a little game. What company sent this email?

It’s Dunkin’ Donuts, of course! Its trademark colors are unmistakable. Source: Really Good Emails

Add Compelling Imagery But Don’t Overdo It

Images in an email must be rich, compelling, fresh, and fulfill a purpose.

• They help to highlight the main point of the message, creating a visual hierarchy with their size, color, and direction.
• They affect feelings much stronger than text. That’s why many companies add illustrations and gifs in their email designs.

Harry’s does it all the time in their cute emails that combine illustrations and animation. Source: Antonio Uve

In the majority of articles about email marketing design, you’ll find a tip to not use stock photos. In our opinion, that is not always the case. The idea is not to use cheesy photos with blank smiles, forced acting, unnatural poses, and situations. If you need some references, take a look at how Vince Vaughn, Dave Franco, and others teamed up with Getty Images to create a set of classic campy office photos as a part of a promo campaign for the Unfinished Business movie.

At the same time, this photo is from Unsplash, it’s stock, it’s free to use, and looks fine:

Getting some chillout vibes from this one. Photo by Marvin Meyer on Unsplash

We recommend you to think in terms of value and not add images just because they are pretty or you think that a reader might get bored without them. You can also incorporate icons to add some visual interest to your email. There are plenty of free icons available online, such as Flaticon, to help you give your email a unique look and feel.

Emails have one more peculiarity — image blocking. It’s when a person blocks image content in emails they receive or their email service does it for them. Solutions:

• Use Alt text to describe what an image is about. The Alt text appears when a subscriber’s pictures are not loaded or are disabled. If you provide the textual description of a picture, subscribers who don’t see it will understand its content. You’ll also help people with visual impairments as their voice assistants read Alt texts for them.
• Use the top 5 lines of email content for text only.
• Add the View in browser/View online link at the top of an email.

Personalize Every Email

Personalization is when you use every bit of information you have about your subscribers for crafting rich valuable messages exactly for them. Their shoe size is 6.5? Send a promo email with the last remaining 6.5 pairs and a discount. They don’t engage with your emails? Ask why. And, of course, if they have a birthday, congratulate them.

What’s great, you can do it using email marketing automation. You just have to prepare chains of automated emails in advance and set up the conditions in your ESP’s personal account.

To personalize an email, email marketing platforms use substitutions — special email fields that get replaced by specific information about subscribers. The most popular option is to call a person by their name in a message title or body. You can also mention the city, profession, position, role, and other variables in automated emails.

This email from Fitbit consists entirely of personal information. Source: Really Good Emails

Make Your Designs Responsive

Mobile devices are the #1 environment for emails. According to Litmus, 41% of subscribers checked emails on their smartphones in 2020. And this was the year of isolation when many people had the opportunity to be in front of their computers.

So make sure your message looks and acts great on mobile:

• Your messages have a separate mobile version adapted to popular screen sizes. Most block editors make emails responsive automatically. In the era of mobile-first web design, some companies even start designing their email campaigns with mobile versions first.
• Images don’t contain small details. They are clickable and lead to relevant web pages. They are of the smallest size for fast loading.

Before sending, check how your messages are displayed on different types of devices: whether all the content is visible and fits into the screen size, the layout is not broken, and images load quickly enough.

In Selzy, you can create a separate mobile version for your email. Hide blocks on mobile and show them on desktop (or vice versa), try out different content structures and layouts, customize the menu, add device-specific blocks like a ‘Call us’ button.

Make CTAs Unbreakable

Calls to action are a central part of any commercial email. After all, your primary purpose is for users to click a button so you want to make it distinct. Best CTAs in emails are contrasting against the background, short, large, legible, and contain action-oriented texts.

Niice does a great job of meeting all the requirements. Source: Really Good Emails

A few more tips about email CTAs:

• Add a second button if a layout permits it. Some subscribers don’t click until they see the whole message. The second button will help you not lose such clients.
• Don’t make buttons based on images. If a user has images turned off, they won’t be able to know what your CTA is about. Make it a text. For the same reasons, it’s better to make them into separate elements rather than part of a larger picture.
• Surround your CTAs with a lot of white space to highlight them.

Choose Safe Fonts

It’s very easy to design a new font. You can do it yourself. What Font Is, a free font finder, lets you browse the catalog of 790K+ fonts. But their inventory is not 100% comprehensive, so there are millions of fonts available on the web.

The problem is, not every font is supported by email clients. Actually, there are just a handful of safe fonts available that every email client “understands”. Here they are:

If a client doesn’t know a font, it will replace it with a safe one and your designer vision might get violated. It doesn’t mean that every font outside of this list will be replaced, but it’s likely to happen. So it’s best if you work with safe fonts from the start. Use no more than 1-2 of them in one message to avoid overwhelming a reader. The ease of reading and the overall impression of writing depend on the choice of fonts also.

In case you absolutely have to insert fonts that are not displayed by all email clients, you’ve got two options:

• Specify a fallback font, but check that it looks fine in your layout.
• Make a text a picture.

Sublimio decided to start their message with a graphic that’s also a text. Source: Really Good Emails

Make Sure The Unsubscribe Button Is Visible

Down in an email footer, you’ll likely find information about a company, the reason for receiving the message, and an Unsubscribe button.

It’s OK when people unsubscribe. They change their jobs, cities, and interests. What’s not OK is when they don’t have the opportunity to do it in a user-friendly way. For example, when the button is hidden, non-existent, or doesn’t work. The only way out for them then is to throw an email into the spam folder and this means a bad reputation for you as a sender.

The Unsubscribe button is a very important element that’s both the ESPs’ rules and an expression of respect towards your subscribers. In our previous article about list cleanup tips, we showed how giving people a clear way to opt-out of your messages helps to keep your lists in shape. It may sound like a bad idea, but making the Unsubscribe button visible is actually the right thing to do. It lets people who are not interested in you walk away without marking you as spam and causing potential trouble.

That’s why some companies make Unsubscribe buttons larger or double them as Template.net did:

Source: Really Good Emails

Test Your Designs

And, last but not least, test every bit of your design with email analytics.

• Do you need photos or illustrations?
• Do you need graphics at all or maybe the plain text is a better option?
• What color should a CTA be — blue or red?
• What layout works best?
• Serious preheader or a pun?

etc.

A/B testing can help you figure out what works best in your situation for converting more customers. There’s no other way to know than try and see. Send 2 emails (for example, one with blue buttons and one with red) and see which one your audience responds to best.

Just remember to test one feature at a time, otherwise, you won’t be able to tell whether the increase in conversions is because of the blueness of the CTA or the clever way you placed the content.

Ways To Design An Email

There are 2 main ways to design an email, each with its checklist of benefits and drawbacks.

Using Email Builders

The easiest way to create an email is to use a drag-and-drop block editor that every major ESP has. There, you can choose a ready-made template or assemble a message from blocks from scratch.

➕ Putting together an email in a block editor is faster than doing it manually.

➕ Knowledge of HTML and CSS is optional.

➕ A layout made in a builder is more likely to look well in different clients.

➕ Most block editors allow you to create responsive emails that adapt to different screen sizes.

➕ It’s cheaper than hiring designers and developers who know HTML and CSS.

➖ It’s difficult to create an unusual design layout.

➖ You have less control over the desktop vs. mobile experience.

Custom Development

You can also create your own custom email design layout and later upload it to the editor.

➕ You can make complex and unusual layouts which is not always possible in the block editor.

➕ You can create very flexible templates and control every detail of how they adapt to different screen sizes.

➖ You need to have a good knowledge of HTML and CSS or hire someone who does.

➖ Writing code by hand takes longer than making an email in a block editor.

➖ It’s more expensive (if you have to hire a person to do it for you).

Tools For Email Marketing Design

Here are some examples of popular email marketing design tools:

1. SELZY

We have a drag-and-drop email design tool that allows you to design, optimize, and personalize your message. You can do it from scratch or use one of the fully responsive 100+ templates. Our editor is similar to other ESPs’ software but has some features of its own. For example, you can design not only in blocks but also in rows of blocks and change row properties, saving time. You can save rows to use as templates, hide them to show some blocks on mobile, and others on the desktop.

Our functional photo editor lets you edit images, apply filters, and add text to pictures. With built-in search, you can choose gifs from GIPHY, free stock images from Unsplash, Pexels, Pixabay, and videos from YouTube or Vimeo right inside the editor. AMP carousel block allows you to create interactive galleries.

Pricing: You can try the block editor for free. No registration is needed, but if you want to save or send your templates, you’ll have to create an account. The great part is that the email builder is also a part of all Selzy pricing plans, one of which is… Free.

Other popular pricing plans: Lite ($7/month), Standard ($8/month), Premium (from $112/month).

2. Stripo

Stripo is another drag-and-drop email builder. Its capabilities include the dynamic AMP support, as well as the Email Testing Tool that lets you preview your emails across 90+ popular devices and browsers. You can create a customizable library of modules and use them in other campaigns, saving time.

Pricing: Free, Business ($125/year), Agency ($400/year).

3. BEE Free

Bee Free is a very user-friendly popular tool for creating emails. It offers 150 ready-made templates of various categories, integration with multiple SaaS apps including other ESPs like Mailchimp or SendinBlue.

Pricing: Free. With paid-for BEE Pro you have access to extra features like saving elements for later and more professionally designed templates.

4. Unlayer

Unlayer has re‑usable custom blocks, the ability to enhance and customize your emails using HTML, collaborate and share content with your team, and set up integration with email marketing platforms and other third parties.

Pricing: Free.

5. Chamaileon

Chamaileon’s main feature is the ability to design email templates collaboratively including accounts with different roles depending on permissions. Drag-and-drop mechanics and integrations are in the style of similar tools.

Pricing: Standard ($125/month), Premium (from $208).

To Sum It Up

Email design matters because following its best practices ensures that your message not only looks great but fulfills its purpose, adding to the user’s experience with your brand. If it looks and flows well, the user journey is smooth from the moment they open an email to the moment they do what you want them to.

Follow the above practices to make your messages more:

• Attention-grabbing
• Clear
• On-brand
• Actionable.

There are 2 main ways to design an email:

• Using email builders — it’s faster, cheaper, easier but lacks certain creativity if your template needs to be original.
• Custom development — it lets you build complex layouts and implement unique logic but requires more time and money if your HTML and CSS expertise proves insufficient.

If you opt for an email builder, there’s an array of tools you can use, both free and paid-for. Their basic model is the same but they differ in usability and features. Try and test to find out!