Ditch the “Mobile Version” of Your Email

[ 0 By

Quick question: Which of the screenshots below represents your ideal way to read an email on your phone?

mobile-vs2

I’m going to guess that many of you chose the option on the right, the mobile-optimized email. It’s my choice, too! Since mobile users value efficiency, speed and ease of use, a clearly organized and well-designed mobile email is the logical choice over a text-based page devoid of imagery, links or clear hierarchy.

A bit of history

A couple years ago when smartphones were just coming of age, it was fairly common practice to link to a “mobile version” in the preheader of your email, which would take you (the reader), to a page similar to the example below.

kennethcole-plaintext

In most cases, these mobile versions have been simple, text-only versions of the emails they accompany: no branding, images, or color (although I’ve seen a few exceptions). I suspect these are frequently plain-text versions—originally created as the second part of a mulitpart MIME message—that have been hosted on a separate URL.

Problems with the ‘mobile version’

  • Tiny text
  • Hard to tap
  • Sometimes unreadable
  • Lackluster experience not optimized for conversion

With most marketers getting one—maybe two—clicks per open, why would you ask readers to take an extra step before delivering them to the place best suited for conversion?

Let’s ditch the ‘mobile version’

Now that mobile device email opens represent 48% of all email opens, it’s time to abandon this practice. Mobile has grown fast, and while addressing emails on mobile devices can be challenging, linking to a plain-text version is a bandaid solution at best.

Every email version is your ‘mobile version’

As Mike Hotz stated in a recent ClickZ column, “Every version of your email is now a mobile version.” To further reinforce the point, consider that a recent BlueHornet survey showed that 80% of consumers delete emails that don’t render well on a mobile device. What about the ‘mobile triage’ argument—that emails with rendering issues on mobile, are saved for later desktop viewing? Forget it. Only 3% of people will view the same email on more than one device.

delete-email

Even as far back as January 2011, Anna Yeaman advocated for removal of these links, saying “That’s asking a lot of mobile users, who value efficiency.”

Alternatives Mobile Approaches

Consider mobile first

Rather than delivering an unreadable, hard-to-use (and impossible to convert!) email with a link to a “mobile version,” why not make the email mobile-friendly in the first place?! One of the simplest ways to achieve this goal is to take a mobile first approach. With this approach, the email is readable and clickable no matter which size screen it’s being read on. There is only one version (one HTML file) of the email, but the email scales to look great on both desktops and mobile devices. Try using:

  • A grid system for alignment and proportion
  • A single column design
  • Larger fonts (at least 14px)
  • Touch-friendly buttons
  • Key information and CTA in the upper left of the email

For other information on creating mobile-friendly emails, check out this infographic, “Anatomy of the Perfect Mobile Email.

Go responsive

While responsive emails require more resources, time and skill, it is one of the best options for optimizing your emails for viewing in all environments. Responsive email designs use CSS3 @media queries to render two different layouts depending on the size of the screen the email is opened on. CSS media queries can auto-adjust the layout, content and text size of an email depending on the screen size of the device it is being read on.

responsive-email

In addition, images can be swapped out or completely disabled, images and buttons can be resized and colors can be changed. While responsive design a bit more design, planning and testing time, they are the only truly “mobile first” strategy. Keep in mind, however, that not all mobile environments support media queries.

Link to your mobile site

On of the major caveats of a “mobile version” is that users have to click on the mobile version link (which is typically also hard to read and/or tap on a mobile device) to bring them to a landing page. Why not link directly to a responsive site instead, saving your subscribers a click? Make the process as easy for your subscribers as possible to avoid abandonment!

Additional Resources