tabler/site/content/guides/how-to-create-a-responsive-email.mdx

---
title: How to create a responsive email
seoTitle: Responsive email messages best practices
description: How to create a good quality email that will display correctly on every device? Find out a few tips that will help you create responsive emails.
imageTitle: How to create responsive email
imageEmail: popular-posts
summary: It's no surprise that today most people open emails on their mobile phones, rather than using computers or laptops. It’s quick and convenient – you have access to your inbox any time you need. Having that in mind, it’s extremely important to design emails in such a way that the message is legible even on a small screen. The best way to do it is to create responsive emails. A responsive email displays correctly regardless of the screen size, so the recipient is able to read it even on a small screen of their mobile phone. Read the article to find a few tips that will help you create responsive emails.
done: true
image: https://images.unsplash.com/photo-1586953208270-767889fa9b0e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1216&h=400&q=80
date: 2022-06-11 00:00:00
---

A responsive email displays correctly regardless of the screen size, so the recipient is able to read it even on a small screen of their mobile phone. Take a look below to find a few tips that will help you create responsive emails.

## How to create good quality email messages?

<GuideImage src="/img/tabler-emails/screenshots/popular-posts-full.png" width={480} height={997} description="Sample email you can find in the Tabler Emails package"/>

1. Make sure the email looks attractive on all devices, regardless of the screen resolution.

2. Put the main offer in the right place, that is in the upper left corner, as the content of an e-mail message is usually displayed in blocks placed one by one. Thanks to that, the recipients will pay more attention to the message.

3. Encourage the recipients to read the entire message and not only its headline, for instance by mentioning what it contains at the beginning. You may consider adding a bonus, such as a promo code or a piece of advice on how to deal with an issue. The recipient will then scroll through the message to see what they can get.

4. Make sure that the content is concise - a few sentences is enough to share the most important information. Thanks to that, you will show users that you value their time, increasing the chances that they will read your messages in the future.

5. Pay attention to the CTA buttons and check if everything works correctly. It’s very important that the emails you send bring the desired effect, which often means going to your website and subscribing to a service or buying a product. That’s why, you need to make sure that the buttons let users do so. Also, it's best if they have at least 29x44 px to ensure maximum comfort.

6. Leave extra space between the CTA button and other elements, to make the button easier to click.

7. Look at the pictures you include in the email. You don’t want your graphics to stretch too much or be bad quality. Make sure that the image quality is optimal, since people pay more attention to visuals than they do to written text.

Keep the tips in mind when creating and writing your emails and don’t forget to test the messages. It’s better to spend more time checking that everything works fine than to send an email that doesn’t meet the required standards.

## How to make emails responsive?

1. The recommended message width is `600-650px`.
2. The height or length of the email can't exceed `400kb`.
3. The graphics must be in png or gif format.
4. One or two-column template layout should be used.
5. Verbal image signatures should be used.
6. The template must include a header, main text and a footer.

If you don’t have time to create your own email templates, you can use ready-made email templates by [Tabler Emails](/emails). It's a set of over <EmailsCount /> responsive and customizable email templates, thoroughly tested and mobile-ready.