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
2. Jason Rodriguez Community/Education Stuff at Litmus, Inc. rodriguezcommaj.com @rodriguezcommaj
3. Look, it’s Freddie!
4. What is modern email?
7. Email is dead.
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
20. Email design. (Yes, it exists.)
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
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
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.
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.