Adapt or Die: The Mobile Email Challenge
## 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
Recomendados
Recomendados
Mais conteúdo relacionado
Último
Último (20)
Destaque
Destaque (20)
Adapt or Die: The Mobile Email Challenge
- 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
- 10. #mobileemail 76% Prefer to receive email
- 11. #mobileemail 41% Read email on a mobile device
- 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
- 17. #mobileemail But Wait! • 41% of Opens are Recorded on a Mobile Device • Web Fonts • Responsive Techniques • CSS3!
- 19. #mobileemail
- 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
- 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>
- 35. #mobileemail
- 36. #mobileemail
- 37. #mobileemail • VML Code Generators • Ink Button Code • Email Builders… What Do We Use?
- 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 --