Embed Size (px)
DESCRIPTION
## 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
Citation preview
#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 --
