Responsive email: complete guide

According to a survey, 40% of French people say they check their emails first on their mobile. This percentage has only increased over the years. And this, companies have understood. This is why we hear more and more about responsive design, especially for emails. What is it about ? How to create a responsive email ? This is what we will see, among other things, in this guide.

What is “responsive design”?

Before we look in more detail at theresponsive emaillet us dwell on the notion of “responsive”. This is an English term that can be translated as “responsive” or “ready to respond”.

Applied to the domain of the web, responsive design means that a site/application/computer tool has code that meets certain standards. In particular standards that allow it to adapt to all types of media (mobile, tablet, computer, etc.). This concerns all elements of the site.

THE responsive design designates all the practices of HTML integration of an emailing. Which means the display of text, images and other visual elements adapt to the size of the screen used.

As we mentioned, more and more of us are checking our emails on mobile. The numbers speak for themselves:

  • More than 43% of emails received are read on mobile
  • Mobile users tend to consult their email application 3 times more than on desktop
  • 60% of the total French population uses email
  • The French spend an average of 4.8 hours a day on their mobile
  • Gmail, Outlook (Hotmail) and Orange mail are the most used applications in France.

Why make your emails responsive?

The figures of many studies attest to it, it is more and more common to use his mobile to check their emails. With these new habits of behavior come new habits of reading.

Indeed, reading on a mobile screen is different from reading on a computer screen. It is true that nowadays smartphone screens are getting bigger and more sophisticated. However, a user will not behave in the same way depending on the medium used.

There smaller size of a mobile screen requires the user to perform various actions to be able to read an entire message. Like scrolling down the page, zooming in, clicking on the images to enlarge them… Which is not necessarily the case on a tablet or a computer. Depending on the width (width) of the element content box, the display of a page can be done in its entirety.

It is because of these display and reading differences that the responsive design has become so important in marketing.

responsive email

Responsive email: what is it exactly?

As we have seen above, responsive design consists of ensuring, via the embed code, that the elements of a page adapt to the medium. That is to say that the size of the various elements changes according to the possible display size on the screen.

A responsive email is an email that uses fluid tables and images, and media queries (CSS3 module). And this, in order that the display of emails can be controlled, regardless of the medium on which it is opened.

Clear, a responsive email is an email with a design that changes and resizes. To can fit screen width reading and thus improve the user’s reading experience.


As mentioned above, the difference between a “classic” email and a responsive email lies in the embed code. To make an email responsive you must add media queries. This is a CSS3 module which makes the various elements of the mail fluid. So, this CSS3 module tells elements how they should “behave” under specific conditions. In particular adapt their display according to the width of the screen.

However, with the evolution of the web, the use of media queries alone is no longer sufficient to make an email responsive. Indeed, facing theincrease in email applications available, responsive email support levels have evolved. To be able to create a responsive email that works, several design steps must be followed.

See also: The best free emailing software (2022)

Step 1: rethink the format of emailing

Regardless of the types of emails, informative or transactional, they contain HTML code like websites. In an HTML email, the role of the image is crucial. But keep in mind that some email clients block images by default. This is particularly the case of Gmail, Outlook or Yahoo on web and mobile. While other email clients let the user choose whether or not to block images in an HTML email.

For the information to be fluid, whatever the medium, be sure to use alt text for images. Which is called “all text” in the embed code.

Step 2: Pay attention to HTML tables

When designing a responsive email, we “mount” the responsive design. Like when you “mount” a page in HTML code.

To integrate the various elements (text, image) you must use the HTML table. Generally several tables at the same time. This can quickly become a headache because the elements are embedded in boxes. A single error in a box will have an impact on the entire emailing.

Also, some customers may have selected settings that change the way HTML tags are interpreted. What influences the display of emails. To avoid these pitfalls, it is advisable to carry out a responsive email template phase. which is also called ” responsive email framework “. This step is crucial because if you want to industrialize your email marketing, and follow your schedule, you must be efficient. And therefore do not spend time looking for HTML rendering bugs.

Step 3: consider making a text version

This may seem contradictory after the first two steps which consisted of working with the HTML code. But in addition to having a worked HTML version, you must have a plain text version. And this for many reasons :

  • It guarantees email readability on all email clients, regardless of configuration.
  • It adapts to the preference of some users for the simplified version. Indeed many mail clients offer the possibility of deactivating the HTML display.
  • Good accessibility (ease of reading, email transcribers, etc.).
  • A good analysis by spam filters.

Step 4: Do not neglect the tests

Last step in designing a responsive email, but not least, testing. To find out if your responsive email is working, there’s nothing like test it in “real conditions”. Whether it’s marketing emails or newsletters, you have to check multi-screen and multi-browser compatibility of your templates. What is called the ” device-width » (width of the device in French).

To do this, various tools exist. They will allow you to test several elements such as spam filters, validate code and links. Among other things, this guarantees the display of the image. And to check the deliverability of your responsive email. That is to say whether it manages to cross the anti-spam filters of the mail services.

See also: How to provide the best Onboarding emailing experience

Hybrid responsive email to be read on every mailbox


As we discovered during the stages of responsive email design, some mail clients do not support this format. This is particularly the case of the Gmail email client, which is nevertheless widely used in France and around the world. To overcome this problem, a new solution has emerged, under the leadership of Fabio Carneiro of MailChimp. This is thehybrid responsive email.

This technique uses certain elements of responsive design. Like the painting or the fluid image. The big difference with the “classic” responsive email is that it tableau and this image are fluid by default. To make these elements fluid, the hybrid responsive email does not use media queries. In short, it consists of making responsive design without media queries.

This hybrid responsive design is based on 3 principles:

  • The use of fluid elements (table, image, etc.) by default.
  • The use of the “max – width” CSS module which limits the width on the computer.
  • Microsoft’s use of conditional comments. In order to limit the width on Outlook.

The elements that show that responsive email design is fundamental

The smartphone is preferred for reading emails

Indeed, according to several studies, 43% of emails received are opened on mobile. And this number is constantly changing. It is therefore crucial not to neglect the responsive design of an email. At the risk of “losing” readers, and therefore potential customers.

A display time that is too long is prohibitive

Several statistics have studied the reaction of email recipients. It emerges thatan email that is not displayed correctly is deleted after 3 seconds. On the Internet everything goes faster, users want responsive sites. It is important to remember that the emails you send are in a way the brand image of your company. They will therefore influence, positively or negatively, potential customers.

Other research has shown that if a mobile experience is deemed unpleasant (email or site), 50% of customers will be reluctant.

Emails are viewed more often on mobile

On average, a mobile user will look at his emails 3 times more than on a computer. Smartphone users also tend to open more emails. This therefore means that they are more likely to be more involved, and offer a better engagement rate.

Have a email or a site with responsive design is therefore fundamental to maintain consumer interest.

Mobile traffic is more profitable

We have seen it, more and more people use their mobile to surf the Internet and check their emails. This has an impact on the market. According to a study carried out by Yesmail, mobile users will more easily buy via this medium.

Conversion (the transformation from prospect to customer) is also done faster on mobile than on desktop. Another good reason to opt for a responsive email.

Shorter reading attention

On mobile, the average attention span for reading a text is 3 minutes. The user will therefore not take the time to read a text if he must constantly adjust the display thereof. This is the whole point of responsive design. By adapting to the size of the screen, it facilitates reading and improves the user experience.

When designing the email, it is therefore important to take care of the style. So that all important information can be read within this time.

The mobile experience: a key success factor for a company

A mobile experience deemed unpleasant will have an impact on the image of the company. And therefore on its sales. This is why more and more companies want to improve the responsive design of their emailing and their site. This can be a determining factor in differentiating yourself from the competition and boosting sales.


What are media queries?

Media queries, also called “media requests” in French, are modules that allow you to make changes. In particular on the appearance of a site or an application according to the medium used (type of device). And according to the characteristics of this medium. As the screen resolution or display area width.

Clearly, media queries allow theadaptability of content according to the medium on which it is viewed. This greatly improves the user experience and represents a major challenge in today’s marketing.