Improve your Click-Through Rates with Perfectly Responsive Emails

This shouldn’t come as a surprise but more emails ever are read on mobile devices and it is an increasing trend. An average of 50% of emails are opened with mobile devices according to a study by Litmus, and the younger your audience, the more likely your email is going to be opened on a mobile device.

If you want to convey your message effectively to your audience, it is a must to ensure readability on a mobile device or you will be wasting your money sending those emails.

While designing for web shares some similarities with designing for email, it is a different beast —

  1. You are limited to what is supported across a majority of email clients, and there may be caveats which you need to address, depending on the email clients you are targeting (a difficult question to answer itself). For example, if you are thinking about collapsing menu items into a drop-down hamburger menu, think of something else.
  2. The basic building blocks for a HTML email are tables, table rows and table cells, unlike the web where you can use frameworks like Bootstrap with a grid system. If you are new to HTML email template development, click here.

Despite the limitations, there are still many things you can do. Below are some foolproof strategies in approaching responsive email design -

Stacking

The most common strategy in email design and development is to vertically stack columns in a table row for mobile devices. For example, if you have 2 columns in a row side by side like this -

You can stack them in mobile in this way -

In principle, it is a matter of adding media queries and applying the relevant class to the <td>

@media only screen and (max-width: 480px) { 
.stack {
display:block;
width:100%;
}
}

Hide/Show on Mobile/Desktop

In cases where stacking different horizontal table cells into one vertical column is insufficient, you may just choose to hide the entire table or image on desktop and show it on mobile, and vice versa. For example, for a hero image like this -

From Stitch Fix (See Really Good Emails)

The text on the image will likely be too small to read on mobile once it is shrinked down, and the entire image can be hidden and ‘replaced’ with something that is more friendly in mobile, perhaps with something like this -

Disclaimer: This is our adaptation and has nothing to do with Stitch Fix

You can even have a completely different messaging based on whether the user is on mobile or desktop devices!

Font Sizes & Spacing

After you have decided on the broad layout differences between your desktop version and your mobile version, it is time to tweak the font sizes and spacing. For example, a 12 px font size may suffice for the body text when the email is viewed on a desktop but a comfortable reading size in mobile devices may be 16px or bigger, perhaps with a bigger line height. Depending on your layout, you might also want to tweak the padding of each table cell. In general, because of the smaller mobile screen, you can space things out a bit more when catering for mobile views.

This means that the styles you are thinking here should not be applied to the desktop view, and of this use case, media queries is your friend. And unlike the worldview of your web developer alter-ego, !important is your friend too in email development!

@media screen and (max-width:480px) { 
td[class=”mobile-text”] {
font-size: 18px !important;
}
}

For more detailed information, check out this comprehensive guide on media queries by Litmus!

Testing

Testing is an integral part to any professional email campaign and you can use third party tools like Litmus or Email on Acid. Basically, once you have signed up for them, you can send your email to these tools and they will render it in many different versions of different email clients, so that you can be sure you didn’t miss anything.

A common process goes like this -

  1. Initial version tested with incorrect rendering in certain email clients
  2. The rendering mistakes are corrected for those email clients (after some research in Google) and a new version is tested
  3. If those mistakes are resolved, good! If not, it is back to step 2. Sometimes the resolution will lead to new rendering problems in a different set of email clients, and we are back to step 2.
  4. The last tests are then performed on the actual mobile and desktop devices you and your team have. The final touches are often at this stage as you read the email on your actual mobile devices, especially if you have been working only on desktop devices during the design process.

Sometimes due to a lack of resources, you will just test on actual devices which you have access to, and that should be the bare minimum in my opinion.

Conclusion

The strategies above should suffice in 95% of use cases. When in doubt, you can always hide/show entire sections in different devices.

Are there any other strategies you use for designing or developing a responsive email? Let us know in the comments.

(All these options are available to you in Mailworks via a drag-and-drop interface, without the use of code!)