Responsive Email Design: Make your emails work for mobile

Published by

Responsive email design

Responsive email design is still a relatively new means of designing emails to cater for a mobile audience. Here are a few tips if you are thinking about embarking down this route.

Do you need responsive design?

I’m sure we can all agree that designing for mobile is important. Statistics say that 54% of emails are opened on a mobile device (Litmus, 2015), however, does it need to be responsive? If your email template is relatively simple, and a single column, chances are you will not achieve the benefits others will. There is also the factor that of the 54% who open on a mobile device, not all will support responsive design – Gmail and most other webmail devices will not render your responsive code. There could well be other projects you want to put your time into first.

Images for mobile

When your images get resized will your text still be legible? The most common mistake we see is an image with text or call to actions on that is simply resized from its usual 600px width to 350-400px on mobile and you can’t easily see what is says. Instead, think about having 2 images, and hide the one without text on to make the text maintain its legibility.

Design for big fingers

Call to actions on mobile have the limiting factor of the pointing device being our inaccurate fingers. Therefore, on a mobile device, your call-to-actions need to be bigger to cater for this, and avoid inline text links.

Navigation Links

It’s popular and effective to have a series of links to key parts of your website at the top of the email – they can account for a third of all clicks. But on a mobile device, these can make the email too tall, hide the main part of your email, and be too small to be effective. Look at hiding the less important links here, and resize logos and other standard elements to stop the header taking up too much of the visible space.

Landing pages

It’s not just the email we need to design for mobile but all of our landing pages. Linking to large files or pages which are not mobile optimised can defeat the purpose of designing your email for mobile altogether.