Responsive email marketing: a necessity

Today, the use of smartphones or tablets to check email is becoming increasingly common.

According to a recent study, nearly 50% of emails worldwide are opened on a mobile device. In the space of three years, this number has increased by 180%. It is therefore essential for email campaigns to provide a visual display that is well suited to this format. To achieve this, it is necessary to move towards responsive email marketing.

A bit of vocabulary

The term responsive is short for Responsive Web Design: a concept that refers to a responsive design that “responds,” i.e., content that adjusts to the size of the screen, providing visual comfort while offering ergonomics adapted to the type of device used.

When a user opens a “traditional” email, they usually have to perform certain actions to improve its readability: increase or decrease the text size to be able to read it, scroll horizontally from right to left to view the entire content, etc. Sometimes they even click on the wrong part of the content because the interaction area is too small. All these manipulations could be avoided with an adaptive email template.

The example below shows an email opened on a desktop computer.

The illustration below shows the same email opened on a mobile device, when the template is adapted or not adapted to this format.

A brief overview of how it works

The concept of responsive design is based on one key element: the use of media queries or breakpoints that represent the rules for displaying content. To simplify, we could describe this as:

If the user's screen resolution is less than X, then apply styles Y.

Breakpoints are very easy to use: simply specify the screen resolution limits you want to target.

For example, you could set a font size of 16 pixels on all mobile devices with a screen resolution lower than 480 pixels, or display a specific section of the newsletter only on the desktop version and hide it on mobile devices. In the first case, the CSS code line used would be:

Quantifiable results

The main advantage of responsive email design is that you don't need to create specific email templates for each existing mobile device: a single version of the code will adjust your content to fit all devices.

Opting for responsive templates allows you to offer users the same visual quality on mobile devices as on PCs.

It should also be noted that since emails can be read anywhere and on any platform, the number of potential clicks increases significantly: statistics show that mobile-friendly emails generate more clicks than traditional emails. The number of unsubscribes decreases.

Properly optimizing your emails prevents them from being deleted without even being read. If an email does not display correctly, more than 70% of users delete it immediately.

However, there are certain obstacles to responsive design, such as the fact that some email clients, including Gmail, do not yet support the use of breakpoints. Certain versions of Outlook also require specific rules to be applied in order to resolve spacing issues.

Best practices for adaptive direct mail

Templates

• Use a simple layout
• Prefer a single-column template
• Stack content blocks on mobile devices if the desktop version has multiple columns.
• Limit the newsletter template to a width of 600 pixels.

Content

• Use an appropriate font size (minimum 14 pixels).
• Limit the length of texts
• Prefer images over text
• Avoid using background images
• Create clickable areas that are large enough for calls to action.
• Include a link allowing users to view the web version of the email
• Make contact information clickable (email, cell phone)
• Hide or reposition certain sections of the email on mobile devices to improve readability.

Keep in mind that even though smart devices offer high-performance screen resolutions, the ability to display content (especially width) remains limited. It is therefore preferable to streamline the mobile version in order to increase the accessibility of the email and maximize the effectiveness of the visuals. Finally, don't forget to test the email on all platforms using preview tools such as Litmus or Email on Acid.

Although developing responsive email templates requires more effort, the resulting positive effects are significant and not insignificant.

Opting for responsive email marketing is a strategy that proves to be very beneficial. In addition to improving campaign performance through higher click-through rates and offering users an adapted visual experience and a positive brand image, this strategy now appears to be moving towards what is becoming not just a trend but a standard.