Best Practices for Mobile Email Design

Todd Fleming There’s no getting around the fact that e-mail usage has become a mainstream element of the overall mobile experience. According to numerous recent studies, daily usage of e-mail on a mobile device jumped 40 percent over the past year, with 43.5 million users turning to their iPhones, BlackBerries and other devices for their e-mail communication needs.
However, that usage rate doesn’t necessarily translate to consumer satisfaction. Over 50 percent of users stated they were either “very dissatisfied” or “somewhat dissatisfied” with how their devices displayed online content. Only 13 percent admitted they were satisfied.

Those kinds of numbers make it imperative for designers and web developers to learn and implement optimal design and development practices for rendering e-mail on mobile devices. After all, if users aren’t even remotely happy with the first impression an e-mail makes when it displays on their smartphones, what are the odds they’ll actually read it, let alone follow through on the call to action?

With that in mind, I’ve come up with a few techniques to be considered as “best practices” when creating Web-based e-mails that need to be as useful and user-friendly when viewed on a mobile device:

Think content forward: The designer adopting a content-first, design-elements-second strategy is the one that will create the successful Web-to-mobile user experience. Ask yourself this simple question: What’s the message?

Remember that content scales on a mobile device. That means a text-heavy image originally designed to be viewed at 750 pixels wide will probably be completely illegible at 250 pixels wide. That means you’ve probably lost important and relevant information in the carry over from Web to mobile that could be the difference between securing potential customers and losing them forever.

So what’s the fix? Don’t use large images that could take up the entire viewport of a mobile device. Think concise. Common resolutions for standard cell phones are about 128 pixels wide. Smartphones check in at around 360 to 480 pixels wide. That means relevant, top-level information should always be displayed as text, in addition to being short and simple. Keep in mind that text scales large and will always be legible.

Link to optimized content: When designing and implementing the mobile version of a Web-based e-mail, make sure the call-to-action links to a mobile-optimized landing page. Here’s a good question: If a mobile e-mail’s call to action links to a website built with a number of Adobe Flash and JavaScript elements that won’t be displayed on a number of handheld devices, then what was the point of creating a mobile version e-mail in the first place?

In most cases, best practices recommend developing a mobile landing page that might almost be considered a minimalist version of an existing Web presence. Make it a point to avoid images that serve no purpose in getting your message across, eliminate links that open new windows and convolute the mobile browsing experience and limit scrolling to one direction.

In addition, make sure users are provided with a link that allows them to visit a standard website if it exists. Customers will always appreciate the option if it suits their browsing needs or habits.

Creating content that carries over from Web to mobile doesn’t need to be complicated – it simply requires a content forward perspective and a little common sense. Remember, following a few simple guidelines could be the difference in creating a satisfying mobile experience for your customers.

9 Trackbacks/Pingbacks

  1. […] will depend on how it’s designed and what type of device it’s being viewed on, though there are best practices guidelines developers and designers can rely on to ensure compatibility across various mobile Web browsers. A […]

  2. […] when it comes to mobile.” – It seems that retailers are still behind when it comes to email best practices regarding mobile. And while some are catching up quickly, many seem to have a ways to go. There was excellent […]

  3. […] Best Practices for Mobile Email Design […]

  4. […] interactive programs. That’s right, developing mobile or social programs will make you send more emails. That’s because email pulls together customer […]

  5. […] interactive programs. Interesting to think that developing mobile or social programs will make you send more emails. That’s because email pulls together customer […]

  6. […] Best Practices for Mobile Email Design As we’ve said before, mobile email optimization must be a priority for marketers (especially going into 2012). Here are 2 best practices for designing mobile email that will be useful and user-friendly. […]

  7. […] Best Practices for Mobile Email Design: As we’ve said before, mobile email optimization must be a priority for marketers (especially going into 2012). Here are two best practices for designing mobile email that will be useful and user-friendly. […]

  8. […] Best Practices for Mobile Email Design […]

  9. […] Designing for Mobile: Apps v. Mobile Micrositebr Best Practices for Mobile Email Design […]

%d bloggers like this: