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.
2. Alt text. Use descriptive alt text (HTML text that displays when images do not render) with all images, as the text will show in some email environments when images are blocked.
3. Use fixed-width tables. This ensures that your email won't expand when images are blocked. Also, make sure you specify image height and width.
4. Keep emails to less than 600 pixels wide. This eliminates the need for users to scroll and ensures that your email won't have ads overlaid on your content from email services such as Gmail.
5. Use text links, not image links. Image-based links will create a mess in most mobile environments and will not render when images are blocked in a PC environment.
6. Design for horizontal scanning. Because most people use the horizontal preview panes, design the top ("above the fold") section of your email without columns or tables and for easy left-to-right scrolling. With no images and extraneous HTML at the top, mobile users should be able to read the first part of your email easily.
7. Spell out key URLs/links. Particularly if you have an international audience, you should spell out the full URL (such as https://www.company.com/specialoffer.html). Outside the US, Symbian is the most popular operating system for mobile devices, and it does not recognize embedded links.
8. Eliminate image-based mastheads or move below the fold. These take up valuable real estate on all devices and will show up as blanks on PCs when images are blocked and as a long image path on many mobile devices.
9. Eliminate postcard-style emails and use of very large images. Hotmail/Live Mail may block postcard-style emails (those with a high image-to-text ratio). With the growing use of preview panes and blocked images, large images also make for a very poor rendering and user experience.
10. Put key information in HTML text. This includes newsletter/company name, article titles, product names, calls to action, contact information, and URLs.
11. Consider not using long tracking URLs at the top of your emails. These long strings of code can take up most of the initial screen on many smartphones. While you lose link tracking, you gain subscriber usability.
A smart redesign now will keep you readable and relevant for the growing number of subscribers who read your messages on their smartphones and their home or office computers.
