August 18, 2011
OPEN Forum Message
Company Culture
Can you recognize signs that your company's culture isn't working? Get advice from the experts on what to look for–and how to fix it.
Learn more
Featured Response
“”
Bill Freedman
You have a mobile phone. You check your e-mail on your phone. So why aren't you sending e-mails that are easy for people to receive on their phone?
You could design different kinds of e-mails for accessing on different devices, but that sounds like a lot of work, right? Worry not, the following six tips will help you design one e-mail to work for you in practically all e-mail reading devices.
Know your audience
What percentage of your list accesses e-mail on a mobile device? You can start with my general estimate that over a third of U.S. e-mail users have received e-mail on their phones or you can use a tool like Litmus or MailboxIQ. If you have no idea, you can start with these general statistics. Last November, Comscore estimated that 70.1 million adults accessed e-mail on their mobile phone—this all rolls up into saying over a third of U.S. e-mail users have read e-mail on their mobile phones.
Know the device
Not including iPads or tablet computers, a significant part of your list may be accessing e-mail on a non-traditional device, so you need to make sure to measure up.
Screen size
Are you designing one width e-mails for html e-mail clients and yet another for mobile devices? It doesn't have to be so hard. There's a line of code in the header of your e-mail called the Viewport Meta Tage that helps an e-mail successfully scale and fit to the width of an iPhone screen. Inserting this code in the header of your e-mail will help scaling:
If you don't use this code in your header, you may notice that your e-mail is zoomed out with too much white space on the right and left sides. This code only helps with accurate scaling on the iPhone, but doesn't break anything on other screens.
You have probably been designing your emails for 600 pixels wide—it's the current standard width. As referenced in the viewport code above, the iPhone is 320 pixels wide. Since the iPhone is the current standard for smartphone screen sizes, you may want to design your html e-mails at 640 pixels wide so it more cleanly divides in half (for an exact scale). Don't forget that in landscape, an iPhone screen is 480 pixels wide.
Be square—with the grid
Most designers already design their digital layouts on some sort of grid—designing for the grid is just as important with e-mails. Doing so can help proportions scale down in the proper ratio to each other, which can help provide a clear informational hierarchy. Consider a more narrow, simple layout that collapses elegantly as the screen size shrinks. Most users handle their phones with their right hands, put icons and links in a way that can help improve their experience.
Timing and fragmentation
Instead of depending on the old adage that Tuesday morning tend to be the best time for opening e-mail, you'll find that early morning and late evening are the new peak open times. People are also opening their e-mail in a wider range of scenarios—with more distractions and switching between a variety of tablets, desktop computers and mobile devices.
Your challenge is to use this fragmentation to your advantage. Although we've thought of mobile e-mail users as skimmers and scanners, your target may be in the time-killing category. When people are bored, they'll return to their inbox and give it a little more attention. Surveys can help you find out which kind of e-mail recipient is on your list.
Use your words
Practically all mobile e-mail advice recommends keeping your content as short as possible. Using small amounts of copy will get your point across quickly. But have you considered that we're using a touch screen now? Consider the words "click here." Will they have the same impact when using a mouse-free device? The way e-mail is handled on an iPhone features the sender of the e-mails rather than the subject line.
The sender is the most important part of the e-mail. Who is the sender? A person? A corporate entity? A/B testing can also be useful here. If your text is under 12 pixels, it will scale up, which can break your design. Adding the style "-webkit-text-size-adjust:none" to your CSS will let you avoid auto-scaling.
Use pictures
Make links big enough to allow recipients to touch the link without initially expanding the e-mail. Also, keep space between clickable items. Apple tells us that 44x44 is the easiest dimension for a fingertip to touch a link. Don't place any competing links inside that block. Make it convenient for one-handed users.
Lastly...
Test your e-mail to see how it looks. Does your eye focus on a different part of the e-mail than it does in the traditional desktop environment? Do your font sizes scale? Are your headlines and sentences too long? These are the kind of questions that can only be answered with rigorous testing. Your e-mail service provider should offer a variety of testing environments to make sure your e-mail efforts are maximized.
Now what?
When it comes to timing, behavior and design, stick to the basics. Keep images to a minimum, keep headlines short and always be testing. You'll have surprising response rates in no time.
What's a great mobile e-mail you've received lately?
Check your balance, review recent transactions and pay your bill on the go.
Bill Freedman 9 months ago
I would love to see a best practices sample email. Does anyone have a link to a email/webpage that follows the suggestions?