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. 5.
  2. 6.
  3. 8.
  4. 9.
  5. 12.

    Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH From name ~25 characters Make it memorable Make it recognizable
  6. 13.

    Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Subject line ~35 characters Pertains to email content Keep it interesting
  7. 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
  8. 15.

    Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Keep it simple Mobile-friendly design Short, succinct copy On-brand tone
  9. 16.

    Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Get the engagement Stop saying ‘Click’ Use enticing CTAs Use bulletproof buttons
  10. 17.

    Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

    THROUGH Landing pages Make sure they work Mobile-friendly Continue the experience
  11. 18.
  12. 19.
  13. 21.
  14. 22.
  15. 23.
  16. 24.
  17. 25.
  18. 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
  19. 29.

    Fluid Email width changes to fit inside the window •

    Percentage-based widths • Adapts to fit the screen • Text wraps automatically
  20. 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
  21. 31.
  22. 33.

    Traditional Responsive • Relies on CSS media queries • Makes

    images fluid on mobile • Makes tables fluid on mobile • Tons of control over content
  23. 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]-­‐-­‐>
  24. 37.
  25. 42.
  26. 44.

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

    rate Unsubscribes Conversions Buzz Enquiries Direct Feedback
  27. 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
  28. 49.
  29. 50.
  30. 51.
  31. 52.
  32. 53.
  33. 54.