Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wrapping Your Head Around Modern Email

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.

RodriguezCommaJ

September 23, 2015
Tweet

More Decks by RodriguezCommaJ

Other Decks in Design

Transcript

  1. Inbox Email Page FROM NAME SUBJECT PHT OPEN TAP FOLLOW

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

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

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

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

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

    THROUGH Landing pages Make sure they work Mobile-friendly Continue the experience
  7. 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
  8. Fluid Email width changes to fit inside the window •

    Percentage-based widths • Adapts to fit the screen • Text wraps automatically
  9. 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
  10. Traditional Responsive • Relies on CSS media queries • Makes

    images fluid on mobile • Makes tables fluid on mobile • Tons of control over content
  11. 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]-­‐-­‐>
  12. The regulars Some cooler stuff Open rate Click rate Click-to-open

    rate Unsubscribes Conversions Buzz Enquiries Direct Feedback
  13. 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