html emails in rails 3
DESCRIPTION
A talk on sane html email development in rails that I prepared for Melbourne Ruby Group... but never actually presented.TRANSCRIPT
![Page 1: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/1.jpg)
HTML Emails in Rails 3
@johnbartonhttp://goodfil.ms : http://whoisjohnbarton.com
![Page 2: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/2.jpg)
What do I want to do?
Design, and implement, and deploy a good looking HTML email that works across all common desktop, web, and mobile clients with a fall back to text.
![Page 3: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/3.jpg)
What do I know?
![Page 4: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/4.jpg)
Writing HTML emails is painfulLots of mail clients broken in lots of ways. CSS support is neither CSS, nor support.
Tables for layout, inline css for colours and shit
![Page 5: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/5.jpg)
Testing HTML emails is painful
I 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.
![Page 6: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/6.jpg)
...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.
![Page 7: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/7.jpg)
What don’t I know?
![Page 8: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/8.jpg)
Is there a good way to do this in Rails 3?
... everything else is shiny and rad so I’d assume so.
![Page 9: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/9.jpg)
Surely it’s as simple as:
gem install incredibly_useful_but_confusingly_named_email_thing
![Page 10: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/10.jpg)
Let’s Google This Shit
![Page 11: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/11.jpg)
![Page 12: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/12.jpg)
Lots of “getting started” guides
Not a lot of “here’s a good way to do the whole thing”
![Page 13: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/13.jpg)
So over two weeks of TRY ALL THE THINGS I’ve settled on a decent toolchain and process.
YMMV.
![Page 14: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/14.jpg)
Step 1: Find a base to work on
![Page 15: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/15.jpg)
This is important
A lot of people have put in a lot of effort working out the “generic” kinks in all the different email clients and there is NO NEED for you to replicate the effort
![Page 16: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/16.jpg)
You can use an off the shelf template
http://themeforest.net/category/marketing/email-templatesor
http://www.campaignmonitor.com/templates/
![Page 17: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/17.jpg)
Or use boilerplate
http://htmlemailboilerplate.com/
![Page 18: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/18.jpg)
Pro-tip #1: mix haml & erbStick 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
![Page 19: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/19.jpg)
Step 2: Use sane tool for inlining your CSS
![Page 20: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/20.jpg)
![Page 21: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/21.jpg)
Premailer
Pros: auto generates text part, popular, has “mail” in the nameCons: Inlines everything, about 6 million forks with different shit
![Page 22: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/22.jpg)
Roadie
Pros: Inline some stuff, leaves some alone, can use asset pipelineCons: Our build segfaults
![Page 23: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/23.jpg)
Slide intentionallyleft blank
![Page 24: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/24.jpg)
Protip #2: Take advantage of the asset pipeline
You often have to “pointlessly” repeat style info on different elements, SASS with mixins makes that not eye bleedingly painful
![Page 25: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/25.jpg)
Step 3: Keep templates simple
The tables make shit hard enough as is, don’t put any logic in there
![Page 26: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/26.jpg)
Protip #3: Use Presenters
Push logic in there, it’s easy to test. Push copy in there, makes keeping HTML + Text parts in sync easier.
![Page 27: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/27.jpg)
![Page 28: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/28.jpg)
![Page 29: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/29.jpg)
Protip #4: Use partials as layouts
Isolate your tables from your content for more smiles and less swears.
![Page 30: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/30.jpg)
![Page 31: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/31.jpg)
Step 4: Smooth out your feedback loop
![Page 32: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/32.jpg)
TDD & F5DD
Either works well in Rails for web stuff, but no one has nailed it for email yet
![Page 33: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/33.jpg)
![Page 34: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/34.jpg)
This is the tricky bit.You want to work in layers.
![Page 35: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/35.jpg)
Do 90% of the work in the browser
Where you are held in the warm embrace of the web inspector.
![Page 36: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/36.jpg)
Then email to yourself
This 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.
![Page 37: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/37.jpg)
Then use one of the “magic” testing apps
I use http://litmus.com, but http://emailonacid.com looks good too and has a name that suggests what happened on the Office 2007 team
![Page 38: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/38.jpg)
Only move up a layer when you’ve 100% nailed it
And when you screw up, go back to level one.
![Page 39: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/39.jpg)
Step 5: Profit?
![Page 40: HTML Emails in Rails 3](https://reader034.vdocuments.net/reader034/viewer/2022052514/554be74fb4c90556328b4c40/html5/thumbnails/40.jpg)
SIGN UP TO GOODFILMS