Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond Email Open Rates: How to Unlock the Potential in Your Audience

40,271 views

Published on

Your standard metrics
The missing metrics
Don’t spend 90% of development time to satisfy 10% of users. Know your audience. Choose your battles. emailclientmarketshare.com
Mobile Email +500% since 2011
Looking back to 2011…
Mobile has seen crazy growth
Webmail Average Retailer 10% 30% 60% What does your data say?
Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Desktop-Heavy Apple Mail Lotus Notes Thunderbird
Rendering in Outlook
Animated GIFs and Outlook 2007+ Outlook 2007+ shows the 1st frame Other programs
Be sure the first frame 
 communicates your message (and isn’t blank)
We can easily target Microsoft Outlook… Outlook 2000-2003 Outlook 2007-2013 Outlook conditional statements lt = less than a specific version gt = greater than a specific version lte = less than or equal to a specific version gte = greater than or equal to a specific version
Outlook conditional statements
Apple Mail + Outlook for Mac Apple Mail and Outlook 2011 / 2016 use WebKit as a rendering engine. WebKit has amazing CSS support and enables progressive enhancement in email.
WebKit Targeting Media Query @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }
WebKit supports HTML5 video in email (except for iOS 8)
Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Webmail Gmail Yahoo AOL Outlook.com Office 365 Chrome, Firefox, Safari, Internet Explorer
Gmail Rendering
Gmail strips out all classes and id’s in CSS. This is the reason we need to inline all CSS for email.
Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Mobile-Heavy iPhone Android Tablets Gmail mobile app Inbox by Gmail
iOS Rendering
Email apps for the iPhone and iPad use WebKit as a rendering engine. WebKit has amazing CSS support and enables progressive enhancement in email.
Mobile First Fluid Responsive 3 strategies for approaching mobile: 1 2 3
You can’t say “responsive email works on an iPhone.” When clients say “it looks like crap on my Android.” You should ask “what email app are you using
Device ≠ App support

Published in: Marketing
  • Visit this site: tinyurl.com/sexinarea and find sex in your area for one night)) You can find me on this site too)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can now be your own boss and get yourself a very generous daily income. START FREE...★★★ http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Earn $500 for taking a 1 hour paid survey! read more... ◆◆◆ https://tinyurl.com/make2793amonth
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I'll tell you right now (and I've got proof), that anyone who tells you "size doesn't matter to women" is flat out lying to your face and trying to make you feel better... Heck, just recently I asked a focus group of women via an anonymous online survey if size matters, and again and again they said "Oh my god, I HATE IT when it's SMALL." For a long time I didn't know what to tell the guys who'd write in to me and ask how to get "bigger." I'd say something lame like "Women actually like guys who are smaller... you just have to get good with your hands." Then I found "THE BIBLE of Penis Enlargement" by this guy named John Collins ●●● https://tinyurl.com/ydaetwbk
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Beyond Email Open Rates: How to Unlock the Potential in Your Audience

  1. Justine Jordan & Kevin Mandeville Beyond Email Open Rates How to Unlock the Potential of Your Audience
  2. @thuelmadsen #KISSwebinar Join the conversation
  3. Who are we? Justine Jordan Marketing Director, Litmus @meladorri
  4. Who are we? Kevin Mandeville Content Designer, Litmus @KevinMandeville
  5. @litmusapp #KISSwebinar Tweet along with us!
  6. WATCH WEBINAR RECORDING NOW
  7. Your standard metrics
  8. // @meladorri #KISSwebinar The missing metrics
  9. campaignmonitor.com/css
  10. Don’t spend 90% of development time to satisfy 10% of users. Know your audience. Choose your ba les. emailclientmarketshare.com #KISSwebinar
  11. 1 Desktop, Webmail, or Mobile? 2 Email programs + rendering engines 3 Geotargeting We’re gonna talk about… 4 Progressive enhancement 5 Responsive and mobile-friendly email #KISSwebinar Lots of other stuff along the way!6
  12. Mobile Email +500% since 2011
  13. Looking back to 2011… #KISSwebinar Source: Litmus Email Analytics 15 30 45 60 Jan-11 Apr-11 Jul-11 O ct-11 Jan-12 Apr-12 Jul-12 O ct-12 Jan-13 Apr-13 Jul-13 O ct-13 Jan-14 Apr-14 Jul-14 O ct-14 Mobile Desktop Webmail
  14. Mobile has seen crazy growth #KISSwebinar Source: Litmus Email Analytics 15 30 45 60 Jan-11 Apr-11 Jul-11 O ct-11 Jan-12 Apr-12 Jul-12 O ct-12 Jan-13 Apr-13 Jul-13 O ct-13 Jan-14 Apr-14 Jul-14 O ct-14 10% 48% 33%
  15. Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? #KISSwebinar
  16. Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Desktop-Heavy Outlook 2000, 2003 Outlook 2007, 2010, 2013 Outlook 2011, 2016 Apple Mail Lotus Notes Thunderbird
  17. Word Outlook 2007 Outlook 2013Outlook 2010 Outlook for Mac 2011 and 2015 Early Outlook Versions 2000 and 2003 Rendering in Outlook #KISSwebinar
  18. Email <table> <td> <td> px style=“font-face” bgcolor padding Web <div> <h1> <p> em <style> background-color margin #KISSwebinar
  19. Use this #ffffff bgcolor individual properties width=“100” <b> px align=“le ” Not this #fff or rgb background-color shorthand width:100px <strong> em text-align:le #KISSwebinar
  20. <h1> <p> <img> <button> ✘ #KISSwebinar
  21. <td> <td> <td> <td> ✔ #KISSwebinar
  22. #KISSwebinar Animated GIFs and Outlook 2007+ Outlook 2007+ shows the 1st frame Other programs show the animation
  23. #KISSwebinar Animated GIFs and Outlook 2007+ Outlook 2007+ shows the 1st frame Other programs show the animation
  24. #KISSwebinar Animated GIFs and Outlook 2007+ Be sure the first frame 
 communicates your message (and isn’t blank)
  25. We can easily target Microso Outlook… #KISSwebinar Outlook 2000-2003 Outlook 2007-2013 <!--[if (IE)]> /* Insert HTML or CSS here */ <![endif]—> <!—[if mso]> /* Insert HTML or CSS here */ <![endif]—>
  26. Outlook conditional statements #KISSwebinar lt = less than a specific version gt = greater than a specific version lte = less than or equal to a specific version gte = greater than or equal to a specific version
  27. Outlook version numbers #KISSwebinar 9 = Outlook 2000 10 = Outlook 2002 11 = Outlook 2003 12 = Outlook 2007 14 = Outlook 2010 15 = Outlook 2013
  28. Outlook conditional statements #KISSwebinar <!--[if mso 12]> = targets only Outlook 2007 <!--[if gte mso 12]> = targets Outlook 2007 and above <!--[if gt mso 12]> = targets above Outlook 2007 (Outlook 2010/2013) <!--[if lte mso 12]> = targets Outlook 2007 and below <!--[if lt mso 12]> = targets below Outlook 2007 (Outlook 2000/2002/2003)
  29. Did you know? #KISSwebinar Outlook also has 200+ mso/-ms unique CSS properties. https://litmus.com/community/learning/8-outlook-overview
  30. Outlook.com Targeting #KISSwebinar Outlook.com also adds .ecx before every CSS class .ExternalClass .ecxmyclass { /* CSS */ }
  31. Apple Mail + Outlook for Mac #KISSwebinar Apple Mail and Outlook 2011 / 2016 use WebKit as a rendering engine. WebKit has amazing CSS support and enables progressive enhancement in email.
  32. WebKit Targeting Media Query #KISSwebinar @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }
  33. WebKit supports HTML5 video in email (except for iOS 8)
  34. Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Webmail Gmail Yahoo AOL Outlook.com Office 365 Chrome, Firefox, Safari, Internet Explorer
  35. Gmail Rendering #KISSwebinar Gmail strips out all classes and id’s in CSS. This is the reason we need to inline all CSS for email. https://putsmail.com/inliner http://templates.mailchimp.com/resources/inline-css/ http://inliner.cm/
  36. best case scenario: some lost forma ing Gmail strips CSS from the <head> of emails #KISSwebinar
  37. worst case scenario: whoa Gmail strips CSS from the <head> of emails #KISSwebinar
  38. Inline CSS for Gmail #KISSwebinar <style type="text/css"> .body {font-size: 22px; font-family: Arial, sans-serif; color: #222222;} </style> <body style="font-size: 22px; font-family: Arial, sans-serif; color: #222222;"> Instead of: We must use: https://litmus.com/blog/understanding-gmail-and-css-part-1
  39. Blue borders with <a> and <img> #KISSwebinar <a href="http://litmus.com"><img src="http://litmus.com/ image.jpg" width="450" height="216" border="0"></a>
  40. Gaps under images #KISSwebinar <img src="http://litmus.com/image.jpg" width="450" height="216" border="0" style="display: block;">
  41. Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Mobile-Heavy iPhone Android Tablets Gmail mobile app Inbox by Gmail
  42. iOS Rendering #KISSwebinar Email apps for the iPhone and iPad use WebKit as a rendering engine. WebKit has amazing CSS support and enables progressive enhancement in email.
  43. Mobile First Fluid Responsive 3 strategies for approaching mobile: 1 2 3
  44. You can’t say “responsive email works on an iPhone.” When clients say “it looks like crap on my Android.” You should ask “what email app are you using?” #KISSwebinar Device ≠ App support
  45. Yahoo! (iOS + Android) yes Mailbox (iOS) no Gmail (iOS + Android) no Inbox by Gmail (iOS + Android) no BlackBerry Z10 yes Windows Phone 7 no Windows Phone 7.5 yes Windows Phone 8 sometimes #KISSwebinar Media query support in mobile email apps iPhone / iPad: Email app yes Android 2.1: Email app no Android 2.2: Email app yes Android 2.3: Email app yes Android 4.0, 4.1, 4.2: Email app yes Android 4.3, 4.4: Email app sometimes Kindle Fire yes http://stylecampaign.com/blog/2012/10/responsive-email-support/
  46. LOG IN WITH GOOGLE Start Your Free KISSmetrics Trial
  47. strategy #1 mobile first aka agnostic, aware, scalable
  48. Strategy #1: Mobile first Considers the mobile user a priority • One layout for all screen sizes • Single column design • 320-500px • Large text & bu ons • Generous white space • Clear calls to action • Short, concise body copy
  49. Strategy #1: Mobile first
  50. strategy #2 fluid
  51. Strategy #2: Fluid Email width 
 changes to fit 
 within the window 
 it’s viewed in • Percentage-based widths • Adapts to fit the screen • Text wraps automatically #KISSwebinar
  52. Strategy #2: Fluid • Shorter learning curve • Best for text-heavy emails
  53. strategy #3 responsive
  54. Strategy #3: Responsive
  55. Strategy #3: Responsive • Resize content: make images fit, make text larger • Hide content on mobile • Stack columns • Move a two-column design 
 to a one-column design https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
  56. Strategy #3: Responsive • More than a “line of code” • Set of conditional statement that enables specific styles • If the screen size is x, then display y • If the screen size is x, then increase headline size to y • If screen size is x, then show image at 100% • Detects screen size, not device type Uses media queries to detect screen size and alter content accordingly #KISSwebinar
  57. Responsive design
 is not supported everywhere. Did you know? #KISSwebinar
  58. image: webdesignerdepot.com Body copy 16px+ Headlines: 22px+ Bu ons: 44px by 44px White space: 40px+ Tappable touch targets Mobile-Friendly Email
  59. #KISSwebinar Font resizing on iOS Fonts smaller than 13px will be resized
  60. #KISSwebinar Font resizing in the Gmail app
  61. Blue links on iOS https://litmus.com/blog/update-banning-blue-links-on-ios-devices #KISSwebinar
  62. #KISSwebinar Impact of responsive email on click rates https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing
  63. Impact of responsive email on click rates #KISSwebinar Responsive design results in a 15% increase in unique clicks for mobile users. https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing
  64. Open Click SRLs Control Email 5.1% 5.0% 30 Responsive Email 4.4%% 11.5% 58 Difference -13.7% 130% 93.3% Act-On Case Study
  65. image blocking
  66. #KISSwebinar Automatic image blocking
  67. 43%of users view email with images off #KISSwebinar Automatic image blocking
  68. AOL yes Gmail no Outlook.com sometimes Yahoo! yes Mobile email apps sometimes Apple Mail no Lotus Notes yes Outlook 2000-2003 yes Outlook 2007/2010/2013 yes Outlook for Mac yes Thunderbird no Does image blocking happen in… https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking
  69. Guide to styled ALT text: h p://bit.ly/styledALT Guide to image blocking: h p://bit.ly/image-block <img alt="Litmus" width="200" height="50" style=“font-family: Arial; color: #ffffff; font-size:20px" border="0"> #KISSwebinar Styled ALT text
  70. #KISSwebinar Styled ALT text
  71. #KISSwebinar Styled ALT text
  72. #KISSwebinar Background color pixel art
  73. #SearchLove @meladorri #KISSwebinar Images as bu ons = bad https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design buttons.cm
  74. geotargeting
  75. Where are opens happening?
  76. Where are opens happening?
  77. Where are opens happening?
  78. Where are opens happening?
  79. Where are opens happening?
  80. Geotargeting
  81. Geotargeting 62% open rate 58 tickets sold in ~48 hours
  82. progressive enhancement
  83. WebKit Targeting Media Query #KISSwebinar @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ } h ps://litmus.com/blog/a-bulletproof-guide-to-using-html5-and-css3-in-email
  84. SVG Animation
  85. Animated Snow
  86. Dynamic Gravatar Animation h ps://litmus.com/blog/behind-the-email-launching-community
  87. Interactive Carousel #KISSwebinar
  88. Interactive Tour #KISSwebinar
  89. HTML5 Video Background #KISSwebinar h ps://litmus.com/blog/how-to-code-html5-video-background-in-email
  90. read rate
  91. Dynamic Twi er Feed #KISSwebinar h ps://litmus.com/blog/how-to-code-a-live-dynamic-twi er-feed-in-html-email
  92. How long did readers spend on your email?
  93.  Watch
  94. Email on the Apple Watch Apple Watch shows the plain text version. #KISSwebinar
  95. Email on the Apple Watch #KISSwebinar
  96. A personal device that favors personal messages. Links are disabled. No open or click tracking. #KISSwebinar
  97. // @meladorri #KISSwebinar The missing metrics
  98. 14-DAY TRIAL KISSDATA litmus.com/gi card
  99. 2015 KISSmetrics Guide KISSmetrics Demo h p://kiss.ly/growth h p://kiss.ly/demo
  100. Questions? Justine Jordan Marketing Director Litmus @meladorri Kevin Mandeville Content Designer Litmus @KevinMandeville

×