HTML Emails in Rails 3                 @johnbarton http://goodfil.ms : http://whoisjohnbarton.com
What do I want to do?Design, and implement, and deploy a good looking HTML email that worksacross all common desktop, web,...
What do I know?
Writing HTML emails is painful       Lots of mail clients broken in lots of ways.        CSS support is neither CSS, nor s...
Testing HTML emails is painfulI literally have to send emails to a whole bunch of clients and look at them and    if I got...
...and it got even more painful   iPhones, iPad, and Android mail clients are popular now.        They are still broken AN...
What don’t I know?
Is there a good way to do this in             Rails 3?     ... everything else is shiny and rad so I’d assume so.
Surely it’s as simple as:gem install incredibly_useful_but_confusingly_named_email_thing
Let’s Google This Shit
Lots of “getting started” guides    Not a lot of “here’s a good way to do the whole thing”
So over two weeks of TRY ALLTHE THINGS I’ve settled on adecent toolchain and process.           YMMV.
Step 1: Find a base to work on
This is important A lot of people have put in a lot of effort working out the “generic” kinks in allthe different email cl...
You can use an off the shelf         template http://themeforest.net/category/marketing/email-templates                   ...
Or use boilerplate  http://htmlemailboilerplate.com/
Pro-tip #1: mix haml & erb  Stick with ERB for your outermost layout, as it’s the smaller diff from your     boilerplate, ...
Step 2: Use sane tool for inlining            your CSS
Premailer Pros: auto generates text part, popular, has “mail” in the nameCons: Inlines everything, about 6 million forks w...
RoadiePros: Inline some stuff, leaves some alone, can use asset pipeline                    Cons: Our build segfaults
Slide intentionally     left blank
Protip #2: Take advantage of     the asset pipelineYou often have to “pointlessly” repeat style info on different elements...
Step 3: Keep templates simple The tables make shit hard enough as is, don’t put any logic in there
Protip #3: Use PresentersPush logic in there, it’s easy to test. Push copy in there, makes keeping HTML +                 ...
Protip #4: Use partials as             layoutsIsolate your tables from your content for more smiles and less swears.
Step 4: Smooth out your     feedback loop
TDD & F5DDEither works well in Rails for web stuff, but no one has nailed it for email yet
This is the tricky bit.You want to work in layers.
Do 90% of the work in the       browserWhere you are held in the warm embrace of the web inspector.
Then email to yourselfThis catches a bunch of “I have a fundamentally wrong assumption about something that works in the b...
Then use one of the “magic”           testing appsI use http://litmus.com, but http://emailonacid.com looks good too and h...
Only move up a layer when  you’ve 100% nailed it   And when you screw up, go back to level one.
Step 5: Profit?
SIGN UP TOGOODFILMS
HTML Emails in Rails 3
HTML Emails in Rails 3
HTML Emails in Rails 3
HTML Emails in Rails 3
HTML Emails in Rails 3
HTML Emails in Rails 3
Upcoming SlideShare
Loading in …5
×

HTML Emails in Rails 3

2,237 views

Published on

A talk on sane html email development in rails that I prepared for Melbourne Ruby Group... but never actually presented.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,237
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Emails in Rails 3

  1. 1. HTML Emails in Rails 3 @johnbarton http://goodfil.ms : http://whoisjohnbarton.com
  2. 2. What do I want to do?Design, and implement, and deploy a good looking HTML email that worksacross all common desktop, web, and mobile clients with a fall back to text.
  3. 3. What do I know?
  4. 4. Writing HTML emails is painful Lots of mail clients broken in lots of ways. CSS support is neither CSS, nor support. Tables for layout, inline css for colours and shit
  5. 5. Testing HTML emails is painfulI literally have to send emails to a whole bunch of clients and look at them and if I got a single bloody thing wrong do the whole thing over from scratch.
  6. 6. ...and it got even more painful iPhones, iPad, and Android mail clients are popular now. They are still broken AND have tiny screens. ...and I don’t even own an iPhone.
  7. 7. What don’t I know?
  8. 8. Is there a good way to do this in Rails 3? ... everything else is shiny and rad so I’d assume so.
  9. 9. Surely it’s as simple as:gem install incredibly_useful_but_confusingly_named_email_thing
  10. 10. Let’s Google This Shit
  11. 11. Lots of “getting started” guides Not a lot of “here’s a good way to do the whole thing”
  12. 12. So over two weeks of TRY ALLTHE THINGS I’ve settled on adecent toolchain and process. YMMV.
  13. 13. Step 1: Find a base to work on
  14. 14. This is important A lot of people have put in a lot of effort working out the “generic” kinks in allthe different email clients and there is NO NEED for you to replicate the effort
  15. 15. You can use an off the shelf template http://themeforest.net/category/marketing/email-templates or http://www.campaignmonitor.com/templates/
  16. 16. Or use boilerplate http://htmlemailboilerplate.com/
  17. 17. Pro-tip #1: mix haml & erb Stick with ERB for your outermost layout, as it’s the smaller diff from your boilerplate, and you’ll want to update that as the boilerplate evolves.Use haml for everything inside there as it makes all the nested tables easier to manage
  18. 18. Step 2: Use sane tool for inlining your CSS
  19. 19. Premailer Pros: auto generates text part, popular, has “mail” in the nameCons: Inlines everything, about 6 million forks with different shit
  20. 20. RoadiePros: Inline some stuff, leaves some alone, can use asset pipeline Cons: Our build segfaults
  21. 21. Slide intentionally left blank
  22. 22. Protip #2: Take advantage of the asset pipelineYou often have to “pointlessly” repeat style info on different elements, SASS with mixins makes that not eye bleedingly painful
  23. 23. Step 3: Keep templates simple The tables make shit hard enough as is, don’t put any logic in there
  24. 24. Protip #3: Use PresentersPush logic in there, it’s easy to test. Push copy in there, makes keeping HTML + Text parts in sync easier.
  25. 25. Protip #4: Use partials as layoutsIsolate your tables from your content for more smiles and less swears.
  26. 26. Step 4: Smooth out your feedback loop
  27. 27. TDD & F5DDEither works well in Rails for web stuff, but no one has nailed it for email yet
  28. 28. This is the tricky bit.You want to work in layers.
  29. 29. Do 90% of the work in the browserWhere you are held in the warm embrace of the web inspector.
  30. 30. Then email to yourselfThis catches a bunch of “I have a fundamentally wrong assumption about something that works in the browser will work in at least 1 mail client” You will have lots of those.
  31. 31. Then use one of the “magic” testing appsI use http://litmus.com, but http://emailonacid.com looks good too and has a name that suggests what happened on the Office 2007 team
  32. 32. Only move up a layer when you’ve 100% nailed it And when you screw up, go back to level one.
  33. 33. Step 5: Profit?
  34. 34. SIGN UP TOGOODFILMS

×