How to create the perfect email? Are there miracle recipes? As you can imagine, answering these questions is far from easy. But we can still give you some answers. In this comprehensive guide, we offer a checklist of all the important elements in the design of an email: the object, the pre-header, the customization, the layout , the size of the email, the images, the videos, the GIFs, the optimization for mobile, the web fonts, the buttons, the links, the footer, etc.

By controlling/optimizing all these points, you are likely to get closer to the perfect email. This comprehensive guide summarizes all good practices regarding email design - point by point.

Coping Mechanism for Mobile Emails

In this article we are going to see the Coping Mechanism for Mobile Emails for your email marketing campaigns. No effective email marketing without a good rate of deliver-ability. This rate, remember, refers to the percentage of your emails that land correctly in the inbox of their recipients (= who are "delivered"). If your emails are not delivered, they have no chance to be opened, let alone clicked. This is the reason why increasing (or decreasing) a few percent of the deliver-ability rate can have quite significant consequences on the ROI of your marketing campaigns.

Object

Even if it is not strictly speaking an element of "design", it is impossible to write a complete guide without speaking about the object as it plays a key role in the opening rate. In fact, it's useless to have emails with the impeccable design if your emails are not open. The subject of your emails must be engaging, personal and relevant. To prevent your emails from being considered as spam (by the ISPs but also by some of your recipients), avoid abusing capital letters, expressive punctuation (exclamation point and question mark), and finally avoid some words: the famous "spam words".

What is the ideal length of an email object?

Should we favor short objects or long objects? We often tend to answer the second answer. We are not of this opinion. If your object is too long, it may be truncated on mobile, some browsers, and some email clients. The table below presents the results of a Return Path study:

It is the 61 to 70 character objects that are most read by the recipients, but it is the 41 - 50 character range that is most used by the senders. We advise you not to exceed 70 - 80 characters to avoid display problems.

Should we integrate symbols in the object?

It is often said that a picture is better than a long speech. This saying is particularly valid concerning email objects. Several studies have shown that integrating emoji/symbols into an email object has a significant impact on the opening rate. For example, an Experian study showed that 56% of businesses that used emoji in their email objects had a better open rate.

But beware, some email clients do not read emoji and turn them into square "☐". Another small note: On Gmail, emoji that appear in the inbox are different from those that appear once the email open. The first have the form that we all know and the second are the emoji developed by Google. Do some tests to make sure that the emoji that appears after the open email conveys the same feeling that appears in the inbox.

Google Emojis:

Pre-header

The pre-header is the phrase that appears right next to the object, or under it, in the inbox. The pre-header uses the first line used in the body of the email. Like the object, the pre-header plays an important role in the opening rate. It gives an overview of the content of the email. We advise you to focus on short pre-headers (between 40 and 70 characters) and get straight to the point. The pre-header should prompt your recipients to open the email. We also advise you to make the object and the pre-header complete each other. In particular, avoid repeating in the pre-header what has been said in the object.

Email customization

Emails using custom objects have an opening rate of 26% higher. Customize an object first by using the first and/or last name of the recipient. For example: "Juliet, your exclusive summer offer is waiting for you". But we can go much further in personalization, using other data: the name of the recipient's company (B2B context), the last purchase made or any other information to customize the email.

contextualizing

"Contextual Marketing" has become a buzzword. There is also sometimes talk of humanization. The goal of the approach, which extends and deepens the personalization process, is to move from a one-to-many emailing to a one-to-one emailing.

Spotify's end-of-year emailing campaign is an often-quoted example. At the end of the year, the music streaming platform sends each of its users a complete summary of the usage statistics: a number of minutes listened to, a number of artists listened to, a number of tracks listened to, songs most listened to, etc.

This customization/contextualization of emails can humanize your emails and increase the commitment of your contacts.

Dynamic content

If you want to go in the direction of a customization of your emails, you can also integrate dynamic content in the body of the email. For example, you can have the email content dynamically change based on the type of contact. Here is an example ( Adidas ):

In this example, the content varies dynamically depending on the gender of the contact. For women, the section presenting women's clothing is displayed, for men the section presenting men's clothing. This technique helps to make your campaigns more relevant and more appealing.

Layout email

You must use a layout that helps the recipient of the email to immediately view important items. More broadly, the layout should make it easier to read and understand your email. This assumes a work on the hierarchy of the elements, on the titles, the images and the structure of the email. Here are several examples of layout:

The "inverted pyramid" model

The layout can take the form of an inverted pyramid. This layout is very effective and can highlight the elements of your emails (headers, images, buttons ...) and articulate them.

In the examples above, the view of the recipients is guided to the CTA button, prompting them to click on them.

The model "Ziz-Zag"

This layout model is less used but very interesting. The model in Ziz-Zag can transmit a lot of information without annoying the recipient. You can choose one color per section to increase the readability and therefore the efficiency of the email. This model is particularly relevant when you want to present several products, several offers or different stages.

The "one column" model

This classic model works very well and is particularly well suited for reading on mobile. In general, the content and images adapt to the size of the screen. Splitting the email into multiple sections helps the recipient navigate the email effortlessly. This type of layout, quite simple, allows to highlight the important information, to prioritize and guide the recipient to the next step.

Size of emails

In order for your emails to appear correctly on all email clients, it is important to optimize the size of your email designs. We have devoted an entire article to this question of the size of emails. We came to the following conclusion: for more security, it is better to choose a size of 640 px maximum, even to stick to the 600 px standard. Beyond that, you may encounter display problems on some e-mail.

Imagery

If you use images in your emails, you must keep the following points in mind:

• Dimension. Most emails have a width between 600 and 640 px. However, for your image to be displayed in good definition on HD screens, you must choose a double width (in this case 1200 px).
• Size of the file. The weight of the file is an important element - especially when you know that half of the emails are open from a mobile. The heavier the email, the more time it will take to load. This has a significant impact on the user experience. Use a tool like TinyPNG to reduce the weight of your images.
• Alt tag. If your image fails to load, a text will appear instead of the image: this is the Alt text. Remember to fill the Alt tag to improve the user experience if there is a problem loading the image. The Alt text should reflect the contents of the image.
• Role of images. The images contained in your emails must be used to complete the text, to illustrate it. The images, in an email, have an illustrative role. Clearly, your email must be understandable without the images.

The images and the Alt tag

The Alt tag is the text that is displayed instead of the image when the image failed to load (due to a technical problem or disabling images. describe in a few words the content of the image, which transmits the message of the image in case of non-display of the image.

Web fonts (web fonts)

In email marketing, it is particularly recommended to use web fonts whenever possible. This allows you to add an element of personalization and originality to your emails. But you should be aware that not all mail clients support all fonts. Hence the importance of testing the rendering of your emails on major email clients using software like Litmus  (find out how to test your email template ).

The example below uses the Clobber, Gotham Book, Gotham Medium and Montserrat fonts (@import + @fontface).

We particularly recommend Google's font library: Google Fonts. You will find a very wide choice of fonts. If web fonts are not supported, you can add "standard" fallback fonts, first checking their compatibility with mail clients. These fonts will be displayed instead of the web fonts if they are incompatible. Below is a list of fallback fonts managed by major email clients.

You should also know that each mail client has favorite or default fonts that will sometimes be used instead of your web fonts (Arial for Gmail, Times New Roman for Microsoft Outlook, Helvetica for Call Mail). In this case and if your web fonts are not handled by the mail client, the default font will be used instead of the fallback font. To prevent this from happening, you can add this piece of CSS code in your email:

<!--[if mso]>

<style type="text/css">

body, table, td, p, li, a {font-family: Arial, Helvetica, sans-serif !important;}

</style>

<![endif]-->

 

White spaces

White spaces are empty areas around your paragraphs, images, and buttons. Adding large enough white space around your content items increases the clickthrough rate on these items, as long as they are highlighted. It also allows you to separate your items and improve the visibility and understanding of your emails.

Mobile optimization

As we have already had the opportunity to remember, today more than half of the emails are open from a mobile device. A recent study by Campaign Monitor claims that more than 68% of emails are now open from a mobile device. Here are some tips and best practices for optimizing your mobile email:

• Use a mobile-friendly email template (responsive or hybrid).
• Choose a short object.
• Use a pre-header.
• Integrate a clear and easy-to-click CTA button.
• Use large enough images
• Use a font size large enough (16 px is a good size).

If you code your emails, there are two approaches that can optimize email for mobile. The responsive approach, which uses media queries and CSS, and the hybrid approach that uses fluid layouts, automatically adapting to the size of screens, without media queries.

Buttons / CTAs

There are three important elements to consider when designing CTAs to optimize their conversion (ie clickthrough rate):

• The text: it must be clear and insist on the benefits. The person must understand immediately what will happen in case of a click and the interest in clicking. Emphasize the action verbs. For example: "Subscribe", "Subscribe", rather than "Learn More" or "More Details".
• The design: the button must be big enough, to be visible and for it to be easily clickable from a mobile device (recommended height: 50 px). You must use a color that contrasts with those used in the rest of the email (or at least with the surrounding colors), to make it stand out. You can use a "hover" effect for your CTAs (which allows you to change the color of the button when you hover over it): this technique is supported by most email clients.
• Location: The right location depends on the complexity of your offer. If your offer is complex, it may be more relevant to explain it before placing the CTA. Ideally, surround your CTA with white space.

The number of CTAs buttons in your email depends on the number of possible actions. Feel free to integrate two different CTAs into your email, the main CTA, and a secondary CTA. But in this case, make sure that the main CTA is out more than the secondary CTA - playing on the colors in particular. However, avoid integrating more than 2 CTAs (unless you offer several offers/products) and also avoid integrating several times the same CTA. This may dilute the weight and visibility of your CTAs.

Last tip: because images are sometimes blocked by email clients, avoid creating buttons as images.

Connections

Check all the links in your email, desktop, and mobile. In particular, check that they are redirecting correctly to the page, and to the correct page. If you have integrated UTM tracking tags, check that they work well. Also, check the colors of your links on different email clients. On Apple Mail, the links automatically appear in blue. If you want to avoid this, you can use this CSS code:

a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

Video

Playing videos directly in an email is not possible on all email clients. It is not possible to play a video in Gmail or Outlook for example. In contrast, more than half of email clients support HTML5. There is, therefore, an alternative: integrate the video in the email as a static image with a "play" button that redirects to the platform hosting the video. You can also, instead of the video, use an animated GIF.

GIFs

If you want to integrate animated content into your emails, GIFs are a good alternative to video. But not to overload your email, better not to abuse GIFs and use them only where they bring something. Favor short GIFs. Try to ensure that the file weight does not exceed 1 - 1.5 MB.

Text / Tone

You must use a language, a vocabulary, a tone inadequacy with your target. It's a good idea to send your email to two or three colleagues before posting your campaign to your contact list, to make sure there are no errors in grammar, conjugation, typography, etc.

A / B Testing

A / B Testing can be used to test many elements of your email. Of course, you can not test everything. We advise you to focus on the object. If you only have to do one A / B test, this is the element you need to focus on. Most messaging software includes a feature of A / B Testing.

Here are some interesting variables that you can test on your object:

• The length. Short object VS Long object.
• The customization. For example, test whether integrating the first or last name of your contacts into the subject of the email has an impact on the opening rate.
• The promotions. Test several types of promotions, to identify the one that works best. For example Free Delivery VS 15% discount.

Footer (foot of email)

Here are the elements that you need or can integrate (as the case may be) in the foot of your email (footer):

• Legal information: the address of your company, the unsubscribe link, and possibly the terms and conditions of use.
• Social links: even if very few people will click on social links, it is good to show your contacts that you are present on social networks (Facebook, Twitter, Instagram ...) by integrating the buttons associated with these media. Remember to distinguish between share buttons and redirecting buttons to your social media pages.
• A link to your mobile app, if you have one.
• A link to your support/customer service. If you use a " no reply @” email, you must give your recipients the opportunity to contact you. Ideally, include a link inviting people to give feedback.

 

---

Also published on Medium.