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-goAlthough 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 simpleAs 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.

POV | RESPONSIVE EMAIL DESIGN: 3 HOW-TO STEPS

2Page © 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

POV | RESPONSIVE EMAIL DESIGN: 3 HOW-TO STEPS

3Page © 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 designYour 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 AuthorJennifer 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 CatalystCatalyst 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