Your SlideShare is downloading. ×
12NTC - Easy Reading on the Go
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

12NTC - Easy Reading on the Go

481
views

Published on

Published in: Education, Business, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
481
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Easy Reading on the Go:How to Optimize Emails forMobile Phones#12NTCmobileemailCameron LefevreM+R Strategic ServicesLindsey TwomblyHuman 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 EmailReceive a mobile-optimized email from HRC:www.hrc.org/ntc Easy Reading on the Go Slide 2
  • 4. Today1. The Rise of the Smartphone2. How Mobile Devices Affect Email Marketing3. Tracking Mobile Usage4. 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
  • 7. New Phone Purchases Easy Reading on the Go Slide 6
  • 8. U.S. Smartphone Market Share by OSINSERT 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
  • 11. How Mobile PhonesAffect Email Marketing Easy Reading on the Go Slide 10
  • 12. How are mobile phones affecting HRC?We evaluated the following:1. Percentage of emails opened on mobile phones2. Percentage of email clicks from mobile phones3. Percentage of advocacy and fundraising responses submitted on mobile phones4. Advocacy and fundraising page completion rates5. 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
  • 15. HRC Example Easy Reading on the Go Slide 14
  • 16. HRC Example Easy Reading on the Go Slide 15
  • 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
  • 21. HRC Optimized Example Easy Reading on the Go Slide 20
  • 22. The ResultsThe 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 Easy Reading on the Go Slide 21
  • 23. Questions?Easy Reading on the Go Slide 22
  • 24. Tracking Mobile Usage Easy Reading on the Go Slide 23
  • 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
  • 27. Questions?Easy Reading on the Go Slide 26
  • 28. Mobile Optimize Email! Easy Reading on the Go Slide 27
  • 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 SyntaxBasic 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 ResolutioniPhone, iPhone 3G, iPhone 3Gs: 320x480iPhone 4, iPhone 4S: 640x960iPhone 4 and 4S behave as if they’re 320×480! Easy Reading on the Go Slide 33
  • 35. Yahoo! MailYahoo! Mail ignores the @media query and uses themobile-specific styles for desktop usersUse 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 basedWebkit only screen and (max-device-width: 480px) { on the user’sviewport li, td { -webkit-text-size-adjust: div, p, a, none !important; }} Easy Reading on the Go Slide 37
  • 39. PreheadersThe Preheader is the one or two line preview of an email• About 40-80 charactersiPhone:NTEN makes great use of the preheader: Easy Reading on the Go Slide 38
  • 40. PreheadersInsert 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
  • 41. Mobile Email Example Easy Reading on the Go Slide 40
  • 42. BA Example Easy Reading on the Go Slide 41
  • 43. BA Mobile Example Easy Reading on the Go Slide 42
  • 44. BA Example Easy Reading on the Go Slide 43
  • 45. Hiding elements@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"> Easy Reading on the Go Slide 44
  • 46. BA Example Easy Reading on the Go Slide 45
  • 47. Resizing elements@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" /> Easy Reading on the Go Slide 46
  • 48. BA Example Easy Reading on the Go Slide 47
  • 49. Repositioning elements@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> Easy Reading on the Go Slide 48
  • 50. BA Example Easy Reading on the Go Slide 49
  • 51. Restyling elements@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> Easy Reading on the Go Slide 50
  • 52. BA Example Easy Reading on the Go Slide 51
  • 53. Planning Your Optimization1. Decide whether you should optimize2. Decide which mobile phones to optimize for3. Design the email • Simplify the layout? • Hide content from mobile readers? • Include mobile-only content?4. Write the code5. Check in major desktop clients, phones and tablets6. Test against non-optimized version7. Roll-out! Easy Reading on the Go Slide 52
  • 54. Questions?Easy Reading on the Go Slide 53
  • 55. Download this Presentationwww.mrss.com/MobileEmail Easy Reading on the Go Slide 54
  • 56. Evaluate This Session!Each entry is a chance to win an NTEN engraved iPad! or Online at www.nten.org/ntc/eval