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
iOS Gmail app
Android Outlook app
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.
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:
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:
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
Popular this Month
Video in Email: Is It Right For Your Business? (Part 1)
[New Research] Are These Hidden Metrics Harming Your Deliverability?
What Job Is Your Subscriber Hiring Your Email To Do?
About Dale Langley
As a consultant to Return Path’s clients helping them adopt the latest email best practices, Dale's background in mailbox provider system development led to his specialization in mailbox provider start-ups, infrastructure, and subscriber engagement. He can be found regularly presenting seminars, talking about the latest trends in email marketing and de-mystifying the murky world of deliverability. Find him at https://uk.linkedin.com/in/dalelangley and @Email_dale on Twitter.