So, what makes a perfect, mobile-optimized email campaign? Is it using a massive
@media query to rework your layout? Clever image re-sizing? Some new device hack?
When getting caught up in the code, it’s really easy to forget that good mobile email design means providing a great experience for recipients. A lot of this flows from usability decisions like ensuring that links are large and spaced out enough to be tapped by big fingers, or the call to action is immediately obvious and requires no scrolling to see.
Our friends at Litmus summarized these mobile design guidelines and more in their recent post on the ‘Anatomy of a Perfect Mobile Email‘, featuring an infographic that you can cherish for all time. Also listed are common mobile email pitfalls like choosing a color palette with poor contrast – admittedly a trap that we all fall into from time to time.
What really grabbed us by the coattails was how Litmus put their lessons into practice with this especially fetching email campaign.
We usually pop top-notch email newsletters into our email design gallery. This time, however, we really wanted to highlight how they translated the aesthetics of their infographic into email form while never relying too heavily on images to do so. The code is definitely worth a look, as instead of using a
@media query, they’ve paired a simple, one-column layout with large fonts to produce a design that is near-bulletproof on any device. At the top of the email, the “Email client market share and mobile design infographs” summary text also ensures that the email’s purpose is made clear in Gmail’s inbox, on the iPhone, and on other mobile clients.
Of course, if you’re after a quick and code-less way to optimize your email campaigns for mobile, give our template builder a try. Come on, I had to sneak in a cheeky plug!
A huge thanks to Litmus for sharing their expertise. If you’re into mobile email design, we recommend visiting the Litmus blog, which is a goldmine of clever nuggets like these.