▷ 4 Basic Steps to Creating a Responsive Email

With more than half of your email marketing campaigns open on mobile and 4 out of 10 emails now open through mobile apps, it’s increasingly important to optimize your messages for the best mobile experience. This is where responsive design comes in. So it’s time to think responsively! Follow these steps to get started…

Check your email format

Just like websites, emails are processed using an HTML email code. If the image is necessary to attract the user, some email clients can block some of them. To get to know all the email clients involved, many tools are available on mobile and web and use data from Yahoo, Gmail, Apple Mail, Outlook.com, Thunderbird, Outlook.com or La Poste on the desktop.

Use HTML tables

HTML or . tablestable> Allows you to combine images, text, and items into a responsive email. It is also required to make breakpoints (the number of pixels displayed on the screen), media queries or media requests, and CSS to optimize them.

However, when combining items into the boxes, be careful not to make any mistakes, as this can affect the entire email. It may not display as expected, because some email clients may change the way HTML tags are interpreted.

In order to simplify sending your next email, you can create your own Responsive Email Framework or Responsive Email Template once you have the right set. This template allows you to be loyal to your editorial layout and quickly send emails to all potential clients as well as target clients.

Expect a transcript

Provide a text copy to ensure that the message is readable in all configurations and on all email clients. Thanks to the text version, you can:

  • Perform analysis using spam filters;
  • Maximize accessibility through email transcription software, readability, etc. ;
  • Learn about some users’ preferences in a simplified version. HTML rendering can already be disabled with some email clients.

Test Responsive Email

Some tools allow you to test your responsive email on different screen sizes and different platforms. Others help you validate code and links and test spam filters to ensure images are displayed, among other things. Also check if your email can be delivered to see if it can make it to the recipient’s inbox, despite email services’ spam filters.

11 Best Practices to Remember to Make Your Emails Responsive

Making emails responsive also means applying some of the following good practices:

  • Split Send Base: Optimizing targeting improves your performance;
  • Use of pre-head space in time: the latter is displayed in the majority of smartwatches and mobile email clients;
  • use of an easily identifiable sender’s name;
  • Personalization of e-mail to convey relevant information;
  • To make landing pages responsive;
  • Use recommended font sizes: 22 pixels for headlines and 16 pixels for text or a minimum of 13 pixels;
  • Improved readability with alt text if images are blocked;
  • Strong theme selection for better opening rate;
  • Use 2x images of the retina or high-resolution monitors;
  • Encourage direct response by avoiding “no-reply” headlines.

Also, remember to check the total weight of your email before sending it. In general, it should be understood Between 50 and 70 KB. If the weight exceeds 102KB, Gmail cuts your message. And if the full file weighs more than 100KB, anti-spam filters block it.


In recent years, some innovations have also appeared and can be added to your responsive emails:

  • Animated GIF : This video alternative is used to animate a portion of email and is compatible with email clients;
  • dynamic photos : Allows to have dynamic email and can be updated remotely by the server;
  • AMP for email : Makes email messages look like an interactive web page;
  • video wallpaper : This feature is only available in Outlook 2011 Mac, iOS mail client, and Apple Mail. Other email clients can benefit from a static background.

Making emails responsive means adapting their readability to screen size and available space. To implement such a strategy, you must have a good email marketing strategy and be sure to grab the target’s attention with useful information, easy-to-download images, and an effective call to action. You must also know the type of recipient’s reading medium screen to anticipate their portable view when designing the form. Email format to respect, use of HTML tables and alt texts if blocked by spam filters, and performing several checks are all steps to follow before sending responsive emails.

Leave a Comment