Is it time to make Newsletters with Responsive Design?

Juan Pedro Catalá

Written by Juan Pedro Catalá

Currently, most companies do not use Responsive Design when designing their newsletters, despite the fact that more and more people check their email from their mobile or tablet, as we can see in this study conducted by Splio.

Email opens on mobile devices
Email opens on mobile devices

If the trend continues, it is estimated that by the end of the year, 50% of emails will be opened from a mobile device. This is largely due to the large increase in the number of mobile devices in Spain with Internet connectivity.

Penetration of mobile devices in Spain
Penetration of mobile devices in Spain

What are the benefits of a responsive newsletter?

  • A single newsletter independent of device and device resolution, saving costs.
  • Improved readability and usability on mobile devices, avoiding the need to zoom in to read the newsletter correctly or to click on the button or action link in a simpler way.
  • It can increase sales by up to 70% on mobile devices and double the number of buyers.
  • 80% of people delete the email if it is not viewed correctly on their mobile device, by applying Responsive Design we avoid this.

Tips for creating a newsletter targeted to mobile devices

There are two things we have to take into account when creating a responsive newsletter: the screen size of mobile devices and the fact that they are tactile.

For this purpose, it is indispensable:

  • Make the font size larger so that it is easily visible from a cell phone. It is recommended that the font be at least 14px.
  • Enlarge the size of buttons and action links so that the user does not have problems when pressing them with the finger on a touch device.
  • Scale images to fit the screen resolution of the device.
  • Change the structure to a single column and linear to facilitate reading from cell phones.
  • Eliminate non-essential content such as advertisements or irrelevant related content.
  • Make a simple design with a concise and clear message that is seen in the first screenshot to catch the reader’s attention and provoke them to click the action button.

How to implement a newsletter with responsive design?

Meta viewport

Declare the viewport meta tag in the <head>, with the values width=device-width so that the device uses its real width and initial-scale=1 so that by default the email is loaded without zoom.

<meta name="viewport" content="width=device-width,initial-scale=1" />

Media queries

Responsive emails make use of CSS media queries, which are a series of conditional rules that are based on the screen resolution of the device to apply some style rules or others. By using media queries we can adapt the design of our emails to any device.

The minimum crop sizes usually taken are 480px, 768px and 1024px. Being 480px the crop for mobile in portrait, 768px the crop for tablets in portrait and mobile in widescreen and 1024px the crop for desktop and tablets in widescreen. So we would have the following CSS rules:


@media screen and (max-width:1024px) {

@media screen and (max-width:768px) {

@media screen and (max-width:480px) {

Flexible structure and relative units

An essential change for our newsletter to adapt to the screens of different devices is to use a structure with 100% width.

Responsive email
Responsive email

So that it does not stretch to the full width of the screen on monitors with large resolutions, we can limit the width of the email by using the max-width attribute in our table or container element, setting the number of pixels we want it to stretch to as a maximum.

Fluid images

To make the images scale and adapt to the width of their container we have to set their width to 100%.

<img src="" alt="" 
style="width:100%; max-width:100%;" />

By applying these techniques you will get a newsletter or email advertising that adapts to the screen of any device and a great improvement in usability and readability that your subscribers will undoubtedly appreciate.

  •  | 
  • Published on
Juan Pedro Catalá
Juan Pedro Catalá
Former senior web developer at Human Level. Graduated in Technical Engineering in Computer Management. Subsequently, he completed a Master's Degree in Web Services and Applications Development. Specialist in web development, e-commerce and booking engines.

What do you think? Leave a comment

Just in case, your email will not be shown ;)