# Best practices to compose an email template

Once the email you sent reaches your customer's inbox, the metric to optimize is **user engagement**, meaning at least opening the email, learning about its content and optionally interacting with buttons through CTA.&#x20;

Customers are overwhelmed with information and advertising every day, so you have to **stand out** from your competitors.&#x20;

## Format and layout <a href="#h_0051d32c51" id="h_0051d32c51"></a>

### Page layout and display <a href="#h_adcc017e5e" id="h_adcc017e5e"></a>

To prevent horizontal scrolling (*especially on mobile which is widely used*), the correct mail format is **600 pixels** on desktop and **320 pixels** on mobile.

The design of the e-mail must be **responsive**; after you've finished editing the message, remember to always check that the e-mail displays correctly on the various devices (well-centered text, good distribution of images, etc.).\
​

Also, to avoid the message being blocked in spam or the email loading time being too long, we recommend a ratio of around **70% text and 30% images** within the message. Consider optimizing the weight of images by compressing them to reduce their size while maintaining good display quality.

{% hint style="info" %}
Remember to add **alternative** **text**, also known as "alt-text", and a **background color** to make the email easy to understand if the images don't load properly.
{% endhint %}

### Item allocation and creation <a href="#h_939572224e" id="h_939572224e"></a>

Pay particular attention to the **size** and **spacing** of clickable buttons and icons placed in the email (*especially on mobile devices, to avoid click errors*).

We recommend designing them **between 40 and 48 pixels minimum**; the smaller they are, the further apart they need to be.

You can create **color contrast** and highlight text (bolding, spacing, etc.) to make buttons stand out 👇

<figure><img src="/files/uUK9BPNzsdi8M6saJ9V5" alt="" width="563"><figcaption><p>Color contrast example in a template</p></figcaption></figure>

{% hint style="success" %}
💡 Adding a **deeplink** to all email items (images, CTAs, etc.) can help maximize the rate of visits to your site. This way, the visitor can become a potential lead!
{% endhint %}

### Text size and font <a href="#h_8eb4c38029" id="h_8eb4c38029"></a>

Whatever device the customer uses, the text must be displayed correctly. That's why we recommend using the most common typefaces: *Arial, Helvetica, Times New Roman, Verdana, Courier, Tahoma, Georgia, Palatino, Trebuchet MS, Geneva*, etc.

{% hint style="info" %}
✍️ You can create your **own font** and import it, but make sure it displays correctly on all devices and search engines.
{% endhint %}

**Two different fonts** (maximum three) will be more than sufficient👇

<figure><img src="/files/sEB3z0XI4j7a6Uptrr0v" alt="" width="510"><figcaption><p>Fonts example in a template</p></figcaption></figure>

​Finding a font that matches your corporate identity and reflects your positioning, and sticking to it helps keep your communication materials consistent.&#x20;

{% hint style="success" %}
🔤 The most legible font, regardless of screen size, is **Sans Serif.**
{% endhint %}

To make a real difference between the text and the headings and to organize the message, we recommend a height of **14 to 18 pixels**. Headings can be larger, with a recommended height of between **22 and 28 pixels**.

The signature can be smaller: **12 pixels** to distinguish it from the rest of the text.

### Header <a href="#h_f24e94f349" id="h_f24e94f349"></a>

Make sure that your brand is directly identifiable on opening the email: your logo must be clearly visible in the header, with consistent graphics throughout the e-mail 👇

<figure><img src="/files/ljTU3iZKrFNy947XpXv2" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
For faster identification, we recommend that you place it **at the top of the email**, in a **larger size**.
{% endhint %}

***

## Textual content <a href="#h_79d658285c" id="h_79d658285c"></a>

### Mail subject and preview <a href="#h_e9110d9002" id="h_e9110d9002"></a>

The subject line is the first thing the customer sees once they've opened their mailbox. It should not be neglected, as it has a direct impact on the open rate!

It's best to opt for an **eye-catching**, **personalized** and above all **short and descriptive** headline, which says as much as possible in as few words as possible. To draw the customer's attention directly to his inbox, the recommended maximum number of characters is **50**, for 3 reasons:&#x20;

1. The title is fully visible in the inbox on a computer or mobile. For maximum impact, place your keywords at the end of the sentence.
2. A short title will be read quickly, almost unconsciously, by the customer. Reading the subject line requires very little effort, which significantly increases the open rate.
3. A long title will give the customer the wrong impression, it's not aesthetically pleasing.

<figure><img src="/files/hJVY1ObRAe1Z0lvsai1m" alt=""><figcaption></figcaption></figure>

**👉 Our recommendations:**

* Personalize the subject line: "Marie, would you like to travel for cheap?". Calling the customer by his name helps create **immediate proximity** with him.
* Provoke a **sense of urgency** whenever possible: "Marie, don't forget to use your promo code before it expires! 👀"
* Get **straight to the point**: The customer needs to understand immediately what the email is about.
* To make your e-mail more descriptive, you can add **emoticons**, but don't overdo it: they might **detract from** the message.
* Don't use sentences in capital letters, too many exclamation points, or words that are too "commercial", such as "urgent", "100%" or "open quickly".

{% hint style="info" %}
🌟When it comes to writing **newsletters (inspirational content)**, emails constructed in the form of **"3 tips for...", "7 things to know about..."** are very popular with consumers, and make it easy to get to the point.
{% endhint %}

### Call To Action <a href="#h_52f1d3fd4b" id="h_52f1d3fd4b"></a>

A call-to-action (CTA) is a button designed to encourage the reader to perform a specific action, such as registering for a webinar or purchasing a product 👇

<figure><img src="/files/92Q4QmLFGgmZbDm784gP" alt=""><figcaption></figcaption></figure>

To maximize your chances of conversions, limit the number of CTA above your waterline. This is the line that delimits what the reader can see without having to scroll.

**👉 Our best practices:**

* Use action verbs like "Download", "Discover", "Take", etc.
* Use "I" to encourage the customer to open the CTA, as the wording will allow them to project themselves directly. **Example: "I'm discovering the program!"** is more effective than **"Discover the program".**
* If necessary, write a short reassurance text visible before the CTA to give more information about the offer.
* Don't hesitate to **engage** your readers in the brand's strategy (= participatory marketing) with phrases like: **"your say under our new Instagram post!".**\
  ​

### Name of addressee and signature <a href="#h_fcc947f300" id="h_fcc947f300"></a>

Adding a human dimension to the e-mail is a winning element so that customers can identify with their interlocutor's message and develop a real relationship with the brand.

You can add a first name as the "sender" of the e-mail.

Your email is now ready to be sent!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.batch.com/guides-and-best-practices/message/email/design-and-layout/best-practices-to-compose-an-email-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
