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

Demystifying Responsive Email

5c415d285e8ae6a5f8af9cbef87c888c?s=47 Peter Anglea
October 03, 2015

Demystifying Responsive Email

What are the major hurdles associated with responsive email?

TRANSCRIPT: http://www.peteranglea.com/presentations/demystifying-responsive-email/

Presented at HighEdWeb annual conference, October 5th, 2015, Milwaukee, WI


Peter Anglea

October 03, 2015


  1. Demystifying Responsive Email #DPA2 @peteranglea

  2. I love the Web

  3. I love the Web Every reason why is a reason

    why I HATE email
  4. Why I hate email • Email is hard! • Email

    is tedious! • Email is ugly! • Email is extremely valuable!
  5. In a marketing world saturated with social media, the inbox

    is still one of the most valuable channels at your disposal.
  6. Do we need responsive email? • Opening email on mobile

    devices is more common than desktop or webmail clients. • Readers are less likely to click through on mobile. • If a mobile reader opens an email again from a different device, more clicks happen. https://www.campaignmonitor.com/resources/guides/email-marketing-trends/
  7. If we can get this right, the payoff will be

  8. Hurdle #l Email clients

  9. Two key problems 1. The sheer number of email clients

    2. The absolute lack of adherence to standards So, basically like the web in the 90s…
  10. Standards • Public offenders #1 and #2… • Outlook for

    desktop • Gmail • Mobile email clients… • Actually good!
  11. Hurdle #2 The code

  12. The code • Take everything you know about semantic HTML5

    markup and throw it away! • We’re basically limited to HTML4/CSS2 • Reacquaint (or introduce) yourself to tags and attributes long forgotten
  13. <table> <center> <span> <i> <b> cellpadding cellspacing border align valign

    bgcolor width style HTML4 hspace vspace
  14. <table cellpadding=“0” cellspacing=“0” border=“0” width=“100%” bgcolor=“#cccccc”> <tr> <td valign=“top”> <center>

    <table cellpadding=“20” cellspacing=“0” border=“0” width=“600” bgcolor=“#ffffff”> <tr> <td valign=“top”> <p style=“margin: 0; padding: 0; font- family: Arial, sans-serif; font-size: 16px; line-height: 24px;”>Hello world</p> </td> </tr> </table>
  15. What about responsive? • Take everything you know about mobile-first

    best practices, separation of content and styles, DRY coding, proper CSS specificity, and almost everything that you’ve probably been taught about responsive web design… and throw it away!
  16. What about responsive? • @media (max-width: …) • !important

  17. <table class=“left” align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing=“0" width=“250”>…</ table> @media

    (max-width: 600px) { table.left { width: 100% !important; } table.right { width: 100% !important; } } <table width=“100%” style=“max-width: 600px;” cellpadding=“0” cellspacing=“0” border=“0”><tr><td> </td></tr></table> <table class=“right” align="right" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing=“0" width=“250”>…</ table>
  18. More code samples • Smashing Book 5 • Chapter 8,

    “The Dark Side Of Responsive HTML Email” by Fabio Carneiro.
  19. Hurdle #3 Service providers

  20. The key problems • Little or no support for responsive

    templates • WYSIWYGs • They generate terrible code • Not user-friendly • Wrong tool for the job most of the time
  21. Stupid things ESPs do <font face=“Arial” size=“2”>…</font> Outlook Apple Mail

  22. Stupid things ESPs do <table bgcolor=“”>…</table> Outlook Web App

  23. Stupid things ESPs do <table id=“preheader” width=“600”> <tr> <td>Having trouble

    reading this email? Too bad.</td> <tr> </table> WHY?!
  24. Stupid things ESPs do Me: Does your CRM have an

    email template system? Vendor: Absolutely!
  25. Problems, problems, problems… • Multitude of clients across a wide

    spectrum of standards support • High level of technical skill needed • Can’t rely on many ESP’s frameworks What’s the solution?
  26. What’s the solution? 1. Simplify • KISS • Reusable components

  27. What’s the solution? 2. Steal (borrow) • responsiveemailpatterns.com • reallygoodemails.com

  28. What’s the solution? 3. Build better tools • What good

    is a WYSIWYG if WYSINWYW? • And why are they so inaccessible? • As bad as some ESPs are, nearly all of them support straight-up HTML…
  29. My solution • Reusable template components with Handlebars.js • UI

    to construct a JSON object • Immediate visual feedback and HTML output
  30. None
  31. In summary • In email, as with any medium, know

    the inherent limits, strengths, and weaknesses. • Devise a plan for maximum efficiency. • Share your discoveries and make the web better for everyone.
  32. I love the web (email is still growing on me…)

    Peter Anglea @peteranglea #DPA2 panglea@bju.edu bit.ly/heweb15dpa2