The rise of Android and Gmail in the last couple of years has massively changed the email landscape and has caused significant deterioration in the visual integrity of responsive email.
a) Old Litmus stats gathered from Feb 2011. Drawn from 2,600 opens.
b) Litmus stats gathered from a recent email send. Drawn from 3,500 opens.
A couple of years ago the future looked bright for responsive email: iOS devices were handling it perfectly and Android seemed to be getting there. So we recoded our desktop emails to make them responsive. While our emails do now look good on iPhones and some other devices, recent developments on Android are making our emails look fairly awful. (Particularly the native Android mail app with its very idiosyncratic HTML email rendering.)
There is a solution.
If we change to a simplified single-column fluid layout we can swerve a lot of the display issues on this fragmented mess of email clients.
“Fluid” design does not use media-queries or any other CSS that Google likes to strip out and looks good across devices of any width.
Armed with a very small test suite of real devices and a virtual PC we’ve run through a lot of test sends and seem to have a working version 1 fluid template.
A couple of other changes to be shoe-horned into the a new design:
- to reposition the large amount of small print: time to move the mirror links and unsubscribe text from the top of the email to the footer
- use of deeper header images: the letter-box images we tend to use do not scale down well on phones
- live HTML text buttons: yup – no more button images. Buttons can be styled to look similar to current imaged based version for many email clients – with a simpler fall-back design for the rest.
- [To consider – use of pre-header text]
- [To consider – if and when tablet email viewing becomes very high we could consider adding some “progressive enhancement”. Currently not worth the effort.]
Last updated on 30th August 2018
Leave a Reply