The Goldilocks Challenge of Responsive Email Design – Part II: Too Much

Welcome to part two in a three part series of blogs looking at mobile rendering. If you haven’t read part one yet, we suggest you start there.

More and more emails are read on mobile, and more and more senders pursue email optimisation. But is responsive design necessarily the way to go? Having observed emails from over 100 top European senders, we found some optimisation pitfalls to avoid.

Here’s an email from House of Fraser as seen on different apps and devices:

iOS Mail app

HoF in iOS mail top  HoF iOS mail medium part

 

iOS Gmail app

HoF gmail iOS app

Android Outlook app

008

 

On desktop

png;base64961012aeac11f991

The email renders beautifully on Apple’s native mail agent and the responsive design elements kick in and image CTA’s change from four to two in a row for better visibility on a smaller screen. On the Gmail app, the email was only scaled. Not as nice, but the email still renders quite well. Outlook on Android, however, refuses to display images just like it would on a desktop. House of Fraser is not alone in this, so if your emails are image-heavy, remember to use good alt tags so that the recipient chooses to allow images from you in all their emails.

Here’s another example from Moonpig. On the left it’s Android’s native mail agent and on the right iOS’s.

010 moonpig iphone native

Hopefully you can see what we’re going to say; this is a design that is scalable, but loses some of its impact when the user has to scroll left to right.

Bear with us (see what we did there?) for a third example from PizzaHut:

024

025

pizza hut complete email

The images on the left are from the Gmail app on Android. Gmail apps do not support responsive design, so although some optimisation efforts were made, they sadly did not work. What’s worse is that the rendered design falls foul of mobile  restrictions, leading to it going a little Picasso!

On the right we see the same email on iOS’s mail agent. It rendered almost as intended, except for the awkwardly displayed ‘£7 Large’ taking up a lot of precious vertical space. When it comes to fighting for your customers’ attention, getting it “almost” right is often not good enough.

The point is that different apps and operating systems play by different rules. Some may support the @media query whilst others may not. Some will scale, others won’t. On iOS, the native app scales to width, providing (usually) readable text. But the Gmail app on both iOS and Android scales to height, which tends to make the text smaller. There are so many subtle differences that could cause issues that it’s usually not worth the effort tailoring to every device out there.

That’s why sometimes non-optimised emails will actually fare better. Take a look at this Aldo email as seen on iOS’s mail app:

aldo-iphone-native

This is what we like to call a ‘scalable design’. It looks good on desktop and on mobile. True, it may not be the absolute ideal for either – looks a little narrow on a computer, and the words are too small for a smartphone. The image is nice though, and at the end of the day its goal is just to get you on the main site.

So while optimisation seems inevitable in a modern email environment, it is not always superior.

Fortunately, this is not one of the times when we finish by saying “well, it just depends”. Read the third and last part of the Goldilocks series, ‘Just Right’, for some best practice examples plus tips and suggestions on how to make the most of responsive email design.

Research and Content by Pearl Ho & Lisett Luik

minute read

Popular stories

Products

BriteVerify

BriteVerify email verification ensures that an email address actually exists in real-time

DemandTools

The #1 global data quality tool used by thousands of Salesforce admins

Everest

Insights and deliverability guidance from the only all-in-one email marketing solution

GridBuddy Cloud

Transform how you interact with your data through the versatility of grids.

Return Path

World-class deliverability applications to optimize email marketing programs

Trust Assessments

A revolutionary new solution for assessing Salesforce data quality

Solutions

Validity for Email

Increase inbox placement and maximize subscriber reach with clean and actionable data

Validity for Data Management

Simplify data management with solutions that improve data quality and increase CRM adoption

Validity for Sales Productivity

Give your sales team back hours per day with tools designed to increase productivity and mitigate pipeline risks in real-time