An e-mail vendor provides tips on how to best use responsive design for e-mail.

Recent research by Google Inc. shows that smartphone users check their e-mails six times a day on average, and 61% use their smartphones to make purchases. What’s more, research from digital direct messaging firm Inbox Marketer finds that 70% of e-mail recipients who open e-mail on mobile devices will delete a message if it doesn’t render well. That means it’s important for e-retailers sending marketing e-mails to make sure e-mail is optimized so it can be easily read on smartphones.

One way to do this is to use a technique called responsive design, according to a new white paper from e-mail marketing services vendor Listrak. Instead of sending one fixed-width e-mail that isn’t formatted for different-sized screens—such as for a desktop computer, tablet and smartphone—and instead of designing for every screen size, which can be time-consuming, responsive e-mail uses one set of content and one template to automatically adjust messages to the screen size of the device. The technique gives retailers and marketers the ability to change by device different elements of the message, including width and height, font size, color, and buttons. Marketers can also hide, reveal or stack sections of content to make sure a message looks its best on a smartphone versus a desktop.

Listrak offers a few tips in its white paper on using responsive design for e-mail. First, it suggests marketers think of their e-mail content as a grid made up of movable parts that will look good and make sense in different layouts. “Because the layout changes depending on the size of the screen, it’s important that you think about how the content will be rearranged,” the whitepaper reads. “Think about the purpose of the message and how you want recipients to interact with it.” It adds that most e-mails for smartphones are best displayed in a single column.

It also suggests to keep font size at a minimum of 22 pixels for headlines and 14 for body copy if using HTML, as small fonts are scaled up by smartphones and that will impact the layout. Also, Listrak suggests using fonts that are clear and easy to read—not too thick, italic or artistic—as they can be difficult to read on small screens.

Other tips from Listrak include:

advertisement
  • Keep the pre-header text of e-mail, which is what a consumer sees below the subject line before they open the message, short and on target so that it will provide a strong call to action on a smartphone. For example, a pre-header might read: “$15 off your next purchase of $75 of more.”
  • Keep navigation simple. Messages with lots of links are difficult to read and tap on a smartphone. Instead include one or two large buttons, simple images and minimal text.
  • Make taking advantage of offers and using features easy. For example, a retailer might want to utilize click-to-call or automatically apply discount codes when consumers click through to shop an m-commerce site.
  • Use white space. Consumers on smartphones will scroll through the message so there’s no need to try and cram everything in on one screen, Listrak says. White space also helps keep text, images and offers looking organized and clear.

Marketers who do use responsive design and these techniques will likely begin to notice better results from e-mail campaigns, Listrak says. For example, when marketers used responsive design for e-mail, open rates increased 9% and click-through rates increased 113%, according to research from Inbox Marketer.

Favorite