A Designer's Guide to sending Emails in a Rails App

Talk from big design 2014 about how I work with emails in our rails application, how we test and build those emails.

Transcript

1. A Designer’s Workflow 
 for working with emails in a Rails App
2. Howdy!
3. I used to really, really, really hate
 working on emails
4. Inline Styles
5. Tables everywhere
6. Markup from 1999
7. <br><br><br>
 <p>&nbsp;</p> <br><br><br>
8. Sending, Receiving & Testing
9. It was scary!
10. Emails are too important for those excuses but….
11. The data told me I 
 should care.
12. OrgSync last month 6 million emails delivered 1.9 million user sessions
13. Let’s make our lives easier
14. Make your email 
 workflow the same as what you use everyday in your web app. Let’s make our lives easier
15. The CSS
18. CSS Inliners
19. CSS Inliners
20. CSS Inliners
21. CSS Inliners On the Web: Premailer premailer.dialect.ca Mailchimp mailchimp.com Zurb zurb.com/ink On your Machine: Grunt grunt-css-inliner Watchy github.com/caseywebdev/ watchy In a Rails App: Premailer premailer-rails
22. The Awesome Side Benefit: SASS
23. The Awesome Side Benefit: SASS SASS in my emails
24. The Testing
25. Part A: 
 Testing in a Rails App
26. wat.
27. Action Mailer + message_mailer_controller + notification_controller + Resque + Sendgrid
28. MessageMailer.simple_message ArgumentError: wrong number of arguments (0 for 4)
30. MessageMailer.simple_message( 'tyler@orgsync.com', 'tyler@orgsync.com', 'Hey this is a test message!', 'Hey you are sending yourself a message. Good job. Best. Designer. Ever.’ )
31. This doesn’t scale (obviously).
32. Let’s Automate This
33. rake email:contact_org Contact Org Message Sent
34. rake email:send_all Contact Org Message Sent Disabled Org Admin contact Message Sent Email Notification Sent …..
35. Part B: 
 Testing Quickly
36. Mailcatcher
38. Part C: 
 Testing Completely
39. Litmus
40. Litmus API
41. Test on Mobile!
42. The Markup
43. The Button
44. The Button
45. The Button
46. The Button
47. The Button Row
48. Componentize All the Things
49. Componentize All the Things
50. Componentize All the Things
51. Let’s treat the components of our emails like we do the elements of our web app
52. The Stats
53. We’ve made things in our process a lot better so we can send emails… and then measure them.
54. What to measure?
56. Clicks for “Simple Message” Deploy Day
57. Comparison of Messages
58. My activity history
59. But how do I make this actionable?
60. So where are we now? Don’t have to worry 
 about inline css
61. So where are we now? Extrapolated out code bloat and ugliness with components.
62. So where are we now? We can use our CSS 
 preprocessor just like 
 in our web app.
63. So where are we now? We have an email styleguide.
64. So where are we now? We can test all of our emails in a matter of minutes across all email clients.
65. SendGrid sendgrid.com Litmus litmus.com Mailcatcher mailcatcher.me Premailer premailer.dialect.ca Mailchimp mailchimp.com Zurb zurb.com/ink Thanks Everyone! Say Hi! Tyler Lee @tylerjameslee tylerjameslee.com