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

Transcript

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 huge.
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
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