Demystifying Responsive Email

Slide 1

Slide 1 text

Demystifying Responsive Email #DPA2 @peteranglea

Slide 2

Slide 2 text

I love the Web

Slide 3

Slide 3 text

I love the Web Every reason why is a reason why I HATE email

Slide 4

Slide 4 text

Why I hate email • Email is hard! • Email is tedious! • Email is ugly! • Email is extremely valuable!

Slide 5

Slide 5 text

In a marketing world saturated with social media, the inbox is still one of the most valuable channels at your disposal.

Slide 6

Slide 6 text

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/

Slide 7

Slide 7 text

If we can get this right, the payoff will be huge.

Slide 8

Slide 8 text

Hurdle #l Email clients

Slide 9

Slide 9 text

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…

Slide 10

Slide 10 text

Standards • Public offenders #1 and #2… • Outlook for desktop • Gmail • Mobile email clients… • Actually good!

Slide 11

Slide 11 text

Hurdle #2 The code

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

cellpadding cellspacing border align valign bgcolor width style HTML4 hspace vspace

Slide 14

Slide 14 text

Hello world

Slide 15

Slide 15 text

What about responsive? • Take everything you know about mobile-ﬁrst best practices, separation of content and styles, DRY coding, proper CSS speciﬁcity, and almost everything that you’ve probably been taught about responsive web design… and throw it away!

Slide 16

Slide 16 text

What about responsive? • @media (max-width: …) • !important

Slide 17

Slide 17 text

… @media (max-width: 600px) { table.left { width: 100% !important; } table.right { width: 100% !important; } } …

Slide 18

Slide 18 text

More code samples • Smashing Book 5 • Chapter 8, “The Dark Side Of Responsive HTML Email” by Fabio Carneiro.

Slide 19

Slide 19 text

Hurdle #3 Service providers

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Stupid things ESPs do … Outlook Apple Mail

Slide 22

Slide 22 text

Stupid things ESPs do … Outlook Web App

Slide 23

Slide 23 text

Stupid things ESPs do Having trouble reading this email? Too bad. WHY?!

Slide 24

Slide 24 text

Stupid things ESPs do Me: Does your CRM have an email template system? Vendor: Absolutely!

Slide 25

Slide 25 text

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?

Slide 26

Slide 26 text

What’s the solution? 1. Simplify • KISS • Reusable components

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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…

Slide 29

Slide 29 text

My solution • Reusable template components with Handlebars.js • UI to construct a JSON object • Immediate visual feedback and HTML output

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

In summary • In email, as with any medium, know the inherent limits, strengths, and weaknesses. • Devise a plan for maximum efﬁciency. • Share your discoveries and make the web better for everyone.

Slide 32

Slide 32 text

I love the web (email is still growing on me…) Peter Anglea @peteranglea #DPA2 [email protected] bit.ly/heweb15dpa2