## 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

1. #mobileemail
The Mobile Email Challenge
Ros Hodgekiss, Campaign Monitor
@yarrcat
!
Ryan Riddle, ZURB
@ryantriddle
DIE
ADAPT
OR --

2. #mobileemail

3. #mobileemail

4. #mobileemail

5. #mobileemail

6. #mobileemail

7. #mobileemail
Who is this for?
• Designers/Coders
• Marketers
• All of Us

8. I’m Ryan
ZURB
I’m Ros
Campaign Monitor
#mobileemail

9. #mobileemail
EMAIL
REFUSES TO DIE

10. #mobileemail
76%
Prefer to receive email

11. #mobileemail
41%
Read email on a mobile device

12. #mobileemail
110%
Confused

13. #mobileemail

14. #mobileemail
Challenges
• Terrible CSS Support in Email Clients
• Not Very Obvious Techniques / Workarounds
• Lack of Tools / Frameworks
• Usability Considerations with Mobile

15. #mobileemail
Challenges
• Terrible CSS Support in Email Clients
• Not Very Obvious Techniques / Workarounds
• Lack of Tools / Frameworks
• Usability Considerations with Mobile

16. #mobileemail
OUTLOOK
GMAIL
LOTUS NOTES…

17. #mobileemail
But Wait!
• 41% of Opens are Recorded on a Mobile Device
• Web Fonts
• Responsive Techniques
• CSS3!

18. #mobileemail
Panic Inc (panic.com)

19. #mobileemail

20. #mobileemail
Uber (uber.com)

21. #mobileemail
Challenges
• Terrible CSS Support in Email Clients
• Not Very Obvious Techniques / Workarounds
• Lack of Tools / Frameworks
• Usability Considerations with Mobile

22. #mobileemail
EMAIL
HASN’T CAUGHT
UP WITH THE WEB

23. #mobileemail
TEMPLATES AND
BOILERPLATES
ARE OK…

24. #mobileemail
FRAMEWORKS
FTW!

25. #mobileemail
Outlook first

26. #mobileemail
Do progressive enhance.

27. #mobileemail
Challenges
• Terrible CSS Support in Email Clients
• Not Very Obvious Techniques / Workarounds
• Lack of Tools / Frameworks
• Usability Considerations with Mobile

28. #mobileemail

31. #mobileemail
• Text Editors
• Browsers
• Testing Services
What Do We Use?

32. #mobileemail
Inliners
<style type="text/css">
.heading { color: #FFFFFF; }
</style>
<p class="heading">Hello World</p>

33. #mobileemail
Inliners
<style type="text/css">
.heading { color: #FFFFFF; }
</style>
<p class="heading" style="color: #FFFFFF;">Hello World</p>

34. #mobileemail
Horror Story Break!

35. #mobileemail

36. #mobileemail

37. #mobileemail
• VML Code Generators
• Ink Button Code
• Email Builders…
What Do We Use?

38. #mobileemail
• Canvas video

39. #mobileemail
Challenges
• Terrible CSS Support in Email Clients
• Not Very Obvious Techniques / Workarounds
• Lack of Tools / Frameworks
• Usability Considerations with Mobile

40. Fat-Finger UX
"What Guidelines Exist?"
"How About Font Sizes?"
#mobileemail

41. #mobileemail

42. #mobileemail
• 30% Unsubscribe if an Email is
Unreadable on Their Device
• Mobile-Optimized Emails
Perform Better
• You're a Nice Person
So, Why Optimize?

43. #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)

44. #mobileemail

45. #mobileemail
What We Want You To Do
• Designers/Coders
• Be an Early Adopter, Experiment
• Marketers
• Prioritize Mobile
• It Will Never Be Pixel Perfect

46. #mobileemail
Become an Email Hero!
• Get Wise:
• campaignmonitor.com/blog
• zurb.com/university
• Talk to Us!

47. #mobileemail
The Mobile Email Challenge
Ros Hodgekiss, Campaign Monitor
@yarrcat
!
Ryan Riddle, ZURB
@ryantriddle
DIE
ADAPT
OR --