#mobileemail

The Mobile Email Challenge

Ros Hodgekiss, Campaign Monitor @yarrcat !

Ryan Riddle, ZURB @ryantriddle

DIEADAPT

OR --

#mobileemail

#mobileemail

#mobileemail

#mobileemail

#mobileemail

#mobileemail

Who is this for?

• Designers/Coders

• Marketers

• All of Us

I’m RyanZURB

I’m RosCampaign Monitor

#mobileemail

#mobileemail

EMAIL REFUSES TO DIE

#mobileemail

76%Prefer to receive email

#mobileemail

41%Read email on a mobile device

#mobileemail

110%Confused

#mobileemail

#mobileemail

Challenges

• Terrible CSS Support in Email Clients

• Not Very Obvious Techniques / Workarounds

• Lack of Tools / Frameworks

• Usability Considerations with Mobile

#mobileemail

Challenges

• Terrible CSS Support in Email Clients

• Not Very Obvious Techniques / Workarounds

• Lack of Tools / Frameworks

• Usability Considerations with Mobile

#mobileemail

OUTLOOK GMAIL LOTUS NOTES…

#mobileemail

But Wait!

• 41% of Opens are Recorded on a Mobile Device

• Web Fonts

• Responsive Techniques

• CSS3!

#mobileemail

Panic Inc (panic.com)

#mobileemail

#mobileemail

Uber (uber.com)

#mobileemail

Challenges

• Terrible CSS Support in Email Clients

• Not Very Obvious Techniques / Workarounds

• Lack of Tools / Frameworks

• Usability Considerations with Mobile

#mobileemail

EMAIL HASN’T CAUGHT UP WITH THE WEB

#mobileemail

TEMPLATES AND BOILERPLATES ARE OK…

#mobileemail

FRAMEWORKS FTW!

#mobileemail

Outlook first

#mobileemail

Do progressive enhance.

#mobileemail

Challenges

• Terrible CSS Support in Email Clients

• Not Very Obvious Techniques / Workarounds

• Lack of Tools / Frameworks

• Usability Considerations with Mobile

#mobileemail

#mobileemail

• Text Editors

• Browsers

• Testing Services

What Do We Use?

#mobileemail

Inliners<style type="text/css"> .heading { color: #FFFFFF; } </style>

<p class="heading">Hello World</p>

#mobileemail

Inliners<style type="text/css"> .heading { color: #FFFFFF; } </style>

<p class="heading" style="color: #FFFFFF;">Hello World</p>

#mobileemail

Horror Story Break!

#mobileemail

#mobileemail

#mobileemail

• VML Code Generators

• Ink Button Code

• Email Builders…

What Do We Use?

#mobileemail

• Canvas video

#mobileemail

Challenges

• Terrible CSS Support in Email Clients

• Not Very Obvious Techniques / Workarounds

• Lack of Tools / Frameworks

• Usability Considerations with Mobile

Fat-Finger UX"What Guidelines Exist?" "How About Font Sizes?"

#mobileemail

#mobileemail

#mobileemail

• 30% Unsubscribe if an Email isUnreadable on Their Device

• Mobile-Optimized Emails Perform Better

• You're a Nice Person

So, Why Optimize?

#mobileemail

• 60% of Subscribers on a Mobile Device

• A/B Test Results:

• +7.66% Clicks

• +15.63% "Read" Engagement on Mobile

• +8.82% "Read" Engagement Overall

Case Study: Crocs

DEG Digital (degdigital.com)

#mobileemail

#mobileemail

What We Want You To Do

• Designers/Coders

• Be an Early Adopter, Experiment

• Marketers

• Prioritize Mobile

• It Will Never Be Pixel Perfect

#mobileemail

Become an Email Hero!

• Get Wise:

• campaignmonitor.com/blog

• zurb.com/university

• Talk to Us!

#mobileemail

The Mobile Email Challenge

Ros Hodgekiss, Campaign Monitor @yarrcat !

Ryan Riddle, ZURB @ryantriddle

DIEADAPT

OR --