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.

Transcript

1. Wrapping Your Head Around
   Modern Email
   #DSDET15
   

   View Slide

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

   View Slide

3. Look, it’s Freddie!
   

   View Slide

4. What is modern email?
   

   View Slide

5. View Slide

6. View Slide

7. Email is dead.
   

   View Slide

8. View Slide

9. View Slide

10. Modern email considers
    every aspect of the subscriber
    experience.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

17. Inbox Email Page
    FROM NAME SUBJECT PHT OPEN TAP FOLLOW THROUGH
    Landing pages
    Make sure they work
    Mobile-friendly
    Continue the experience
    

    View Slide

18. View Slide

19. View Slide

20. Email design.
    (Yes, it exists.)
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. MOBILE EMAIL
    +512% since 2011
    

    View Slide

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

    View Slide

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
    

    View Slide

29. Fluid
    Email width changes to fit
    inside the window
    • Percentage-based widths
    • Adapts to fit the screen
    • Text wraps automatically
    

    View Slide

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
    

    View Slide

31. View Slide

32. Traditional Responsive
    

    View Slide

33. Traditional Responsive
    • Relies on CSS media queries
    • Makes images fluid on mobile
    • Makes tables fluid on mobile
    • Tons of control over content
    

    View Slide

34. Unfortunately, it’s
    not supported
    everywhere.
    *cough, cough, Gmail*
    

    View Slide

35. Spongy (Hybrid) Approach
    

    View Slide

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

    View Slide

37. Tweet that.
    Meet your subscribers where they are—
    which usually means mobile these days.
    #emaildesign
    

    View Slide

38. What else does modern email
    have going for it?
    

    View Slide

39. Email is a unique medium.
    

    View Slide

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

    View Slide

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

    View Slide

42. View Slide

43. TRACK ALL
    THE THINGS!
    

    View Slide

44. The regulars Some cooler stuff
    Open rate
    Click rate
    Click-to-open rate
    Unsubscribes
    Conversions
    Buzz
    Enquiries
    Direct Feedback
    

    View Slide

45. When in doubt, check Twitter
    Search for:
    Your Brand + ‘Email’
    

    View Slide

46. TEST ALL
    THE THINGS!
    

    View Slide

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
    

    View Slide

48. Combining iteration, testing,
    context, and design can elevate
    the subscriber experience.
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. @GoRebelMail
    

    View Slide

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

    View Slide

57. People that:
    Care about email design.
    

    View Slide

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

    View Slide

59. People that:
    Care about the
    subscriber experience.
    

    View Slide

60. That’s modern email.
    

    View Slide