Adapt or Die: The Mobile Email Challenge
-
Upload
ros-hodgekiss -
Category
Design
-
view
106 -
download
0
description
Transcript of Adapt or Die: The Mobile Email Challenge
#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 --