1. Easy Reading on the Go:
How to Optimize Emails for
Mobile Phones
#12NTCmobileemail
Cameron Lefevre
M+R Strategic Services
Lindsey Twombly
Human Rights Campaign
2. Evaluate This Session!
Each entry is a chance to win an NTEN engraved iPad!
or Online at www.nten.org/ntc/eval
3. Sample Mobile Optimized Email
Receive a mobile-optimized email from HRC:
www.hrc.org/ntc
Easy Reading on the Go Slide 2
4. Today
1. The Rise of the Smartphone
2. How Mobile Devices Affect Email Marketing
3. Tracking Mobile Usage
4. How to Optimize Email for Mobile!
Easy Reading on the Go Slide 3
5. The Rise of the Smartphone
Easy Reading on the Go Slide 4
6. Smartphone Owners in the U.S.
101 million
66 million
43 million
21 million
August 2008 January 2010 January 2011 January 2012
Easy Reading on the Go Slide 5
8. U.S. Smartphone Market Share by OS
INSERT Chart of the most popular smartphones
Easy Reading on the Go Slide 7
9. People Reading Email on Mobile Phones
Almost every day At least once a month
89 million
70 million
51 million
November 2009 November 2010 November 2011
Easy Reading on the Go Slide 8
10. In other words…
1 in 5 Americans
reads email on their mobile phone
almost every day!
Easy Reading on the Go Slide 9
12. How are mobile phones affecting HRC?
We evaluated the following:
1. Percentage of emails opened on mobile phones
2. Percentage of email clicks from mobile phones
3. Percentage of advocacy and fundraising responses submitted on mobile
phones
4. Advocacy and fundraising page completion rates
5. Most popular mobile phones being used
Easy Reading on the Go Slide 11
13. Emails Opened on Mobile Phones
17% of Opens
24% of Opens
within 24 hours
Easy Reading on the Go Slide 12
14. Email Clicks from Mobile Phones
Advocacy Alerts Fundraising Appeals
17% of Opens 17% of Opens
9% of Clicks 12% of Clicks
Easy Reading on the Go Slide 13
17. Email Responses from Mobile Phones
Advocacy Alerts Fundraising Appeals
17% of Opens 17% of Opens
9% of Clicks 12% of Clicks
7% of Actions 5% of Donations
Easy Reading on the Go Slide 16
18. Advocacy by Mobile Platform
Email Clicks Email Responses
2% 2% 2% 1% 2% 1%
9% 9%
13%
31%
51%
31%
57% 57%
32%
iPhone Android BlackBerry WebOS Other
Easy Reading on the Go Slide 17
19. Fundraising by Mobile Platform
Email Clicks Email Responses
3% 2% 2% 1% 1% 0%
9% 9%
14% 15%
21% 31%
60% 57%
74%
iPhone Android BlackBerry WebOS Other
Easy Reading on the Go Slide 18
20. Page Completion Rates
Advocacy Fundraising
Non-Mobile 90% 31%
iPhone 80% 15%
Android 72% 10%
BlackBerry 47% 8%
WebOS 72% 6%
Easy Reading on the Go Slide 19
22. The Results
The mobile-optimized version of the email outperformed the
non-optimized version:
• 6.5% increase in clicks
• 7.7% increase in advocacy responses
• 6.7% decrease in unsubscribes
Easy Reading on the Go Slide 21
25. Tracking Mobile Email Opens
• Email opens are tracked by a hidden 1x1 pixel
<img src="http://action.hrc.org/site/PixelServer" height="1" width="1" />
• Use this pixel or insert your own!
<img src="http://www.yoursite.org/tracker.gif" height="1" width="1" />
<img src="http://www.yoursite.org/tracker.gif?email_id=1234" height="1"
width="1" />
• Track the pixel downloads in your web server log:
1.1.1.1 - - [22/Feb/2011:00:13:03 -0600] "GET /site/PixelServer HTTP/1.1"
200 55 "-" "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X;
en-us) AppleWebKit/533.17.9 (KHTML, like Gecko)" 1460
Easy Reading on the Go Slide 24
26. Tracking Mobile Clicks & Engagements
• Use a website analytics tool like Google Analytics
Easy Reading on the Go Slide 25
29. Introducing: CSS @media query
• Allows you to define different styles based on screen size
• Supported by:
• iOS (iPhone, iPod Touch and iPad)
• Android’s default mail client
• WebOS
Easy Reading on the Go Slide 28
30. @media Syntax
Basic syntax:
@media only screen and (max-device-width: 480px) {
[define your mobile-specific styles here]
}
Easy Reading on the Go Slide 29
31. @media Email Example
<html>
<body>
<table width="600">
<tr>
<td width="600">
<a href="http://www.mywebsite.org/"><img src="logo.jpg”
width="600" height="100" /></a>
[your email copy here]
</td>
</tr>
</table>
</body>
</html>
Easy Reading on the Go Slide 30
32. @media Email Example
<html>
<body>
<table width="600" class="emailtable">
<tr>
<td width="600" class="emailcontent">
<a href="http://www.mywebsite.org/"><img src="logo.jpg"
width="600" height="100" class="logo" /></a>
[your email copy here]
</td>
</tr>
</table>
</body>
</html>
Easy Reading on the Go Slide 31
33. @media Example
<head>
<style>
@media only screen and (max-device-width: 480px) {
table.emailtable, td.emailcontent {
width: 300px !important;
}
img.logo {
width: 300px !important;
height: 50px !important;
}
}
</style>
</head>
Easy Reading on the Go Slide 32
34. iPhone Resolution
iPhone, iPhone 3G, iPhone 3Gs: 320x480
iPhone 4, iPhone 4S: 640x960
iPhone 4 and 4S behave as if they’re 320×480!
Easy Reading on the Go Slide 33
35. Yahoo! Mail
Yahoo! Mail ignores the @media query and uses the
mobile-specific styles for desktop users
Use attribute selectors!
Easy Reading on the Go Slide 34
36. Yahoo! Mail
<head>
<style>
@media only screen and (max-device-width: 480px) {
table.emailtable, td.emailcontent {
width: 300px !important;
}
img.logo {
width: 300px !important;
height: 50px !important;
}
}
</style>
</head>
Easy Reading on the Go Slide 35
37. Yahoo! Mail
<head>
<style>
@media only screen and (max-device-width: 480px) {
table[class="emailtable"], td[class="emailcontent"] {
width: 300px !important;
}
img[class="logo"] {
width: 300px !important;
height: 50px !important;
}
}
</style>
</head>
Easy Reading on the Go Slide 36
38. Webkit Font Resizing
@media automatically adjusts font size based
Webkit only screen and (max-device-width: 480px) { on the user’s
viewport li, td { -webkit-text-size-adjust:
div, p, a, none !important; }
}
Easy Reading on the Go Slide 37
39. Preheaders
The Preheader is the one or two line preview of an email
• About 40-80 characters
iPhone:
NTEN makes great use of the preheader:
Easy Reading on the Go Slide 38
40. Preheaders
Insert the preheader code at the top of the email’s <body> section:
<html>
<body>
<span style="display: none; display: none !important;">
Your short preheader message here!
</span>
..
[the rest of your email content]
Easy Reading on the Go Slide 39
53. Planning Your Optimization
1. Decide whether you should optimize
2. Decide which mobile phones to optimize for
3. Design the email
• Simplify the layout?
• Hide content from mobile readers?
• Include mobile-only content?
4. Write the code
5. Check in major desktop clients, phones and tablets
6. Test against non-optimized version
7. Roll-out!
Easy Reading on the Go Slide 52
