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

Demystifying Responsive Email

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
Tweet

More Decks by Peter Anglea

Other Decks in Technology

Transcript

  1. Why I hate email • Email is hard! • Email

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

    is still one of the most valuable channels at your disposal.
  3. 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/
  4. 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…
  5. Standards • Public offenders #1 and #2… • Outlook for

    desktop • Gmail • Mobile email clients… • Actually good!
  6. 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
  7. <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>
  8. 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!
  9. <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>
  10. More code samples • Smashing Book 5 • Chapter 8,

    “The Dark Side Of Responsive HTML Email” by Fabio Carneiro.
  11. 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
  12. Stupid things ESPs do Me: Does your CRM have an

    email template system? Vendor: Absolutely!
  13. 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?
  14. 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…
  15. My solution • Reusable template components with Handlebars.js • UI

    to construct a JSON object • Immediate visual feedback and HTML output
  16. 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.
  17. I love the web (email is still growing on me…)

    Peter Anglea @peteranglea #DPA2 [email protected] bit.ly/heweb15dpa2