12ntc - easy reading on the go
Post on 20-Jun-2015
497 Views
Preview:
TRANSCRIPT
#12NTCmobileemail
Cameron LefevreM+R Strategic Services
Lindsey TwomblyHuman Rights Campaign
Easy Reading on the Go:How to Optimize Emails for Mobile Phones
Each entry is a chance to win an NTEN engraved iPad!
or Online at www.nten.org/ntc/eval
Evaluate This Session!
Receive a mobile-optimized email from HRC: www.hrc.org/ntc
Sample Mobile Optimized Email
Easy Reading on the Go Slide 3
1. The Rise of the Smartphone
2. How Mobile Devices Affect Email Marketing
3. Tracking Mobile Usage
4. How to Optimize Email for Mobile!
Today
Easy Reading on the Go Slide 4
The Rise of the Smartphone
Easy Reading on the Go Slide 5
Smartphone Owners in the U.S.
Easy Reading on the Go Slide 6
New Phone Purchases
Easy Reading on the Go Slide 7
INSERT Chart of the most popular smartphones
U.S. Smartphone Market Share by OS
Easy Reading on the Go Slide 8
People Reading Email on Mobile Phones
Easy Reading on the Go Slide 9
1 in 5 Americansreads email on their mobile phone
almost every day!
Easy Reading on the Go Slide 10
In other words…
How Mobile PhonesAffect Email Marketing
Easy Reading on the Go Slide 11
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
Slide 12Easy Reading on the Go
Emails Opened on Mobile Phones
Easy Reading on the Go Slide 13
24% of Opens within 24 hours
17% of Opens
Email Clicks from Mobile Phones
Easy Reading on the Go Slide 14
Advocacy Alerts Fundraising Appeals
17% of Opens17% of Opens
9% of Clicks 12% of Clicks
HRC Example
Easy Reading on the Go Slide 15
HRC Example
Easy Reading on the Go Slide 16
Email Responses from Mobile Phones
Easy Reading on the Go Slide 17
Advocacy Alerts Fundraising Appeals
17% of Opens17% of Opens
9% of Clicks 12% of Clicks
7% of Actions 5% of Donations
Advocacy by Mobile Platform
Easy Reading on the Go Slide 18
51%
32%
13%2% 2%
57%
31%
9%2% 1%
Email Clicks Email Responses
Fundraising by Mobile Platform
Easy Reading on the Go Slide 19
60%21%
14%
3% 2%
74%
15%9%
1% 0%
Email Clicks Email Responses
Page Completion Rates
Easy Reading on the Go Slide 20
Advocacy Fundraising
Non-Mobile 90% 31%
iPhone 80% 15%
Android 72% 10%
BlackBerry 47% 8%
WebOS 72% 6%
HRC Optimized Example
Easy Reading on the Go Slide 21
The mobile-optimized version of the email outperformed thenon-optimized version:
•6.5% increase in clicks
•7.7% increase in advocacy responses
•6.7% decrease in unsubscribes
The Results
Easy Reading on the Go Slide 22
Questions?
Easy Reading on the Go Slide 23
Tracking Mobile Usage
Easy Reading on the Go Slide 24
• 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
Tracking Mobile Email Opens
Easy Reading on the Go Slide 25
• Use a website analytics tool like Google Analytics
Tracking Mobile Clicks & Engagements
Easy Reading on the Go Slide 26
Questions?
Easy Reading on the Go Slide 27
Mobile Optimize Email!
Easy Reading on the Go Slide 28
• Allows you to define different styles based on screen size
• Supported by:• iOS (iPhone, iPod Touch and iPad)• Android’s default mail client• WebOS
Introducing: CSS @media query
Easy Reading on the Go Slide 29
Basic syntax:
@media only screen and (max-device-width: 480px) {
[define your mobile-specific styles here]
}
@media Syntax
Easy Reading on the Go Slide 30
<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>
@media Email Example
Easy Reading on the Go Slide 31
<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>
@media Email Example
Easy Reading on the Go Slide 32
<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>
@media Example
Easy Reading on the Go Slide 33
iPhone, iPhone 3G, iPhone 3Gs: 320x480
iPhone 4, iPhone 4S: 640x960
iPhone 4 and 4S behave as if they’re 320×480!
iPhone Resolution
Easy Reading on the Go Slide 34
Yahoo! Mail ignores the @media query and uses themobile-specific styles for desktop users
Use attribute selectors!
Yahoo! Mail
Easy Reading on the Go Slide 35
<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>
Yahoo! Mail
Easy Reading on the Go Slide 36
<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>
Yahoo! Mail
Easy Reading on the Go Slide 37
Webkit automatically adjusts font size based on the user’s viewport
Webkit Font Resizing
Easy Reading on the Go Slide 38
@media only screen and (max-device-width: 480px) {
div, p, a, li, td { -webkit-text-size-adjust: none !important; }
}
The Preheader is the one or two line preview of an email
• About 40-80 characters
iPhone:
NTEN makes great use of the preheader:
Preheaders
Easy Reading on the Go Slide 39
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]
Preheaders
Easy Reading on the Go Slide 40
Mobile Email Example
Easy Reading on the Go Slide 41
BA Example
Easy Reading on the Go Slide 42
BA Mobile Example
Easy Reading on the Go Slide 43
BA Example
Easy Reading on the Go Slide 44
@media screen and (max-device-width: 480px) {
..
table[class=nomob], span[class=nomob], img[class=nomob],
td[class=nomob] { display: none !important; }
..
}
..
<table border="0" cellspacing="0" cellpadding="0" class="nomob">
Hiding elements
Easy Reading on the Go Slide 45
BA Example
Easy Reading on the Go Slide 46
@media screen and (max-device-width: 480px) {
..
img[id=baemlfullwidthimg], img[class=baemlfullwidthimg]
{ width: 320px !important; height: auto !important; }
..
}
..
<img src="BA_TheClub_Issue3_invitationAnimated_UK%5FBLUE.gif" width="575" class="baemlfullwidthimg" border="0" />
Resizing elements
Easy Reading on the Go Slide 47
BA Example
Easy Reading on the Go Slide 48
@media screen and (max-device-width: 480px) {
..
td[class=baemailcolsplit] { width: 320px !important;
float: left !important; }
..
}
..
<table>
<tr>
<td class="baemailcolsplit"> [links] </td>
<td class="baemailcolsplit"> [logo] </td>
</tr>
</table>
Repositioning elements
Easy Reading on the Go Slide 49
BA Example
Easy Reading on the Go Slide 50
@media screen and (max-device-width: 480px) {
a[class=baemailfooternav] {
display: block !important;
font-size: 14px !important;
font-weight: bold !important;
padding: 6px 4px 8px 4px !important;
line-height: 18px !important;
background: #dddddd !important;
border-radius: 5px !important;
margin: 10px auto;
width: 240px;
text-align: center;
}
}
..
<a href="link" class="baemailfooternav" style="color:#9c9e9f; font-size:11px; text-decoration:none;">Home</a>
Restyling elements
Easy Reading on the Go Slide 51
BA Example
Easy Reading on the Go Slide 52
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!
Planning Your Optimization
Easy Reading on the Go Slide 53
Questions?
Easy Reading on the Go Slide 54
www.mrss.com/MobileEmail
Download this Presentation
Easy Reading on the Go Slide 55
Each entry is a chance to win an NTEN engraved iPad!
or Online at www.nten.org/ntc/eval
Evaluate This Session!
top related