Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Designed for Success: 
Optimizing the Email Experience
JUSTINE JORDAN 
@meladorri @litmusapp
DISCLAIMERS 
#SearchLove @meladorri
‘Best practices’ are like 
training wheels. 
#SearchLove @meladorri 
Test. 
-@mparkerbyrd
#SearchLove @meladorri 
@mparkerbyrd 
@lozzytweets 
@RodriguezCommaJ 
@KevinGotBounce
#SearchLove @meladorri
#SearchLove @meladorri
#SearchLove @meladorri
……… 
#SearchLove @meladorri
email? 
#SearchLove @meladorri
EMAIL IS NOT 
JPG 
PPC SEO CPC 
ONE-PAGE WEBSITE 
#SearchLove @meladorri
EMAIL IS NOT 
#SearchLove @meladorri
#SearchLove @meladorri
EMAIL IS 
<make it rain> 
<emotional/happy> 
#SearchLove @meladorri 
YES,
EMAIL IS 
#SearchLove @meladorri 
BUT ALSO,
TRUST BANK
CREDIT DEBIT 
@BRENDAN
DIRECT 
QUANTITATIVE 
REAL-TIME 
#SearchLove @meladorri
EMAIL IS A 
1-to-1 
MEDIUM 
#SearchLove @meladorri
EMAIL IS A 
unique 
MEDIUM 
#SearchLove @meladorri
Email 
! 
<table> 
<td> 
<td> 
px 
style=“font-face” 
bgcolor 
padding 
! 
Web 
! 
<div> 
<h1> 
<p> 
em 
<style> 
backgrou...
Use this 
! 
#ffffff 
bgcolor 
individual properties 
width=“100” 
style=“…” 
align=“left” 
! 
Not this 
! 
#fff or rgb 
b...
SUBSCRIBER EXPERIENCE 
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
#SearchLove @meladorri
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
‣ What is recognizable, trustworthy and 
relevant? 
‣ Does th...
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
#SearchLove @meladorri
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
#SearchLove @meladorri
1 Free is OK 
2 Shorter=better? 
3 Relevance! 
4 Useful + specific 
5 Test, test, test 
https://litmus.com/blog/how-to-wri...
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
#SearchLove @meladorri
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE
✔ 
✔ 
✔ 
FROM NAME SUBJECT 
✘ 
✘ 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE
FROM NAME SUBJECT 
Pre-header text A/B Tests: 
30%+ CTR Boost 
#SearchLove @meladorri 
LINE 
PREHEADER OPEN TAP/CLICK PAGE...
FROM NAME SUBJECT 
#SearchLove @meladorri 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
75% 
of emails are displayed with pre...
FROM NAME 
~25 characters 
25% of the inbox 
! 
! 
~35 characters 
25% of the inbox 
! 
! 
~85 characters 
50% of the inbo...
Future proof emails 
for the Apple Watch 
FROM NAME SUBJECT 
LINE 
PREHEADER
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
#SearchLove @meladorri
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
<img alt="Litmus" width="200" height="50" 
style=“font-family...
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
#SearchLove @meladorri
“Does your iPhone fold…?” 
FROM NAME SUBJECT 
#SearchLove @meladorri 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE
FROM NAME SUBJECT 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
“Scrolling is easier than clicking.” 
#SearchLove @meladorri
FROM NAME SUBJECT 
LINE 
‣ Minimize friction 
‣ Be clear and concise 
‣ Test buttons vs. text 
‣ Use active language 
‣ Co...
FROM NAME SUBJECT 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td bgcolor="#cccccc" style="padding: 12px 18...
FROM NAME SUBJECT 
#SearchLove @meladorri 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE
FROM NAME SUBJECT 
#SearchLove @meladorri 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE
FROM NAME SUBJECT 
#SearchLove @meladorri 
LINE 
PREHEADER OPEN TAP/CLICK PAGE/SITE 
… add to cart?
#SearchLove @meladorri 
‣ Create hierarchy with 
symbols 
‣ Avoid hard breaks 
‣ Put links on a new line 
‣ Tabs, spacing ...
DELIVERING 
EXPERIENCES 
#SearchLove @meladorri
WHO 
WHAT 
‣ Register for a webinar 
‣ Read an article 
‣ Buy something 
WHEN 
‣ Triggered vs. mass 
‣ Drip or automation ...
‘WHERE’ HAS BECOME A COMPLICATED QUESTION. 
#SearchLove @meladorri
MOBILE EMAIL 
+400% since 2011 
@ryanmheap @degdigital
If you get a mobile email that 
doesn’t look good, what do you do? 
30.2% 
+68% 
13.5% 
3.8% 
6.3% 
+15% 
Source: BlueHorn...
31% 
of marketers don’t know their 
mobile email open rate 
source: marketingsherpa.com 
#SearchLove @meladorri
KNOW THY 
AUDIENCE 
#SearchLove @meladorri
Copy, paste, send!
.appleBody a { 
color:#ffffff; text-decoration: none; 
} 
!!! 
<tr> 
<td align="center" style="padding: 10px 0 0 0; font-s...
-webkit-text-size-adjust: none; 
#SearchLove @meladorri
‣Body copy 16px+ 
‣Headlines: 22px+ 
‣Buttons: 44px by 44px 
‣ White space: 10px+ 
‣ Tappable touch targets 
image: webdes...
I LIKE… 
BIG BUTTONS 
#SearchLove @meladorri
#SearchLove @meladorri
RESPONSIVE EMAIL!!1! 
‣More than a “line of code” 
‣Set of conditional statement that enables specific styles 
‣Detects sc...
#SearchLove @meladorri
Email is an application 
and occasionally a mobile browser 
#SearchLove @meladorri
#SearchLove @meladorri
#SearchLove @meladorri
CTA COLOR TEST 
Version A: Green bu!on Version B: Blue bu!on
CTA COLOR TEST 
no 
change 
Version A: Green bu!on Version B: Blue bu!on
CTA TEXT TEST 
Version A: Start testing Version B: Read our overview
CTA TEXT TEST 
2x 
clicks 
Version A: Start testing Version B: Read our overview
CATEGORY TEST 
+30% clicks
Thanks, Email! :) 
Twitter mentions 
Pageviews
templates.mailchimp.com
litmus.com/community
reallygoodemails.com/
campaignmonitor.com/resources
responsiveemailresources.com
https://github.com/rodriguezcommaj/salted
litmus.com/scope
THANKS! 
justine@litmus.com 
@meladorri 
litmus.com/lp/searchlove
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The Email Experience'
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The Email Experience'
Nächste SlideShare
Wird geladen in …5
×

Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The Email Experience'

2.602 Aufrufe

Veröffentlicht am

Great design is more than stunning graphics—it's a key strategy to unlocking the success of email. And as one of digital marketing's highest performers, email requires its own unique set of content, marketing, and design considerations. Discover the six stages of the inbox experience and pick up actionable tips to help you create amazing emails that get opened, clicked, and stay out of the spam folder.

Veröffentlicht in: Marketing
  • Als Erste(r) kommentieren

Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The Email Experience'

  1. 1. Designed for Success: Optimizing the Email Experience
  2. 2. JUSTINE JORDAN @meladorri @litmusapp
  3. 3. DISCLAIMERS #SearchLove @meladorri
  4. 4. ‘Best practices’ are like training wheels. #SearchLove @meladorri Test. -@mparkerbyrd
  5. 5. #SearchLove @meladorri @mparkerbyrd @lozzytweets @RodriguezCommaJ @KevinGotBounce
  6. 6. #SearchLove @meladorri
  7. 7. #SearchLove @meladorri
  8. 8. #SearchLove @meladorri
  9. 9. ……… #SearchLove @meladorri
  10. 10. email? #SearchLove @meladorri
  11. 11. EMAIL IS NOT JPG PPC SEO CPC ONE-PAGE WEBSITE #SearchLove @meladorri
  12. 12. EMAIL IS NOT #SearchLove @meladorri
  13. 13. #SearchLove @meladorri
  14. 14. EMAIL IS <make it rain> <emotional/happy> #SearchLove @meladorri YES,
  15. 15. EMAIL IS #SearchLove @meladorri BUT ALSO,
  16. 16. TRUST BANK
  17. 17. CREDIT DEBIT @BRENDAN
  18. 18. DIRECT QUANTITATIVE REAL-TIME #SearchLove @meladorri
  19. 19. EMAIL IS A 1-to-1 MEDIUM #SearchLove @meladorri
  20. 20. EMAIL IS A unique MEDIUM #SearchLove @meladorri
  21. 21. Email ! <table> <td> <td> px style=“font-face” bgcolor padding ! Web ! <div> <h1> <p> em <style> background-color margin #SearchLove @meladorri
  22. 22. Use this ! #ffffff bgcolor individual properties width=“100” style=“…” align=“left” ! Not this ! #fff or rgb background-color shorthand width:100px <style> text-align:left #SearchLove @meladorri
  23. 23. SUBSCRIBER EXPERIENCE FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
  24. 24. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE ‣ What is recognizable, trustworthy and relevant? ‣ Does the subscriber have a relationship with a person or the brand? #SearchLove @meladorri
  25. 25. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
  26. 26. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
  27. 27. 1 Free is OK 2 Shorter=better? 3 Relevance! 4 Useful + specific 5 Test, test, test https://litmus.com/blog/how-to-write-the-perfect-subject-line-infographic #SearchLove @meladorri
  28. 28. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
  29. 29. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
  30. 30. ✔ ✔ ✔ FROM NAME SUBJECT ✘ ✘ LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
  31. 31. FROM NAME SUBJECT Pre-header text A/B Tests: 30%+ CTR Boost #SearchLove @meladorri LINE PREHEADER OPEN TAP/CLICK PAGE/SITE <div style="line-height:1px;font-size: 1px;color:#FFFFFF;display:none;"> ! Insert your magically appearing/disappearing preheader text here! ! </div>
  32. 32. FROM NAME SUBJECT #SearchLove @meladorri LINE PREHEADER OPEN TAP/CLICK PAGE/SITE 75% of emails are displayed with preview text
  33. 33. FROM NAME ~25 characters 25% of the inbox ! ! ~35 characters 25% of the inbox ! ! ~85 characters 50% of the inbox SUBJECT LINE PREHEADER FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
  34. 34. Future proof emails for the Apple Watch FROM NAME SUBJECT LINE PREHEADER
  35. 35. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
  36. 36. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE <img alt="Litmus" width="200" height="50" style=“font-family: Arial; color: #ffffff; font-size: 20px" border="0"> #SearchLove @meladorri Guide to styled ALT text: http://bit.ly/styledALT Guide to image blocking: http://bit.ly/image-block
  37. 37. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
  38. 38. “Does your iPhone fold…?” FROM NAME SUBJECT #SearchLove @meladorri LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
  39. 39. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE “Scrolling is easier than clicking.” #SearchLove @meladorri
  40. 40. FROM NAME SUBJECT LINE ‣ Minimize friction ‣ Be clear and concise ‣ Test buttons vs. text ‣ Use active language ‣ Consider size, placement, color, and context PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
  41. 41. FROM NAME SUBJECT <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#cccccc" style="padding: 12px 18px 12px 18px; -webkit-border-radius: 3px; border-radius:3px" align="center"><a href="https://litmus.com/” style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none;">Litmus</a> </td> </tr> </table> #SearchLove @meladorri LINE PREHEADER OPEN TAP/CLICK PAGE/SITE h"p://bit.ly/bulletproof-­‐bu"ons
  42. 42. FROM NAME SUBJECT #SearchLove @meladorri LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
  43. 43. FROM NAME SUBJECT #SearchLove @meladorri LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
  44. 44. FROM NAME SUBJECT #SearchLove @meladorri LINE PREHEADER OPEN TAP/CLICK PAGE/SITE … add to cart?
  45. 45. #SearchLove @meladorri ‣ Create hierarchy with symbols ‣ Avoid hard breaks ‣ Put links on a new line ‣ Tabs, spacing and CAPs to organize ‣ Convey imagery with text
  46. 46. DELIVERING EXPERIENCES #SearchLove @meladorri
  47. 47. WHO WHAT ‣ Register for a webinar ‣ Read an article ‣ Buy something WHEN ‣ Triggered vs. mass ‣ Drip or automation ‣ Behavioral-based ‣ Day and time WHERE ‣ Mobile / tablet ‣Web browser / webmail ‣ Desktop / at work WHY ‣ Brand awareness ‣ Content marketing ‣ Influence behavior ‣ Drive purchases HOW ‣ Opens ‣ Clicks ‣ Conversions ‣ Internal vs. external ‣ B2B vs. B2C ‣ Demographics ‣ Know your audience! PLAN EXECUTIVE SUMMARY Indicate what data fields or customer attributes will be used for segmentation How would you explain this campaign in an elevator ride to your CEO? FIVE W’S Every email should have a purpose and a clearly stated goal. • WHO are you sending to? • WHAT do you want them to do? • WHEN is it appropriate to send the message? • WHERE will the recipient read it? • WHY are you sending this message? • HOW are you going to measure success? MESSAGING STRATEGY What content should be included in the email? Be as detailed as possible, including: • From name • From address • Subject line • Preheader text • Headline(s) • Subhead(s) • Copy points • Call to action • Graphics/images SEGMENTATION STRATEGY YOUR NEXT GREAT EMAIL bit.ly/email-plan
  48. 48. ‘WHERE’ HAS BECOME A COMPLICATED QUESTION. #SearchLove @meladorri
  49. 49. MOBILE EMAIL +400% since 2011 @ryanmheap @degdigital
  50. 50. If you get a mobile email that doesn’t look good, what do you do? 30.2% +68% 13.5% 3.8% 6.3% +15% Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013 Delete it Unsubscribe View on computer Don't know Read anyway 80.3% 0 25 50 75 100 #SearchLove @meladorri
  51. 51. 31% of marketers don’t know their mobile email open rate source: marketingsherpa.com #SearchLove @meladorri
  52. 52. KNOW THY AUDIENCE #SearchLove @meladorri
  53. 53. Copy, paste, send!
  54. 54. .appleBody a { color:#ffffff; text-decoration: none; } !!! <tr> <td align="center" style="padding: 10px 0 0 0; font-size: 13px; line-height: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; "> Get away <span class="appleBody">Thurs-Sun</span> ! </td> </tr> ! Blue links in iOS: http://bit.ly/blue-links #SearchLove @meladorri
  55. 55. -webkit-text-size-adjust: none; #SearchLove @meladorri
  56. 56. ‣Body copy 16px+ ‣Headlines: 22px+ ‣Buttons: 44px by 44px ‣ White space: 10px+ ‣ Tappable touch targets image: webdesignerdepot.com
  57. 57. I LIKE… BIG BUTTONS #SearchLove @meladorri
  58. 58. #SearchLove @meladorri
  59. 59. RESPONSIVE EMAIL!!1! ‣More than a “line of code” ‣Set of conditional statement that enables specific styles ‣Detects screen size, not device type ‣Not supported in every mobile email app https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic #SearchLove @meladorri
  60. 60. #SearchLove @meladorri
  61. 61. Email is an application and occasionally a mobile browser #SearchLove @meladorri
  62. 62. #SearchLove @meladorri
  63. 63. #SearchLove @meladorri
  64. 64. CTA COLOR TEST Version A: Green bu!on Version B: Blue bu!on
  65. 65. CTA COLOR TEST no change Version A: Green bu!on Version B: Blue bu!on
  66. 66. CTA TEXT TEST Version A: Start testing Version B: Read our overview
  67. 67. CTA TEXT TEST 2x clicks Version A: Start testing Version B: Read our overview
  68. 68. CATEGORY TEST +30% clicks
  69. 69. Thanks, Email! :) Twitter mentions Pageviews
  70. 70. templates.mailchimp.com
  71. 71. litmus.com/community
  72. 72. reallygoodemails.com/
  73. 73. campaignmonitor.com/resources
  74. 74. responsiveemailresources.com
  75. 75. https://github.com/rodriguezcommaj/salted
  76. 76. litmus.com/scope
  77. 77. THANKS! justine@litmus.com @meladorri litmus.com/lp/searchlove

×