The Lunch Pail: A Digital Marketing Blog

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.

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.