Justine Jordan - Designed for Success: Optimizing the Email Experience

Search Love San Diego 2014

Transcript

1. Designed for Success: Optimizing the Email Experience
2. JUSTINE JORDAN @meladorri @litmusapp
3. DISCLAIMERS #SearchLove @meladorri
4. #SearchLove @meladorri ‘Best practices’ are like training wheels. Test. -@mparkerbyrd
5. #SearchLove @meladorri @mparkerbyrd @lozzytweets @RodriguezCommaJ @KevinGotBounce
6. #SearchLove @meladorri
7. #SearchLove @meladorri
8. #SearchLove @meladorri
9. #SearchLove @meladorri ………
10. #SearchLove @meladorri email?
11. EMAIL IS NOT JPG PPC SEO CPC ONE-PAGE WEBSITE #SearchLove @meladorri
12. EMAIL IS NOT #SearchLove @meladorri
13. #SearchLove @meladorri
14. EMAIL IS <make it rain> <emotional/happy> #SearchLove @meladorri YES,
15. EMAIL IS #SearchLove @meladorri BUT ALSO,
16. TRUST BANK
17. CREDIT DEBIT @BRENDAN
18. DIRECT QUANTITATIVE REAL-TIME #SearchLove @meladorri
19. EMAIL IS A 1-to-1 MEDIUM #SearchLove @meladorri
20. EMAIL IS A unique MEDIUM #SearchLove @meladorri
21. Email ! <table> <td> <td> px style=“font-face” bgcolor padding ! Web ! <div> <h1> <p> em <style> background-color margin #SearchLove @meladorri
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. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE SUBSCRIBER EXPERIENCE #SearchLove @meladorri
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. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
26. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
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. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
29. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
30. ✔ ✔ ✔ ✘ ✘ FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
31. Pre-header text A/B Tests: 30%+ CTR Boost #SearchLove @meladorri FROM NAME SUBJECT 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. #SearchLove @meladorri FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE 75% of emails are displayed with preview text
33. ~25 characters 25% of the inbox ! ! ~35 characters 25% of the inbox ! ! ~85 characters 50% of the inbox FROM NAME SUBJECT LINE PREHEADER FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
34. Future proof emails for the Apple Watch FROM NAME SUBJECT LINE PREHEADER
35. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
36. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri Guide to styled ALT text: http://bit.ly/styledALT Guide to image blocking: http://bit.ly/image-block <img alt="Litmus" width="200" height="50" style=“font-family: Arial; color: #ffffff; font- size:20px" border="0"> #SearchLove @meladorri
37. FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
38. “Does your iPhone fold…?” #SearchLove @meladorri FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
39. “Scrolling is easier than clicking.” FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
40. ‣ Minimize friction ‣ Be clear and concise ‣ Test buttons vs. text ‣ Use active language ‣ Consider size, placement, 
 color, and context FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE #SearchLove @meladorri
41. #SearchLove @meladorri FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE h"p://bit.ly/bulletproof-­‐bu"ons   <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>
42. #SearchLove @meladorri FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
43. #SearchLove @meladorri FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
44. #SearchLove @meladorri FROM NAME SUBJECT LINE PREHEADER OPEN TAP/CLICK PAGE/SITE … add to cart?
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. DELIVERING #SearchLove @meladorri EXPERIENCES
47. ‣ Register for a webinar ‣ Read an article ‣ Buy something WHAT ‣ Triggered vs. mass ‣ Drip or automation ‣ Behavioral-based ‣ Day and time WHEN ‣ Mobile / tablet ‣ Web browser / webmail ‣ Desktop / at work WHERE ‣ Brand awareness ‣ Content marketing ‣ Influence behavior ‣ Drive purchases WHY ‣ Opens ‣ Clicks ‣ Conversions HOW ‣ Internal vs. external ‣ B2B vs. B2C ‣ Demographics ‣ Know your audience! WHO EXECUTIVE SUMMARY 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 Indicate what data fields or customer attrib PLAN YOUR NEXT GREAT EMAIL bit.ly/email-plan
48. ‘WHERE’ HAS BECOME A COMPLICATED QUESTION. #SearchLove @meladorri
49. MOBILE EMAIL +400% since 2011 @ryanmheap @degdigital
50. Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013 Delete it Unsubscribe View on computer Don't know Read anyway 0 25 50 75 100 If you get a mobile email that doesn’t look good, what do you do? 80.3% 30.2% 13.5% 3.8% 6.3% +68% +15% #SearchLove @meladorri
51. 31% of marketers don’t know their mobile email open rate source: marketingsherpa.com #SearchLove @meladorri
52. KNOW THY AUDIENCE #SearchLove @meladorri
53. Copy, paste, send!
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. -webkit-text-size-adjust: none; #SearchLove @meladorri
56. image: webdesignerdepot.com ‣Body copy 16px+ ‣Headlines: 22px+ ‣Buttons: 44px by 44px ‣ White space: 10px+ ‣ Tappable touch targets
57. I LIKE… BIG BUTTONS #SearchLove @meladorri
58. #SearchLove @meladorri
59. ‣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 RESPONSIVE EMAIL!!1! https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic #SearchLove @meladorri
61. #SearchLove @meladorri
62. Email is an application and occasionally a mobile browser #SearchLove @meladorri
63. #SearchLove @meladorri
64. #SearchLove @meladorri
66. Version A: Green bu on Version B: Blue bu on CTA COLOR TEST
67. Version A: Green bu on Version B: Blue bu on CTA COLOR TEST no change
68. Version A: Start testing Version B: Read our overview CTA TEXT TEST
69. Version A: Start testing Version B: Read our overview CTA TEXT TEST 2x clicks
70. +30% clicks CATEGORY TEST
71. Thanks, Email! :) Pageviews Twitter mentions
72. templates.mailchimp.com
73. litmus.com/community
74. reallygoodemails.com/
75. campaignmonitor.com/resources
76. responsiveemailresources.com
77. https://github.com/rodriguezcommaj/salted
78. litmus.com/scope
79. justine@litmus.com @meladorri THANKS! litmus.com/lp/searchlove