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.

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.

2. POV | RESPONSIVE EMAIL DESIGN: 3 HOW-TO STEPS
Page 2 © 2014 Catalyst
Follow these design tips to create a desktop email that translates
beautifully to mobile:
• One-column designs between 500 and 600 pixels (px) wide work best.
When sized down to mobile (320 pixels wide in portrait mode), text and
images simply resize and reflow, and the content order remains the same.
• A two-column design is a little more complex to code, but it will
work consistently. If there are more than two columns, the design will
disintegrate in some browsers. The designer will also need to specify how
the content stacks (which comes first, the left or right content block?) when
the layout switches to a single column on mobile.
• The most important content, especially the call to action, should be at the
top of the email. A mobile user should not have to scroll to read your CTA
• Keep content short and concise. Hide less important content or nonmobile
features from mobile browsers
• Links/buttons should be a minimum of 44px wide X 44px high for mobile
• Don’t slice images into several blocks. The pieces won’t align when resized
in some browsers
• Background images should never be specified, especially behind type. You
can, however, use solid colors in backgrounds behind type
2-column design
1-column design

3. POV | RESPONSIVE EMAIL DESIGN: 3 HOW-TO STEPS
Page 3 © 2014 Catalyst
• Never specify a font size smaller than 13px. It is too hard to read, and some
mobile browsers will automatically upscale it, which will degrade the email
• Important text should be set as HTML, not as part of a jpeg or gif image.
Image text may be too small to read when it scales for mobile, or worse, it
might never be seen at all if the user has images turned off
• Consider whitespace and margins too—when there is no space between
elements or at the edge of the email browser, copy is difficult to read and
the user may give up
• Wireframe both the desktop and mobile designs and discuss them with your
developer before finalizing
3. Test the design
Your developer will have tools to help them pretest the design and observe how
it works across email browsers. You’ll also want to live-test it through your email
service provider to major mobile devices/browsers. Include a day or two for
testing and optimizing the email in your schedule. And don’t forget to proofread
both the largest and smallest versions!
If you have kept your design simple and consideration was given to desktop
and mobile email browser capabilities, you’ll soon be sending out responsive
marketing emails that work—and get results.
About the Author
Jennifer Wagner has over 20 years of experience in direct marketing strategy, design and creative
direction. She honed her skills while working with companies like DuPont, Kodak, Chase Bank, Fisher-
Price, IBM and HP. Whether designing award-winning dimensional direct mail, co-coding the first
agency website in Rochester (in HTML 1.0, thank you very much) or creative directing a Web design
group in the Philippines, she always enjoys the challenge of learning something new. In the past few
years she has transitioned from focusing on direct mail design to online design—and is loving it. Reach
Jennifer at jwagner@catalystinc.com
About Catalyst
Catalyst is a direct and digital marketing agency that helps clients acquire, retain and develop long-term
relationships with their customers. We combine intellectual curiosity and inquisitiveness with
hard-core analytics, deep customer insight and a measurement mindset to take the guesswork out of
marketing decisions. We call it Science + Soul. Headquartered in Rochester, NY, our clients include AAA,
AMC Theatres, Eastman Kodak Company, First Niagara Financial Group, Heraeus Kulzer, Oreck, Valvoline
and Xeikon, among others.
800.836.7720 | www.catalystinc.com | Facebook | Twitter | LinkedIn