Your SlideShare is downloading. ×
0
#mobileemail
The Mobile Email Challenge

Ros Hodgekiss, Campaign Monitor
@yarrcat
!
Ryan Riddle, ZURB
@ryantriddle
DIE
ADA...
#mobileemail
#mobileemail
#mobileemail
#mobileemail
#mobileemail
#mobileemail
Who is this for?
• Designers/Coders
• Marketers
• All of Us
I’m Ryan
ZURB
I’m Ros
Campaign 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 Tool...
#mobileemail
Challenges
• Terrible CSS Support in Email Clients
• Not Very Obvious Techniques / Workarounds
• Lack of Tool...
#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 Tool...
#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 Tool...
#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: #FFF...
#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 Tool...
Fat-Finger UX
"What Guidelines Exist?"
"How About Font Sizes?"
#mobileemail
#mobileemail
#mobileemail
• 30% Unsubscribe if an Email is

Unreadable on Their Device
• Mobile-Optimized Emails 

Perform Better
• You...
#mobileemail
• 60% of Subscribers on a Mobile Device
• A/B Test Results:
• +7.66% Clicks
• +15.63% "Read" Engagement 

on ...
#mobileemail
#mobileemail
What We Want You To Do
• Designers/Coders
• Be an Early Adopter, Experiment
• Marketers
• Prioritize Mobile
•...
#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
DIE
ADA...
Adapt or Die: The Mobile Email Challenge
Adapt or Die: The Mobile Email Challenge
Upcoming SlideShare
Loading in...5
×

Adapt or Die: The Mobile Email Challenge

322

Published on

## Session Summary

Anyone who's had the grim pleasure of designing an HTML email newsletter knows that email is, well, broken. Designers quickly learn that wildly different CSS support between clients and a lack of email standards inevitably result in compromises, a scaled-back experience and broken dreams. And when the newsletter is finally delivered, most readers simply can't give two hoots about all that effort put in.

Despite the totally crippled nature of CSS support in email, the lack of scripting and the ridiculous diversity of platforms and displays out there, there are email designers who are doing a great job of wrangling the medium.

In this discussion between Ros Hodgekiss at Campaign Monitor and Ryan Riddle from ZURB, we'll be going beyond table layouts to show you what adventurous email designers are doing today - from CSS3 animation, to optimizing for mobile devices and more. If you send HTML email newsletters or notifications, you'll find out what techniques can be used in email, receive usability guidelines and be inspired by our round-up of highly effective designs.

## Key takeaways

- Why newsletters and notifications are still a necessary evil
- An understanding of the challenges that come with coding HTML email
- Where email is being read and how - and why 'responsive email' is something you should be already be mastering
- Fat finger UX - guidelines for creating emails that can be interacted with on both big and small devices
- But wait, how do I get my clients onto this?
- Examples of highly successful campaigns - and why they excelled
- Resources for starting your HTML email adventure

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
322
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Adapt or Die: The Mobile Email Challenge"

  1. 1. #mobileemail The Mobile Email Challenge
 Ros Hodgekiss, Campaign Monitor @yarrcat ! Ryan Riddle, ZURB @ryantriddle DIE ADAPT OR --
  2. 2. #mobileemail
  3. 3. #mobileemail
  4. 4. #mobileemail
  5. 5. #mobileemail
  6. 6. #mobileemail
  7. 7. #mobileemail Who is this for? • Designers/Coders • Marketers • All of Us
  8. 8. I’m Ryan ZURB I’m Ros Campaign Monitor #mobileemail
  9. 9. #mobileemail EMAIL REFUSES TO DIE
  10. 10. #mobileemail 76% Prefer to receive email
  11. 11. #mobileemail 41% Read email on a mobile device
  12. 12. #mobileemail 110% Confused
  13. 13. #mobileemail
  14. 14. #mobileemail Challenges • Terrible CSS Support in Email Clients • Not Very Obvious Techniques / Workarounds • Lack of Tools / Frameworks • Usability Considerations with Mobile
  15. 15. #mobileemail Challenges • Terrible CSS Support in Email Clients • Not Very Obvious Techniques / Workarounds • Lack of Tools / Frameworks • Usability Considerations with Mobile
  16. 16. #mobileemail OUTLOOK
 GMAIL
 LOTUS NOTES…
  17. 17. #mobileemail But Wait! • 41% of Opens are Recorded on a Mobile Device • Web Fonts • Responsive Techniques • CSS3!
  18. 18. #mobileemail Panic Inc (panic.com)
  19. 19. #mobileemail
  20. 20. #mobileemail Uber (uber.com)
  21. 21. #mobileemail Challenges • Terrible CSS Support in Email Clients • Not Very Obvious Techniques / Workarounds • Lack of Tools / Frameworks • Usability Considerations with Mobile
  22. 22. #mobileemail EMAIL HASN’T CAUGHT UP WITH THE WEB
  23. 23. #mobileemail TEMPLATES AND BOILERPLATES ARE OK…
  24. 24. #mobileemail FRAMEWORKS FTW!
  25. 25. #mobileemail Outlook first
  26. 26. #mobileemail Do progressive enhance.
  27. 27. #mobileemail Challenges • Terrible CSS Support in Email Clients • Not Very Obvious Techniques / Workarounds • Lack of Tools / Frameworks • Usability Considerations with Mobile
  28. 28. #mobileemail
  29. 29. #mobileemail • Text Editors • Browsers • Testing Services What Do We Use?
  30. 30. #mobileemail Inliners <style type="text/css"> .heading { color: #FFFFFF; }
 </style> <p class="heading">Hello World</p>
  31. 31. #mobileemail Inliners <style type="text/css"> .heading { color: #FFFFFF; }
 </style> <p class="heading" style="color: #FFFFFF;">Hello World</p>
  32. 32. #mobileemail Horror Story Break!
  33. 33. #mobileemail
  34. 34. #mobileemail
  35. 35. #mobileemail • VML Code Generators • Ink Button Code • Email Builders… What Do We Use?
  36. 36. #mobileemail • Canvas video
  37. 37. #mobileemail Challenges • Terrible CSS Support in Email Clients • Not Very Obvious Techniques / Workarounds • Lack of Tools / Frameworks • Usability Considerations with Mobile
  38. 38. Fat-Finger UX "What Guidelines Exist?" "How About Font Sizes?" #mobileemail
  39. 39. #mobileemail
  40. 40. #mobileemail • 30% Unsubscribe if an Email is
 Unreadable on Their Device • Mobile-Optimized Emails 
 Perform Better • You're a Nice Person So, Why Optimize?
  41. 41. #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)
  42. 42. #mobileemail
  43. 43. #mobileemail What We Want You To Do • Designers/Coders • Be an Early Adopter, Experiment • Marketers • Prioritize Mobile • It Will Never Be Pixel Perfect
  44. 44. #mobileemail Become an Email Hero! • Get Wise: • campaignmonitor.com/blog • zurb.com/university • Talk to Us!
  45. 45. #mobileemail The Mobile Email Challenge
 Ros Hodgekiss, Campaign Monitor @yarrcat ! Ryan Riddle, ZURB @ryantriddle DIE ADAPT OR --
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×