16 Best Practices for the E -Mail design, so an e -mail marketing consultant

E -Mail design is a mixture of art and science. You can have the best e -mail copy ever written, but if your design and layout do not support it, it can still flop it. I know. I have focused on e -mail marketing for more than 20 years and saw the good, the bad and the ugly in the e -mail design.

I often start to check your previous e -mail marketing efforts. I keep seeing the same design and layout errors, and when we correct them, we inevitably see a performance boost. Not only opens and clicks – But conversions, which is really important.

So let me give you free advice on how to increase your e -mail performance with best practice with e -mail design.

Table of contents

What is e -mail design?

E -Mail design refers to the visual and structural layout of an e -mail message, including organized, styled and optimized usage integration and readability on devices and e -mail platforms.

Why e -Mail design is important

The message is important in marketing, but also how you present it. Design and layout problems can make your great e -mail illegible. Here are some examples that I see over and over again:

• The lack of contrast between font and background colors makes the content illegible.
• All-image emails that literally do not look when images are blocked by default (which some inbox providers are still doing).
• Even small things like text links and buttons can make a big difference.

In contrast, a great email design supports your strategy by increasing the opening rates, click rates and conversions, at the same time the user experience and strengthening your brand.

There are many tools with which you can design e -mails (we will cover some of them later in this article). However, they are not a substitute to understand best practice in the e -mail design.

Here are some of the simply fixed design problems that I often see. If you look at these best practices, take a minute to check your templates and determine if you need an update. I will be received in detail.

Input entrance view

There are three elements of your e -mail that appear in the inbox of your recipient (hopefully!) Without efforts. They are:

• Yours from address
• Your subject line
• Your preheader text

This is the “main property” that you have to arrange to open your e -mails. If you do not get readers here, they will not involve them at all.

Here are tips for each of the three key elements of your e -mail program.

1. Use a meaningful address.

There is always an “actual” e -mail address that is required to send an e -eMail. But here we will talk about the friendly “from “ade, which should appear in the inboxes of their recipients.

If you neglect it to satisfy a friendly from the address, your actual actual from the address in the inbox is displayed, which is not a proven procedure.

Here are some examples from my inbox:

All of this comes from the New York Times, but as you see, the friendly of addresses (and some of the actual of addresses) are different.

The first of the address is what most of your online publications and funding -only the brand. Nyt Wirecutter and Nyt Cooking, which offer product recommendations or recipes, each have a friendly address that contains a copy, which distinguishes it from other NYT publications and an abbreviation for the brand (NYT).

This is ideal for readers like me because I always look forward to the NYT -Koch newsletter and open them as soon as they arrive. Although I enjoy the other content, it is not a must what the cooking content is.

The last friendly from the address, El Mal – You may have guessed it – is the Spanish language version of the NYT newsletter. Here is the friendship area of the language used in the newsletter.

You may ask yourself: Should you include something other than just the brand in yours friendly from addresses?

If it helps readers to identify content more easily, the answer is yes!

Another thing that you may have heard is that the inclusion of the name of a person in the friendly address contributes to increasing your open price. In truth, it depends. However, if there is a person associated with the content in the e -mail, they definitely state the name of a person. Just make sure that your brand or organizational name is also there.

Here are some examples of how it does right from my inbox:

In each of these, the brand is da (CityCast called e -Mail newsletter ‘Hey DC’) and the name of a person.

2. Make recipients with the first 25 characters of your subject line.

It is not the case that your subject line should only be 25 characters long – it is all that is guaranteed that the recipient will see in the inbox. Let these first 25 characters count.

I think that the testing tests are often overlooked, but in some cases it makes sense. I have repeatedly tested this 25-mark rule and it never failed me. Is the buoyancy in the Bottom line performance such as conversion rate or sales-generated Per-Email Sent? Usually not, but even a buoyancy of 10% adds up over time.

For example, the following case study is based on work that I did with a customer during the holiday season. They were in the middle of their “12 days of Christmas sales” and led to this sentence in each of their affected people. The offer that was different every day followed this sentence.

So we did a test …

We moved the offer that really took care of it to the beginning of the subject line, and we received an increase in sales generated by 14.4% in the Perse. You can Read all the details here.

3. Make your Preheader text your subject line.

Preheader -Text is another misunderstood element of the inbox view – Master it and you will be head and shoulders over your competitor. The preheader text is either displayed after or below the subject line. The subject line is usually fat, while the Preheader text is not.

Here are some examples:

In this example, the monumental sports network does a good job with its Preheader Text. You use it to expand the subject line. You should do the same.

Not:

• Let it empty
• Repeat the subject line
• Keep the same shape every time

Use it for:

• Secondary key news
• Provide data
• All additional information that builds on the subject line and motivate the recipient to open and react to your e -mail

Would you like to learn more about Preheader text? I was obsessed for a while. Here is a good starting point.

copy

For most e -mail marketing messages, copy is King. Copy will motivate the reader to take the action you want. Here are some tips that you get on the right track.

4. Focus on your copy on what is in it for your readers.

It is not the case that your readers are narcissists, but they have to give them a reason to read and act on their e -mail. The way to do this is to maintain a profit -oriented copy or to express it without blasting, which clearly determines what is for you (Wiift).

Note: This applies to the subject line, the pre -head text and the copy in the body of your e -mail.

One way to do this is to use the words “you” and “your” generously while using “we”, “our” and your company name. For example:

I always try to imagine the reader, also known as a target audience when I write a copy. To do this, I think about it:

• Who they are
• What is important to you
• What would you tempt you to take the action from which the e -mail demands
• Where you will be when you read this e -mail

If you can get into your reader’s headspace, you can better write copies that motivate you to act. Do you want more? Here is a Article that you can use to write a better body copy.

5. Use the reverse pyramid style when you write body copy.

The reverse pyramid style only means to put the most important information in the first place. By getting to the point, you will not be bored your reader.

Here is an example from working with one of my customers:

Do you see what we did there? We told the readers exactly what we wanted. Then we talked about who the nominated were. This is important. You want you to understand why what you tell you is important so that you do not lose your interest.

Here are more Tips for writing body copy.

6. Keep your paragraphs short.

It is rare that people read e -mails in detail. Most of us fly over and look for something interesting. As a result, you must ensure that your e -mail is easy to fly over. One of the best ways to do this is to keep your paragraphs short.

Many years ago (like 20 or more) I read a case study by Microsoft about writing for online audience. They said that paragraphs should be 5 ¼ lines (not sentences, but lines) or less to fly over easily. I wish I had a link to the case study. I can’t find it, but I’ve lived according to this rule since then – and it works.

Here is an example from the work of one of my customers:

Which of them do you find more readable? If you are like most people, the one on the right is to fly over with shorter heels and list points (we will talk about it in a minute) and your eye will be interested. This is just one of the tips on body copy Discussed here.

7. E -Mail copy Loves Bullet Points.

Whenever I have a list of things that must be included in e -mails or online copies, I make them a list. You should too.

Ball -specific listsAs you can see in the example above, of course, superfluous. Do you note how an empty line lies between the individual list signs? This is also helpful because the white space like this helps readability. Otherwise, the ball list would look like a text block that your eyes do not want to read (just like the example on the top left).

Calls

An email without effective call for action (CTA)? It’s like a car without a motor. It is unlikely that you do not make any movement of it.

Here are a few tips to make sure your CTAS campaign.

8. Use bulletproof buttons in your e -mails – no text links.

We will first cover buttons against text links. Buttons receive more attention, so that their primary CTAs or all CTA with which they really want people should be keys.

Here is a diagram with monthly newsletter clicks according to CTA format:

Do you see what I see More than 50% of the clicks take place on buttons. Only 10% or fewer clicks take place on text links.

• Bonus tip No. 1: Check out the data under video – 16% to 29% of the newsletter clicks. If we say a video, we mean a screenshot of a video that brings the recipient to a target page on which the video is played. Videos are a great way to include readers. When E -Mail copy loves buttons, readers love readers videos.

• Bonus tip No. 2: Do you see the data under BILD? It’s not as high as video, but higher than text links. This is because people try to click on the pictures in their e -mails. I strongly recommend that you not disappoint you. Make sure that you click on one side with content that is relevant for the image, either a blog post, an article, a product page or something else.

Now let’s talk about bulletproof keys.

In old days (and still on the Internet) were/are pictures. However, this is not a good idea in the e -mail due to the image blocking (see Best Practice No. 10 to get more.)

Bulletproof keys are not pictures. These are table cells with a colored background and a rich text copy that is linked to your target side. Since they are not pictures, they will also appear when images are blocked. If you want to make them pill -shaped instead of rectangular, you can add white pictures at the corners to change the appearance of the shape.

Bulletproof keys are not difficult to build in HTML, but drag & drop interfaces make it even easier to include them. So do it!

Do you want more? Here are some Additional tips on effective CTAs.

9. Make your calls equipped.

Whenever I see “Click here”, I will be restored until 1995. At that time we had to tell the people that they should click. The World Wide Web was relatively new and clicking was not yet learned.

But now? Everyone knows how to click. So look at your CTA copy another opportunity to take the desired action for the reader.

Here are some examples of inspiration:

source

Pictures

Copy may be king, but pictures are queen when it comes to e -mail marketing. Here are some tips to use them effectively.

10. Do not send any emails only in the picture.

I spoke to many organizations that only use image emails for their programs. We will talk about the advantages and disadvantages, but let’s just start with a visual.

Here is an example from my inbox of an email only in the picture:

Wait, why do we look at it with deactivated pictures? Because many programs with which recipients read their e -mail messages still deactivate pictures by default. Although it was not as widespread as it used to be, image blocking is still a problem – see this Case study I did it with a customer who proves it.

If you can convince your recipients to whitelist your sender address, this usually enables images by default. Normally.

But why do you risk it?

Most senders that are only used in the image of image emails quote that it is easier than sending HTML. You don’t need to need a coder or a drag-and-drop editor. Let a designer create only one picture and cut it up when you have more than one link and then send it off.

Some also like control. I worked with a member organization that created my own font. They only broadcast image emails in the picture, since they could only ensure that the copy in their proprietary font is not in a standard font that was on the recipient’s computers.

However, if images are deactivated or when it ends up in the junk mail folder, you will see something like the version on the left of the example.

And another reason not to send in the image of image emails: Now that many inbox providers use AI to generate summaries of e-mails for recipients, you should be sure that there is a copy there so that the AI can read to build the summary. We have seen reports about summaries that only talk about how to unsubscribe from the e -mail, since everything that the AI could read was the footer.

11. Hero images are good for websites, but not for e -mails.

A heroic image is a large, prominent picture at the top of a website that usually extends the full width. You can be great for websites, but not so much for e -mails. This is due to the image blocking that we talked about in the last tip.

Here is an example from my inbox:

I tested a lot from hero images against no heroic image, and no heroic picture almost always gains. Instead of a hero picture above, I would like to either:

• Good: Set a rich heading about the heroic or
• Better: Make your picture half-width and set a rich text heading next to it

This ensures that something is at the top of the e -mail to engage readers, not just an empty space that you have to look for for monitoring for your valuable content.

12. If you want to read it, do not insert it into an image.

Do you see the picture above in tip no. 11? At the top left and right in the picture “Pictures capable” I messed up the brand name and the logo of the sender to enable them to make their anonymity.

I didn’t have to do this in the picture “Deactivated”, as both your brand name and your logo were embedded in the picture. Neither were seen when pictures were deactivated. If you had a heading there (which I see a lot), it would not have been seen either.

Morality of history: If you want your recipients to read it, make it rich and not part of a picture.

13. Use pictures that support the copy.

If you do not sell a visual product like a piece of furniture or a dress, it is probably the copy that your readers will convince to get involved and learn more.

If your visual product is definitely a picture of it. But if this is not the case, don’t overload your e -mail messages with stock photography. I am talking about pictures of business people sitting at a table in a conference room. Or an attractive, well -dressed person who smiles in front of a computer with a headset. Even a picture of this perfect family standing in front of her perfect house.

It doesn’t matter what you sell, stock photography screams from fake. “

But here is what works:

• A picture of your CEO or the sales employee of your potential customer in addition to his signature when the e -mail comes from him.
• In a newsletter, a small version of the picture presented is connected to an article that you include in order to provide a visual note that the reader has ended up in the right place.
• Authentic photography (my free favorite source is Unsplash.com) That illustrates the point of the copy without looking like a stock photo.

The question that is often asked is: “Pictures or no pictures?” But that’s not the right question. Use pictures if you offer value, but skip them when you do more harm than benefits.

Looking for more? Here are Additional tips for using images in e -mails.

accessibility

Do you know how we have ramps in the real world to help the disabled person, and someone else who is challenged by steps to access buildings? The Guidelines for the accessibility of web content (WCAG) are similar guidelines for accessibility for websites and e -mail messages.

Unfortunately, the WCAG guidelines are not as widespread as they should be. However, the necessary changes are much less difficult than building a ramp, and like ramps, they not only help the disabled person, but also all readers. Below you will find two tips to make it easier for you to get started.

If you want to learn more, take a look at the a11y.email blog By Sarah Gallardo. Sarah is an expert in online accessibility and focuses on e -mails.

14. Make sure you have an appropriate color contrast.

Take a look at the following copy patterns. Which is the easiest way to read? What are the most difficult to read?

Options 1 and 3 passed the color contrast test. The options 2 and 4 not. Can you see the difference in readability?

It is easy and free of charge to test the color contrast. I like to use that Webaim Contrast Checker For that, but there are other tools out there. It doesn’t matter what you use as long as you use you.

You do not want people who have difficulty reading the copy in their e -mail messages.

15. Add old -tags to all of your pictures.

Alt -Tags are another simple, free way to increase the accessibility of your e -mail messages. First and foremost, old -tags help those who are visually impaired and use a reader to deal with their e -mail. The old tags are read by screen readers so that those who cannot see the picture understand what is in it.

Alt -tags are also displayed when images are blocked, but they are usually in a very small font and after a note from the inbox provider, which explains why the image was blocked. To be honest, you are not much help here.

However, these help those who are visually impaired, which is reason enough to take a minute or two to provide an old day for each picture. They also have an impact on SEO.

optimization

16. Test in design changes if possible

One of my most favored inquiries from customers is to create a short one to “simply refresh” your e -mail design. Why? Because every material change you make can have a negative impact on the commitment.

I prefer to use Scientific method test in changes. This requires that you identify the current design and strengthen and weaknesses based on the quantitative data.

As soon as you have done this, you can outline qualitative changes to fix the weaknesses. Then make an A/B split test to see which version, control (old) or test (new) and your audience prefers.

It doesn’t matter what I like, what you like, what worked for my customers last week, what a friend said of you, worked for your organization last month. Everything that matters is how your recipients deal with the design or not.

E -mail design Tools

There are a number of E -Mail design tools with a variety of functions (some are completely nothing to do with e -mail design!). Here are some popular examples.

1. Drift Kings Media

Drift Kings Medias E -Mail -Marketing software Allows you to create, design, personalize and optimize all of your e -mails.

You do not need any knowledge or coding knowledge and can easily adapt mobile emails. With the software you can determine A/B test -E emails which designs work best.

It also contains one AI-generated email function This can significantly improve their productivity.

2. Betro

As a BEEPRO user, you can design reaction fast emails in just a few minutes.

Intelligent design tools offer you a quick way to format your e -emails and ensure that your layout complements your content.

You can also adapt and save different e -mail design templates so that your messaging and branding are consistent.

3 .. Engagebay

Engagebay Offers thousands of free HTML -E -Mail templates for various industries.

You can adapt these pre -made templates to personalize them to reflect on your brand image and even automate the campaigns – everything without writing a single code line. Engagebay also offers A/B tests and planning to help you create the perfect e -mail campaigns.

You can also integrate these templates into the CRM from EngageBay and make the creation and management of subscribers easier.

4. Mailchimp

With over 100 templates offered, Mailchimp Enables the adjustment of your e -mail design for your target group.

If you are someone who does Get coding experience and you want to go your design one step further. MailChimp also offers you the opportunity to encode your template.

5. Stripo

Stripo No HTML knowledge needs to create and design professional e -mail templates. All ready -made templates react so that readers can easily display them via any device.

You can also synchronize your current E -Mail service provider (ESP) with the software to access all your e -mail and contact information from a central location.

6. Chamailon

As a collaborative e -mail -hebauer, Chamailon Gives you the opportunity to invite members of your team to work together on your designs.

The software ensures that your emails have a reaction-quick design and automatically delivered over 100 prefabricated templates to adapt certain recipients.

While these tools can help you create visually appealing e -mails, it is also valuable to see how other successful companies design your e -mails. You can find inspiration and ideas in our curated list of effective e -mail marketing examples.

These examples in the real world can help you understand how to apply design principles and best practice to your own email campaigns.

Examples of E -Mail design

Drift Kings Media asked me to give you some examples of e -mail messages with a good design, and I have below.

But here is the thing …

If you are a consultant, always look for opportunities to make things more effective and profitable. Even with customers we test something, it increases the performance and then I see something different that we should test. You are never really finished.

For each of the very good design examples below, I have lists of what they do right and what they could do better because of my experience. This includes a transaction -E -E -Mail from HubSpot, which is very good, does the job totally, but with some of the best practices that we have discussed here could be improved.

National Geographic The compass Newsletter

I like this e-mail newsletter because the content appears to every edition like a small mini-aunt party. Oh, and your e -mail design focuses on readability (and succeeds in). I will insert some screenshots below and emphasize what the strengths and weaknesses are in my opinion.

Design perspective profits:

• The brand contains kindly from the address
• The subject line is beneficial and committed
• Pre -head text builds up in the subject line

• The copy is profit -oriented and tells you why you are interested in the article Plus the goal.
• The paragraphs are short and easy to fly over.

• The most important CTAs are keys and everyone is bulletproof.
• Some of the CTA copies are committed.

• There is a rich text heading “In the compass this week …”, which can be read, even if pictures are blocked over the first large picture.
• The pictures totally support the content. They actually improve the copy to the content and cause them to click.
• The pictures can be clicked.

• The color contrast is good throughout the newsletter.

What could be better:

• Add the name of the newsletter of the address from the address. It does not appear anywhere in the inbox view.
• It would be nice to have more “you” and “your” in the subject line and/or in the pre -head text.

• Again, more “you” and “your” would make this more committed (but I get the impression that is not part of the guide to the National Geographic Style).

• I think you can use a different verb at the beginning of “Click to beat the crowd”.
• The Bvlgari article CTA (“Read more”) seems to belong in another newsletter.

• The newsletter title, which appears just below the logo at the top of the e -mail (“The Compass”), is an image, so it is not seen when images are deactivated. It would be better if it were a rich text; It may not even look different for readers.
• The Hulu display towards the end of the newsletter has no extensive text – the entire copy is embedded in the image. If pictures are blocked, none of it is seen.

• The pictures don’t seem to have old tags. When I had my computer read the email to me, the attribution was read under every picture, but no old day was read to explain to me what appeared in the picture (which I would have needed if I was stuffed with a vision).

Trustarc Webinar -E -Mail

We didn’t speak specifically about design for webinar invitations, but I wanted to state an example here. This is supposed to illustrate both the tips that we have talked about and give some additional tips for this type of e -mail.

Design perspective profits:

• The brand contains kindly from the address
• Bonus points for adding “Team” to the brand in the friendly address to make it appear more personal
• Nice use of “Sie” in the Preheader -Text

• The opening sales copy is in the rich text and helps readers excellently to determine whether these webinars are for them.
• Paragraphs are short and legible.

• The most important CTAs are keys and everyone is bulletproof.
• The CTA copy is okay (“register now”).

• There is no hero picture that is perfect for this multi-webinar email.
• The e -mail uses pictures to support the webinar title -they are there, but they don’t overshadow the copy.
• The pictures can be clicked.

• The color contrast is good in the entire e -mail.

• Trustarc does a good job when providing a look at the webinar title, the date and the time. You can fly over the e -mail and get the GIST.
• The team did a good job to keep every webinar description in a manageable length. Too often such emails become unmanageable, since each event contains a description with several paragraphs and additional content.

What could be better:

• Why not record “webinars” according to the brand in the friendly address instead of “team”? Then you would not have to use a place in the subject line, and it would be prominently known to the reader what the content of the e -mail was.
• I am not sure whether the emoji helps in the subject line (it seems a little extraordinarily in a serious email about webinars on data protection questions). But if you think it will be, I would put it instead of the end at the beginning, so it is clearer.
• It would be nice for you to use the subject line and the preheader text to provide more details about the content of the webinars. “Privacy” is pretty wide.

• The webinar report focuses on “us” and its brand names. You would benefit from more “you/she” language.
• Bulletpoints would help the lists of the most important findings from every webinar to stand out and be seen more.

• It would be great to have a more advantages of advantages, such as “improving your skills” or “expanding your knowledge” instead of just “register now”.

• There seems to be no old tags in the pictures.

Drift Kings Media Transactional e -mail

We didn’t talk much about transaction -e -e -Mail messages, but here it is just as important to follow best practices as in your newsletters, advertising emails and other programs. I get this e -mail when I download a report from Drift Kings Media.

Design perspective profits:

• The brand contains kindly from the address.
• The subject line contains the name of the export. This is huge because I often demand several downloads one after the other.

• The copy here is minimal, which makes sense for this type of e -mail.
• Good use of “your”
• The entire copy is rich text – exactly as it should be.

• The key -CTA is a bulletproof button.
• The CTA copy is very logical (“download”) and describes exactly what happens when you click on it (as long as you are registered in Drift Kings Media).

• There are no pictures – and that’s the right thing here. Every picture would be strictly decorative and there is no need.

• The color contrast is good in the entire e -mail.

• Transactional-enamel-specific

• You may find that there is no link in the footers of this message to withdraw. This is okay because it is a transaction message that has to do with export that I have requested.

What could be better:

• Why not “export” after the brand to the friendly from the address instead of “e -mail”? This would make the content in the e -mail in the subject line of prominent and free space.
• And how about an emoji to start the subject line? Something like ‘📂’ (file folder). This would be a visual indication that this e -mail is a file.
• The name of the export is here, but could be stronger. I think something like: 📂 Your “newsletter” export is ready to download.
• The E -Mail could better use the Preheader text.

Note: It seems that the Preheader -Text field has probably been left empty; In this case, the inbox view attracts the first text on which it appears, which in this case seems to be the web address from which the logo is drawn. I understand; There is not much other to say if you look at the From Address and the Subject line, but I would still suggest that you use the preheader text to strengthen the 360 -TALL -LINK -LINK -LAGESTAGE BEATE.

• Although the CTA is clear, what if you have problems with the link? It would be nice if the URL were also in text link form here, only in the event that there is a problem with the button.

• Although not a stopper, it would be nice if the HubSpot logo could be clicked.

• There seems to be no old day on the Drift Kings Media logo. It would be nice to have it here so that the reader would affect the vision that comes the e -mail.
• Do you see the pale orange blocks in the body? Although it is not a problem, it is a strange look. It seems that the copy blocks have a white background, while the E -Mail background is pale orange. I would make the background color in the body of the e -mail consistent (and one of these background colors offers sufficient contrast to the current font color).
• If you click on the “Download” button, the copy of white text (completely readable) passes to the dark purple text. This creates a contrast problem and should be addressed (see picture below).

Grow better with good e -mail design.

Good e -mail design is a mixture of art and science. Science is what you know works – what you have tested or what is a proven procedure. Art uses science to align itself with its brand, message and their goals.

Can you have a profitable campaign without following the best practices for the e -mail design? Yes. But I almost always see an increase in performance in terms of performance, be it conversions or income when we apply best practice.

Don’t be alarmed if you were not aware of some of these design tips. I have been advising with organizations of the household name for over 20 years, and the first optimizations almost always revolve around best practices, including the 16 tips listed here.

Another message. There are numerous bright and shiny things that you can implement that can improve the performance of your e -mail marketing program. I think of things like interactive functions (AMP for e -mail or kinetic coding), movement (videos that play in your e -mail or animated gifs), logos in the inbox (BIMI or Apple’s brand post) and other things.

But these tips? They are not bright or shiny – they are common sense. However, it is almost guaranteed to improve the performance of your e -mail marketing.

Note from the publisher: This post was originally published in August 2017 and updated for completeness.