Best practices in responsive email design - Part I


The future of email marketing lies in the ability to adapt to your surroundings. Everywhere we look we see smartphones, tablets… These smaller devices each have different screen resolutions compared to the traditional desktop clients. When your email is not optimized for representation on a smaller screen your mobile device will try its best to visualize the email by introducing a scrollbar or scaling the content. In both cases the mobile device is trying to fit what was not intended to be displayed on a smaller screen. The art of optimizing an email for representation on multiple screen sizes is called responsive email design, and it is the main focus of this new series of blog posts.

Mobile devices have almost won the race over desktop devices as preferred device to read email on. In September 2013 Litmus reported that 47% of all emails opened are opened on a mobile device. If you know that half of your audience isn't reading your email as it was intended, the need to change becomes apparent. And change can be good for business too, because:

"Mobile users will do anything and everything desktop users do. Provided it's presented in a usable way."

We know that 63% of Americans and 41% of Europeans would close or even delete an email that isn't optimized. So we need to adapt and change our emails to keep the reader's focus. We need to present our content in a usable way. Meaning important buttons should be displayed larger so that users can click on them with ease. Images should be smaller in file size so that download time is reduced on a mobile connection. These and many others are examples of what we need to improve.

What does responsive design entail?

Responsive design is a set of techniques and principles applied to email design that includes media queries, fluid layouts and images, and customized copy making for emails suitable for both desktop and mobile devices. Responsive techniques allow designers to hide, stack, expand/collapse or modify content to optimize email content display on smaller screens. It also includes simple considerations to make emails easier for mobile users to consume, such as large buttons for easy tapping, layouts that follow a hierarchy for content so they work even without image display enabled…

Creating responsive emails can be done in many ways depending on the final result you wish to achieve. You could choose for the fixed design option where you're transforming all the pixels to the correct size. For example when having a table width of 600 pixels and you would like to have it fit the 320 pixels screen resolution of a smartphone you will transform all the 600 pixels to 320 pixels and so on.

The other option is to choose for a liquid design option, which is more flexible than the fixed design option. Just like in the fixed design, the pixels are going to be transformed, but this time to percentages. So a 600 pixel design will be transformed to a 100% design which will fit the screen of the device automatically.

What you shouldn't do

1. Scaling

Scaling allows creating a complete fluid design which will adapt to the screen size. However, since text size, images, etc. are not adjusted, the email will be exactly the same as the desktop version - only smaller. Users will have problems reading the text, clicking the buttons and will probably close the email before reading it. This method is not user-friendly and is not recommended. However this method should work on every device because you are working with a fluid design.

2. Skinny design

Skinny design is basically a design small enough to fit a mobile screen; it will remain in this state for the desktop users. This will result in a very minimalistic desktop email, it is a bit more user-friendly than the previous method but it's still not a real responsive design.

However in this case the desktop users will be limited and potential important (extra) information will never be shown to the user because there is simply not enough space to put this information.

Understand your audience

From the two methods above scaling is the least "wrong" but as mentioned still not a "true" mobile design. However, since this method will work everywhere, you should still consider this when selecting a strategy. It is important to understand your audience and which environments are most frequently used to view your emails. Once you have this data you can determine your investment into your mobile strategy. However, as a best practice, you should use BOTH. A scalable layout that turns responsive.

In upcoming posts we will focus on this ideology, taking the best of both worlds and trying to combine them into a responsive email design. So stay tuned !

Can't wait to read more? Download our Guidelines on "Responsive email design".