Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

2.598 visualizaciones

Publicado el

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.

Publicado en: Marketing
  • Sé el primero en comentar

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

×