By Chad White published November 11, 2013

2 Key Techniques for Making Email Content More Mobile-Friendly

mobile friendly contentOn the sliding scale of mobile-friendliness, most brands are just starting to get a grip on the fundamentals of email content design. In fact, ExactTarget research performed in early October found that out of nearly 160 B2C brands — including retailers, restaurants, manufacturers, travel and hospitality companies, and nonprofits — only 12 percent use responsive email design and 10 percent use mobile-aware design, while the remaining 78 percent still use largely desktop-centric email designs.

Here’s a breakdown of the three major gradations of mobile email design and where the industry is with each of them:

Responsive design

Responsive design has become a general term for a basket of advanced techniques that serve up versions or renderings of an email that are optimized for particular screen resolutions or email clients. Whether it’s fluid, liquid, scalable, adaptive, or truly responsive design or powered by live content, all of these techniques involve extra email design and coding — and often the creation of two or more versions of an email. But the result is email messaging that looks good and functions properly on a range of devices and interfaces.

Of all the potential “flavors” of responsive design, adaptive is probably the most notable. This design approach generally uses one or two pixel-width “breakpoints” that correspond to typical screen sizes for smartphones, tablets, and desktops, triggering automatic reformatting and adjustments so that the content experience is optimized for viewing on the selected screen sizes.

For instance, St. Jude Children’s Hospital uses a very straightforward execution of this approach. Many marketers will likely not see the need to improve their email designs beyond this point for a long time.

responsive email design-st. judeDespite a torrent of talk about responsive design, adoption is relatively low in most industries. However, that will change over the next 12 months for two reasons:

Firstly, with nearly half of all email content being read on mobile devices, we’re set to have our first mobile holiday season ever — and retailers aren’t prepared. With 63 percent of consumers saying they delete emails immediately if they are not optimized for mobile (according to e-Dialog), there are going to be some underperforming email programs this season. And, as a result, come January, the industry will likely see a renewed interest in responsive design.

Secondly, while responsive email content design used to involve quite a bit of custom coding, email service providers are increasingly offering responsive email templates, making it much easier for brands to take advantage of this technology. More than anything else, the productizing of responsive design is what will take it from being a niche tactic this year to a mainstream tactic next year.

Some brands are already moving beyond mobile-friendly design to “mobile-targeted” design. Being mobile-targeted means your email content not only looks different on mobile devices than it does on desktops, the content itself is different. AT&T is one brand that’s been ahead of the curve, using responsive design to not only reconfigure content into a nice, single-column view, but to also turn a phone number in the desktop version into a “tap to call” button in the mobile version.

responsive email design-at&tAnd that’s just the tip of the iceberg of what’s possible. For instance, you could send an email that is designed to show desktop readers an online-only discount and a catalog request call-to-action, while smartphone readers would see a store-online discount and a mobile app call-to-action. Marry up mobile-targeted design with data on past interactions, time of day information, and geo-location and messaging for email content could get very sophisticated.

Mobile-aware design

Responsive design is not the only way to create mobile-friendly email content. You can still be ahead of the curve and reap most of the benefits of being mobile-friendly if you adopt mobile-aware design techniques, which include:

  • Using a single-column layout
  • Employing large images, text, and buttons
  • Spacing out links so there are fewer mis-taps

These design techniques involve creating a single email that functions well across a range of screen sizes, but is deferential to smartphones.

This summer, a number of big retailers made the jump to mobile-aware email templates, including Banana Republic, JCPenney, Staples, and Victoria’s Secret. That such large retailers would embrace this approach over responsive design — even if it’s only in the short-term — is a strong validation of its benefits.

mobile-aware email design, victoria's secret

As part of Victoria’s Secret’s most recent email content redesign, the company reduced the number of links in its navigation bar to 4 from 11, drastically reduced the average number of images and words used in its message blocks, and reduced and stacked the links in its administration tool bar. The result is a much shorter, more visual email message that improves the user experience on mobile devices.

Desktop-centric design

Alarmingly, the vast majority of B2C brands is still employing a largely desktop-centric email content design — one that’s optimized for viewing on large desktop and laptop monitors and has small links and buttons that are well suited to mouse clicks, but not fingertips.

However, there are some positive signs here. Some brands are using what I call “quasi–mobile-aware” design, which is to say that the primary and secondary messages of their emails use images and buttons that are mobile-friendly, but the header, navigation bar, footer and other elements are still desktop-centric. This is the first step that many marketers take toward being mobile-friendly. Rather than overhaul their entire template, they’re improving the content that changes from email to email.

One-third of the nearly 160 B2C brands examined in the ExactTarget study used a quasi–mobile-aware email design.

It’s worth noting that as tablets and other touch screens replace laptops, mobile-aware design will likely replace desktop-centric designs entirely at some point.

Landing pages: The last mile

No matter how mobile-friendly your email content becomes, if your website landing pages are not mobile-friendly as well, then your efforts may be all for naught. Just like mobile users find mobile-unfriendly emails frustrating and are very likely to just delete them, they are also very likely to abandon websites that are not optimized for mobile. Even worse, they’re quite likely never to visit your site again. So when optimizing your email content using any of the above techniques, you may also want to make similar changes on your landing pages to make sure you are providing a consistent content experience for your audience.

The holiday season and beyond

Retailers are highly risk-adverse during the holiday season, but this year, the evolving mobile landscape will force some of them to experiment anyway. For some, the risk of doing nothing will far outweigh the risk of doing something that may need to be fine-tuned later on.

The holiday season has a number of critical shopping days where mobile will play a key role. In addition to all the weekends in December, some of the season’s high-mobility days include:

  • The day before Thanksgiving, which is the busiest travel day of the year
  • Thanksgiving Day, when consumers are engaging in post-feast and post-game shopping and retailers are responding by increasingly releasing their Black Friday deals early
  • Black Friday and “Cyber Monday,” when many consumers are getting a jump on their holiday shopping
  • Christmas Day, when stores are closed but websites are still open to receive a share of the estimated $30 billion in gift cards that shoppers will receive

The number of brands that deploy responsive or mobile-aware emails on these days will give us a good indication of just how serious marketers are about catching up to consumer expectations, which are currently leaving many brands in the dust. The opportunity to get prepared starts right now!

Have questions on the best ways to reach your audience through email? Join CMI’s Joe Pulizzi and his guest, ExactTarget’s Jeff Rohrs, for a Twitter chat on Audience Development and Email on Tuesday, November 12 at 12 p.m. EST. Follow the conversation @CMIContent and #cmworld.

Cover image via Bigstock

Author: Chad White

Chad White is the author of Email Marketing Rules and Principal of Marketing Research at ExactTarget, a salesforce.com company. He has written about email marketing for more than a decade and his research and commentary have appeared in over 100 publications, including the New York Times, Wall Street Journal and USA Today. You can connect with Chad on Twitter or LinkedIn, or read more of his posts on Email Marketing Rules.

Other posts by Chad White

  • Nandini Rathi

    Very informative post Chad! Most people don’t know the difference between responsive design and mobile-aware design.

    Also, as you pointed out a one-column layout works best in both aware and responsive design. A multi-column layout could be very confusing.

    I would also like to add 2 important points here:-

    1. When planning email for mobile devices, content should come on top. You don’t want your users to lose focus while scrolling down, so content should be the first thing your readers should see.

    2. Also, focus on increasing font and button sizes to make your content easily scannable on mobile devices to avoid zooming in.

  • Jordie van Rijn

    Nice article Chad,

    If email marketing was invented today, we’d all start with mobile friendly mails.

    I wrote about “the shortcut to mobile email” a few weeks back, an approach you mention in your article as mobile aware. One of the more important things I would add: On the small screen shuffle your content so most important is on top!

    http://blog.getresponse.com/taking-the-shortcut-to-mobile-optimized-email.html

  • Spyhop Productions

    Having an android phone, which is often set to block images on email, I was wondering your thoughts on using pictures versus test in responsive mobile design?

    • Chad White

      Using HTML text, alt text and other defensive design tactics continues to be important. However, the message type and your brand dictate how defensive to be. For instance, transactional emails should make extensive use of HTML text, while promotional messaging from a lifestyle brand would likely do better with more images.

  • Desktop user/Gary Lester

    Interesting article.
    Also I find many of the design elements of this page to be friendly.
    More specifically easy on my eyes.
    The fonts, colors, sizes and element choices.
    Quite comforting in contrast to many other pages/sites I read.

  • Todd Price

    Chad, I just learned this morning of Ink by Zurb (same company that created Foundation, a popular responsive framework).

    http://zurb.com/ink/

    “Quickly create responsive HTML emails that work on any device & client. Even Outlook.”

    I wonder if you or anyone else out there has experience with this framework for email?

    • Chad White

      Todd, I’m not familiar with Ink.

  • http://www.it-sales-leads.com/ Barbara Mckinney

    The most critical factor in mobile e-mail design is the positioning of key content to make sure the e-mail’s message is displayed prominently on a computer screen or a smaller mobile screen. Your audience members need to be able to take action on your e-mails using their mobile devices and their computers.Thanks for sharing this article Chad!

  • http://paulalay.com/ Paula Lay

    Would love to know if anyone has a solution to get all users happy. I have created responsive email templates for my list, however – when tested, often works for all email clients except one (usually outlook/gmail). Zurb/Ink is the closest thing that I have found to be very close to working.

    Or is this a case of identifying which email client should lose out?

  • Cat Fyson (Koozai)

    Hi Chad,

    Some awesome tips here – definitely agree that brands should factor in the reasons why people are accessing their emails via their mobiles (e.g. commuting, travel during the holidays) and not only tailor their content to match, but also time it appropriately too. It’s very difficult to create campaigns that work for everyone in your target audience, but careful segmenting is a great place to start – one size does not fit all in email marketing.

    Responsive design is crucial nowadays, and it’s necessary to emphasise the importance of concentrating on every page of your site, and not just the landing pages.

  • bukada33

    like Billy replied I can’t believe that a mother can profit $8534 in 1 month on the internet. view publisher site ­j­o­b­s­6­4­.­c­o­m