Despite the deluge of smart phone model updates and frequent new releases, email rendering on mobile phones has remained relatively unchanged in recent months, or at least since the iPhone was released in June of 2007.
Because not a lot has changed, you’ll probably look at this as good news or bad news. The good news is that the landscape has not become more complicated, but the bad news is that smart phone email rendering has made little progress and is inconsistent at best. And like computer email clients, smart phones are not created equal when it comes to email rendering.
Depending upon phone provider and manufacturer, a number of things can happen when an email arrives in a mobile mailbox.
- HTML is displayed
- Text is displayed
- HTML source is displayed
- Simplified HTML rendering is displayed
Given the scattershot approach of the user experience, a few theories have evolved to handle the inconsistencies:
- Provide a mobile link that links to a webpage with a plain text version of the email as the mobile version
- Provide a mobile link that links to a webpage with 100% width and percentage-spaced images to accommodate a variety of screen sizes
- Code the email so that email client inconsistencies can be minimized as much as possible and provide an external mobile link
The iPhone is the most common device that most accurately reflects an email’s intended design on a computer when moved to the small screen. And though iPhones are popular, they are far from the only smartphone on the market.
Luckily, there are a few guidelines that you can follow to keep your message as consistent as possible in the current mobile landscape:
- The width of the viewable area on a smartphone at any given time is roughly 250-300 pixels, less than half the width of an email message in a traditional email client.
And that’s about the only thing that is consistent.
Here’s how to handle the inconsistencies…
- The from name should have a reliable sender that is easily recognizable in the first few words.
- Create a subject line with more important words in the beginning to account for viewable areas in mobile email clients
- Use a more engaging, less functional preheader. (For example, incite a call to action instead of plopping the unsubscribe verbiage at the top of the email).
- Include as much relevant information as possible in the top part of the email as it will be viewed first on a small screen.
- Use a preheader (see ‘The Wrapping’ above for more information)
- Use fewer images in an email header to account for mobile email clients that may display the html source instead of the actual message.
- Use alt tags
- Use 100% width tables and code table cells in relative percentages
- When creating a plain text version, keep line lengths less than 70 characters
The Big Picture
Perhaps the biggest questions when creating a mobile email campaign are the following:
- Is the product/service highlighted in the email something that is often interacted with on the go or does it require a closer look on an actual computer?
- What are the viewing habits of your intended recipients?
- Do you know if your intended recipients want mobile email?
You may want to consider the answers to these questions before writing the first piece of code.
Questions/thoughts? Submit a comment below.