Easy Reading on the Go:How to Optimize Emails forMobile Phones#12NTCmobileemailCameron LefevreM+R Strategic ServicesLindse...
Evaluate This Session!Each entry is a chance to win an NTEN engraved iPad!          or Online at www.nten.org/ntc/eval
Sample Mobile Optimized EmailReceive a mobile-optimized email from HRC:www.hrc.org/ntc                  Easy Reading on th...
Today1. The Rise of the Smartphone2. How Mobile Devices Affect Email Marketing3. Tracking Mobile Usage4. How to Optimize E...
The Rise of the Smartphone        Easy Reading on the Go   Slide 4
Smartphone Owners in the U.S.                                                   101 million                               ...
New Phone Purchases            Easy Reading on the Go   Slide 6
U.S. Smartphone Market Share by OSINSERT Chart of the most popular smartphones                          Easy Reading on th...
People Reading Email on Mobile Phones                   Almost every day     At least once a month                        ...
In other words…         1 in 5 Americans  reads email on their mobile phone         almost every day!             Easy Rea...
How Mobile PhonesAffect Email Marketing      Easy Reading on the Go   Slide 10
How are mobile phones affecting HRC?We evaluated the following:1. Percentage of emails opened on mobile phones2. Percentag...
Emails Opened on Mobile Phones                                  17% of Opens                                  24% of Opens...
Email Clicks from Mobile Phones  Advocacy Alerts                      Fundraising Appeals     17% of Opens                ...
HRC Example              Easy Reading on the Go   Slide 14
HRC Example              Easy Reading on the Go   Slide 15
Email Responses from Mobile Phones  Advocacy Alerts                       Fundraising Appeals     17% of Opens            ...
Advocacy by Mobile Platform            Email Clicks                                Email Responses             2% 2%      ...
Fundraising by Mobile Platform            Email Clicks                                Email Responses              3% 2%  ...
Page Completion Rates                  Advocacy              Fundraising  Non-Mobile          90%                  31%  iP...
HRC Optimized Example            Easy Reading on the Go   Slide 20
The ResultsThe mobile-optimized version of the email outperformed thenon-optimized version:• 6.5% increase in clicks• 7.7%...
Questions?Easy Reading on the Go   Slide 22
Tracking Mobile Usage      Easy Reading on the Go   Slide 23
Tracking Mobile Email Opens•   Email opens are tracked by a hidden 1x1 pixel    <img src="http://action.hrc.org/site/Pixel...
Tracking Mobile Clicks & Engagements•   Use a website analytics tool like Google Analytics                              Ea...
Questions?Easy Reading on the Go   Slide 26
Mobile Optimize Email!      Easy Reading on the Go   Slide 27
Introducing: CSS @media query• Allows you to define different styles based on screen size• Supported by:   • iOS (iPhone, ...
@media SyntaxBasic syntax:   @media only screen and (max-device-width: 480px) {       [define your mobile-specific styles ...
@media Email Example<html><body><table width="600"> <tr>  <td width="600">   <a href="http://www.mywebsite.org/"><img src=...
@media Email Example<html><body><table width="600" class="emailtable"> <tr>  <td width="600" class="emailcontent">   <a hr...
@media Example<head><style>@media only screen and (max-device-width: 480px) {    table.emailtable, td.emailcontent {      ...
iPhone ResolutioniPhone, iPhone 3G, iPhone 3Gs: 320x480iPhone 4, iPhone 4S: 640x960iPhone 4 and 4S behave as if they’re 32...
Yahoo! MailYahoo! Mail ignores the @media query and uses themobile-specific styles for desktop usersUse attribute selector...
Yahoo! Mail<head><style>@media only screen and (max-device-width: 480px) {    table.emailtable, td.emailcontent {        w...
Yahoo! Mail<head><style>@media only screen and (max-device-width: 480px) {    table[class="emailtable"], td[class="emailco...
Webkit Font Resizing@media automatically adjusts font size basedWebkit only screen and (max-device-width: 480px) {        ...
PreheadersThe Preheader is the one or two line preview of an email•   About 40-80 charactersiPhone:NTEN makes great use of...
PreheadersInsert the preheader code at the top of the email’s <body> section:<html><body><span style="display: none; displ...
Mobile Email Example     Easy Reading on the Go   Slide 40
BA Example             Easy Reading on the Go   Slide 41
BA Mobile Example             Easy Reading on the Go   Slide 42
BA Example             Easy Reading on the Go   Slide 43
Hiding elements@media screen and (max-device-width: 480px) {    ..    table[class=nomob], span[class=nomob], img[class=nom...
BA Example             Easy Reading on the Go   Slide 45
Resizing elements@media screen and (max-device-width: 480px) {    ..    img[id=baemlfullwidthimg], img[class=baemlfullwidt...
BA Example             Easy Reading on the Go   Slide 47
Repositioning elements@media screen and (max-device-width: 480px) {    ..    td[class=baemailcolsplit] { width: 320px !imp...
BA Example             Easy Reading on the Go   Slide 49
Restyling elements@media screen and (max-device-width: 480px) {    a[class=baemailfooternav] {        display: block !impo...
BA Example             Easy Reading on the Go   Slide 51
Planning Your Optimization1. Decide whether you should optimize2. Decide which mobile phones to optimize for3. Design the ...
Questions?Easy Reading on the Go   Slide 53
Download this Presentationwww.mrss.com/MobileEmail              Easy Reading on the Go   Slide 54
Evaluate This Session!Each entry is a chance to win an NTEN engraved iPad!          or Online at www.nten.org/ntc/eval
Upcoming SlideShare
Loading in...5
×

12NTC - Easy Reading on the Go

501

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
501
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

12NTC - Easy Reading on the Go

  1. 1. Easy Reading on the Go:How to Optimize Emails forMobile Phones#12NTCmobileemailCameron LefevreM+R Strategic ServicesLindsey TwomblyHuman Rights Campaign
  2. 2. Evaluate This Session!Each entry is a chance to win an NTEN engraved iPad! or Online at www.nten.org/ntc/eval
  3. 3. Sample Mobile Optimized EmailReceive a mobile-optimized email from HRC:www.hrc.org/ntc Easy Reading on the Go Slide 2
  4. 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. 5. The Rise of the Smartphone Easy Reading on the Go Slide 4
  6. 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. 7. New Phone Purchases Easy Reading on the Go Slide 6
  8. 8. U.S. Smartphone Market Share by OSINSERT Chart of the most popular smartphones Easy Reading on the Go Slide 7
  9. 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. 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. 11. How Mobile PhonesAffect Email Marketing Easy Reading on the Go Slide 10
  12. 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. 13. Emails Opened on Mobile Phones 17% of Opens 24% of Opens within 24 hours Easy Reading on the Go Slide 12
  14. 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. 15. HRC Example Easy Reading on the Go Slide 14
  16. 16. HRC Example Easy Reading on the Go Slide 15
  17. 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. 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. 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. 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. 21. HRC Optimized Example Easy Reading on the Go Slide 20
  22. 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. 23. Questions?Easy Reading on the Go Slide 22
  24. 24. Tracking Mobile Usage Easy Reading on the Go Slide 23
  25. 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. 26. Tracking Mobile Clicks & Engagements• Use a website analytics tool like Google Analytics Easy Reading on the Go Slide 25
  27. 27. Questions?Easy Reading on the Go Slide 26
  28. 28. Mobile Optimize Email! Easy Reading on the Go Slide 27
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. Mobile Email Example Easy Reading on the Go Slide 40
  42. 42. BA Example Easy Reading on the Go Slide 41
  43. 43. BA Mobile Example Easy Reading on the Go Slide 42
  44. 44. BA Example Easy Reading on the Go Slide 43
  45. 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. 46. BA Example Easy Reading on the Go Slide 45
  47. 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. 48. BA Example Easy Reading on the Go Slide 47
  49. 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. 50. BA Example Easy Reading on the Go Slide 49
  51. 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. 52. BA Example Easy Reading on the Go Slide 51
  53. 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. 54. Questions?Easy Reading on the Go Slide 53
  55. 55. Download this Presentationwww.mrss.com/MobileEmail Easy Reading on the Go Slide 54
  56. 56. Evaluate This Session!Each entry is a chance to win an NTEN engraved iPad! or Online at www.nten.org/ntc/eval
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×