How to Design Email for Mobile Users

Dec 01, 2012 10:30 AM  By

Research from Forrester predicts that by 2017, 78% of email users will access their messages via a mobile device. That could be by an iPhone or Android-based smartphone, or by a tablet computer.

And as revealed in the results of MCM Outlook 2012-13, email marketing is far from dead. Although social media has gotten a lot of traction in the past few years, 90.3% of MCM Outlook 2012-13 respondents said they still use email to promote their businesses.

The problem is, only 29.5% of MCM Outlook 2012-13 respondents said they have a mobile commerce site. What’s more, just 13.4% claim their ecommerce sites are optimized for mobile devices, and 47.3% said they are not using m-commerce at all

And that is going to be a problem, given that we live in a world with more than 1 billion smartphones in use, according to Strategy Analytics. Consumers and business-to-business buyers, who have traditionally checked emails only on their desktops, have become mobile-savvy and are opening, reading and responding to emails on their smartphones and tablets.

But if your ecommerce site is not ready for your mobile customers, chances are your emails are not there yet, either.

To help remedy that problem,the editorial staff of Multichannel Merchant has compiled the following tips to get your email marketing messages ready for your mobile customers.

Focus on a single call to action
When people read emails on a mobile device, they are often multitasking and may have only a few seconds to read your email. The implications are clear:

“Make your message strong and singular so they can decide immediately if they want to act on it,” says Joan Abrams, director of ecommerce at Ross-Simons. “If it’s complicated, consumers will think to themselves, ‘I’ll deal with this later,’ and they never do.”

“Think about the content you’re including within your email. Is it absolutely necessary?” says Travis Buck, creative director at Listrack. “Sometimes you want to go overboard, but you need to decide what you want to communicate, and what you want the recipient to do.”

Use the header wisely
With the prevalence of email preview panes and mobile devices, consumers may see only the top 50 to 100 pixels of your email. As a result, your email’s header and pre-header have an exaggerated importance.

Benjamin Rothfeld, director of marketing strategy at StrongMail, says to make sure that your key offer appears above the header in HTML text. This will help ensure that as many consumers as possible see the offer.

And that goes for the pre-header, too
The display formats on many mobile devices cause the pre-header text to play an even larger role in the overall message content, says Jay Schwedelson, president and CEO at Worldata. Many email clients, such as Outlook 2007, Gmail and the iPhone, display pre-header text after the subject line in the inbox.

Promote mobile with mobile
Mobile email is a great way to promote your iOS/Android apps—platform data can be collected and further targeting can be done. If a history of platform usage is available in the data your warehouse collects, you might consider adding a promotional spot to your email describing your mobile app.

“For example, if you know your customer opened a few of your emails on a mobile device, it’s likely that the next one will be opened on mobile as well,” says Maciej Ogrodnik, global marketing director for Schneider Electric. “So, why not include a direct link to App Store or Android Market?”

Understand the data transfer constraints
Erich Weninger, print and email marketing manager for Smartlabs, says data transfer constraints mean that images must be much more compressed, and that considerations about content above and below the fold become much more important.

“Your email and marketing message will be cut off if your email is too large,” he says. “A clear link to the mobile version of the email becomes as important, if not more, as the ability of the user to quickly see an online version of your email.”

Minimize copy
Your mobile email message must communicate the bottom line. Therefore, Listrack’s Buck says, you need to limit the amount of copy because if your message contains too much, it is not going to stand out on a small screen.

“If your message contains a ton of text, you’re putting yourself at a disadvantage,” he says. “If you give them a book to read, they aren’t going to read it.”

Make your landing page mobile
Limiting the amount of text within your email means you need to increase how much product information is on your landing page. But if your website does not render well on a smartphone, it defeats the purpose.

“As long as your site is optimized for mobile, you should be good to go,” Buck says.

Carefully consider font sizes
Andrew Wawrzynek, senior assistant architect at American Eagle, says the font sizes you use in your emails are pretty standard. Headlines should be 30-point; body copy should be 14-point.

“These sizes are proven to be the most effective for reading on mobile devices,” he says.

Minimize images
Images that are too big, with high dimensions, take too long to download, which will cause the reader either to delete or close the email. Therefore, Wawrzynek says, images should be low-resolution, and not any larger than 300 pixels in width.

Limit subject-line length
Forty characters is the maximum subject-line length, says Wawrzynek. “You want to keep it straightforward, and about your call to action,” he says. “Long-winded subject lines will not be attractive to the mobile reader.”

Ken Burke, founder and chairman of ecommerce software and solutions provider MarketLive, thinks subject lines should be even shorter: 30 characters or less.

Maximize the white space
Most of the tips we’ve included talk about minimizing elements for the mobile reader. The opposite holds true for white space. If clickable items are too bunched up, the user could easily tap on the wrong links, which takes away from the user experience.

Try to keep your message, clickable links and phone numbers spread apart.

“You want a design that is created to accommodate the needs of the fat finger,” Wawrzynek says. “Nothing should be closer than 10 pixels to ensure that there will be no mistakes when clicking.”

(Multichannel Merchant associate editor Erin Lynch, senior content manager Tim Parry and senior writer Jim Tierney contributed to this article.)