According to both Forrester and Gartner, about 76% of U.S. workers have access to email on mobile devices today, and globally, it’s approximately 60% of all full-time employees. Forrester projects universal email access on mobile devices by 2014.
Most marketers already know how to design good-looking, well-written HTML email messages that get results. But how do you make certain that your messages look just as good on a smart phone as they do on a laptop or desktop?
The first step is to rethink your email templates with the goal of making them just as effective when the message renders on a mobile device as it is when it appears in a desktop or laptop mailbox. Here are 7 tips that can help you achieve that goal.
1. Use Bigger Text. It may seem counter-intuitive to make the font larger when you are creating a message for a smaller screen, but that’s the first step in making text readable. Buttons and headlines need to be 44 pixels tall in order to render properly on a mobile device. Use large, short headlines, and short, direct calls to action. (It will improve your writing, too.)
2. Shrink the design by 20%-50%. Forget the conventional wisdom that emails should be 600 pixels wide. To render properly on an Android or iPhone, the design needs to render at approximately 480 pixels wide. For a Blackberry, it’s 360 pixels. And for a standard flip-phone, it’s just 300 pixels.
3. Use a Grid System. Lay out the content vertical and horizontally aligned blocks, with “gutters” between them. This allows the design to shrink without losing its “look”.
4. Get rid of multi-column designs. Multiple columns just don’t work on most mobile devices. If you have “must read” content in a right-hand column, move it to the bottom or consider sending it as its own email. If you feel you MUST use multiple columns, feature critical content on the left, and make sure that the columns are readable on a Blackberry and flip-phone as well as both Android and iPhone models. Testing is an absolute essential. Find friends who own iPhone, Android, Blackberry, Symbian, and Windows 7 phones, and send them test messages BEFORE you send your campaign. If you can’t find someone with all five of the primary operating systems to test your design on, check out the mobile device testing tools like Email on Acid or D-Test.
5. Group Sections. Use background colors to visually separate topics instead of horizontal rules, and present content in sections with rounded edges.
6. Use Variable Content. This is an email marketing design best practice in general, but it applies to mobile rendering as well. Variable content means using an effective combination of images and HTML so that your point is clear with or without images. Don’t make your email one big image map or CSS page.
7. Use a Viewport Meta Tag. Instead of shrinking the full email, if most of your audience uses iPhones, add a piece of code like this that will make the email render quickly and properly on the iPhone. <meta name=”“viewport”” content=”“width=320””>
Last, but hardly least, don’t forget that the all of the compliance rules, from CAN-SPAM to the EU’s Rule 13, apply to commercial email messages regardless of the platform.
Photo credit: Deb McAlister-Holland, ©2010, used with permission.
# # #
Just three days remain until the free webinar on getting the most out of social and digital media without running into compliance problems. If you work in insurance, financial services, healthcare, gaming or another regulated industry, join us on Thursday, July 14, at 11 a.m. central time when Distribion, LIMRA, and Socialware will present Drawing the Line Between Personal and Professional Use. Registration is free, but space is limited. Register today.