Seventy percent of readers immediately delete emails that render poorly or require a lot of pinching and scrolling. On the other hand, responsive emails, designed to automatically adjust to any screen size, receive a 21% higher click-to-open rate than conventional emails. Here's how to design them and pitfalls to avoid.
Turn Digital Reputation Threats into Offense Tactics - Daniel Lemin
Â
Responsive email design: 3 how-to steps
1. Responsive email design:
3 how-to steps
BY JENNIFER WAGNER, SR. ART DIRECTOR
POINT OF VIEW
The number of emails opened daily on a mobile device is expected to hit
100 billion by the end of 2014. Seventy percent of readers immediately
delete those that render poorly or require a lot of pinching and scrolling. On
the other hand, responsive emails, designed to automatically adjust to any
screen size, receive a 21% higher click-to-open rate than conventional emails.
Responsive design is a great way to increase your email marketing metrics.
But there is a bit of a learning curve for everyone involved. The biggest
challenge is designing and coding an email that is readable and provides
a great user experience across the myriad of devices and email browsers
available. Following are some lessons we have learned while transitioning our
email programs to responsive design.
1. Plan for responsive email from the get-go
Although developers can write code to detect the user’s screen size and optimize
a specific design “on the fly,” there are limitations on the designs that can be
coded to work across every browser and operating system. This makes it virtually
impossible to recode a conventional email design for responsive. So make sure
you tell your designer and developer that responsive design is required.
2. Make sure the design is simple
As with all email design, Web fonts, rollover effects and animated gifs should
be avoided—many email browsers are five years (or more) behind Web browser
technology. Coders have fewer tools to work with too, but fortunately all email
browsers accept the code that makes a page resize.
Since responsive coding makes it easier to cut than to add, we recommend
starting with a simple desktop layout design while keeping the end goal of a
one-column, easy-to-read mobile version top of mind.
Seventy percent of
readers immediately
delete emails that
render poorly or
require a lot of
pinching and scrolling.