HTML Emails in Rails 3
-
Upload
john-barton -
Category
Technology
-
view
1.906 -
download
2
description
Transcript of HTML Emails in Rails 3
HTML Emails in Rails 3
@johnbartonhttp://goodfil.ms : http://whoisjohnbarton.com
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.
What do I know?
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
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.
...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.
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 ALL THE THINGS I’ve settled on a decent 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 all the different email clients and there is NO NEED for you to replicate the effort
You can use an off the shelf template
http://themeforest.net/category/marketing/email-templatesor
http://www.campaignmonitor.com/templates/
Or use boilerplate
http://htmlemailboilerplate.com/
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
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 with different shit
Roadie
Pros: Inline some stuff, leaves some alone, can use asset pipelineCons: Our build segfaults
Slide intentionallyleft blank
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
Step 3: Keep templates simple
The tables make shit hard enough as is, don’t put any logic in there
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.
Protip #4: Use partials as layouts
Isolate your tables from your content for more smiles and less swears.
Step 4: Smooth out your feedback loop
TDD & F5DD
Either 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 browser
Where you are held in the warm embrace of the web inspector.
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.
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
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 TO GOODFILMS