Wrapping Your Head Around Modern Email

5e6805ca1cd7538ad32437cdb7fc1221?s=47 RodriguezCommaJ
September 23, 2015

Wrapping Your Head Around Modern Email

My talk for Digital Summit Detroit 2015, wherein I lay out what modern email is and how we can all start caring enough to improve the subscriber experience for everyone.

5e6805ca1cd7538ad32437cdb7fc1221?s=128

RodriguezCommaJ

September 23, 2015
Tweet

Transcript

  1. Wrapping Your Head Around Modern Email #DSDET15

  2. Jason Rodriguez Community/Education Stuff at Litmus, Inc. rodriguezcommaj.com @rodriguezcommaj

  3. Look, it’s Freddie!

  4. What is modern email?

  5. None
  6. None
  7. Email is dead.

  8. None
  9. None
  10. Modern email considers every aspect of the subscriber experience.

  11. FROM NAME SUBJECT PHT OPEN TAP FOLLOW THROUGH Inbox Email

    Page The Subscriber Experience
  12. Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH From name ~25 characters Make it memorable Make it recognizable
  13. Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Subject line ~35 characters Pertains to email content Keep it interesting
  14. Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Preheader text ~85 characters Plays off subject line Fun, interesting Elicits the open
  15. Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Keep it simple Mobile-friendly design Short, succinct copy On-brand tone
  16. Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Get the engagement Stop saying ‘Click’ Use enticing CTAs Use bulletproof buttons
  17. Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Landing pages Make sure they work Mobile-friendly Continue the experience
  18. None
  19. None
  20. Email design. (Yes, it exists.)

  21. None
  22. None
  23. None
  24. None
  25. None
  26. MOBILE EMAIL +512% since 2011

  27. Mobile Strategies Mobile First, Fluid & Responsive* *In two varieties

  28. Mobile First • Considers the mobile user a priority •

    One layout for all screen sizes • Single column design; 320-500px • Large text & buttons • Generous white space • Short, concise body copy
  29. Fluid Email width changes to fit inside the window •

    Percentage-based widths • Adapts to fit the screen • Text wraps automatically
  30. 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
  31. None
  32. Traditional Responsive

  33. Traditional Responsive • Relies on CSS media queries • Makes

    images fluid on mobile • Makes tables fluid on mobile • Tons of control over content
  34. Unfortunately, it’s not supported everywhere. *cough, cough, Gmail*

  35. Spongy (Hybrid) Approach

  36. Spongy Approach • Fluid-by-default tables • Constrained tables using CSS

    • Conditional tables for Outlook <!-­‐-­‐[if  gte mso 9]> <table  id="outlookholder"  border="0"  cellspacing="0"  cellpadding="0"  align="center"> <tr> <td> <![endif]-­‐-­‐> <!-­‐-­‐[if  (IE)]> <table  border="0"  cellspacing="0"  cellpadding="0"  width="650"  align="center"> <tr> <td> <![endif]-­‐-­‐>
  37. Tweet that. Meet your subscribers where they are— which usually

    means mobile these days. #emaildesign
  38. What else does modern email have going for it?

  39. Email is a unique medium.

  40. The beauty of email is in iteration and measurability.

  41. 3 months of web design 3 months of email design

  42. None
  43. TRACK ALL THE THINGS!

  44. The regulars Some cooler stuff Open rate Click rate Click-to-open

    rate Unsubscribes Conversions Buzz Enquiries Direct Feedback
  45. When in doubt, check Twitter Search for: Your Brand +

    ‘Email’
  46. TEST ALL THE THINGS!

  47. Here are just a few ideas… Email length CTA language

    Subject lines Videos in email Value propositions Humor Copy changes CTA numbers Preheader text Personalization Design elements Responsive design
  48. Combining iteration, testing, context, and design can elevate the subscriber

    experience.
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. @GoRebelMail

  56. All thanks to people that give a shit about email.

  57. People that: Care about email design.

  58. People that: Care about tracking and testing emails to make

    them better.
  59. People that: Care about the subscriber experience.

  60. That’s modern email.