As smartphone sales go through the roof (Apple sold over 1 million 3G iPhones on its launch weekend in July), inbox and message views are growing in numbers—and shrinking in size.
The good news: More of your customers can read your email messages on their smartphones now, instead of waiting until they get back to their home or office computers.
The bad news: The email that looks so great on your home or office PC/laptop may look like a garbled mess on the average smartphone. Although the iPhone, for example, beautifully renders HTML messages with images, most smart phones don't, so you must design a message template that will render well in both a PC and the mobile email environment.
Because most of your subscribers who access email via a mobile device may also access the same email via their PC or laptop, sending mobile-optimized text messages is usually not the best strategy.
Also, don't expect a mobile device to detect and present the text part of your multipart message format. If your mobile user signed up for HTML, that's what she'll get on her phone, as virtually all mobile operating systems today present the HTML part. But, except in the case of the iPhone and Windows Mobile, it will probably look like a malformed text message.
So until the majority of mobile devices can render HTML well, the best compromise is to create a simple, well-designed HTML message that will look great in a PC environment but will also be highly usable on a mobile device.
The following HTML cross-platform optimization tips can make your message render better in most inbox environments, PC and mobile:
1. Design for the preview pane and initial mobile screen. Use your most valuable real estate, the top 2-3 inches of your message, for your most important content.
- Move standing copy, such as "forward to a friend" or "add to the address book" requests, down below the fold. Consider moving "add to address book" copy to the bottom or administrative area of your emails—and focus on these efforts in the confirmation and welcome emails, where you can explain the delivery and rendering benefits in more detail.
- Put links to Web and mobile versions below the fold, after key information/calls to action. Alternatively, you can incorporate your call to action in the link to your Web or mobile version.