Setting Up HTML Emails in Rails

21 06 2012

A few weeks ago we decided to step up our email game. We had just received the masterclass in designing emails from Justine (@meladorri) and were about to launch our free plan, so the timing seemed right. It’s not that they looked sooo bad in the past, but we wanted a more unified theme that could be used for our many purposes (appearance and design is more of Joe’s area, so I’ll let him write more on that).

We send two types of emails – some that are general reference and informational (think newsletters) that we use email marketing tools like MailChimp and Pardot for, and some that are more personalized or time-sensitive for our customers (think overage alerts) that are sent via Rails.  So the challenge was two-fold – get the emails looking right in an email marketing tool, but also make sure they looked consistent coming out of Rails.

After Joe toiled on a beautiful, table-based layout (you have to use tables for good looking email, it’s terrible) and added it to our email marketing software without much trouble, the next challenge was porting that to the system-based emails.

Long story short – sending out HTML email is pretty tricky. There are some best practices for creating HTML emails (examples: NetTuts, MailChimp, and pretty much anything by Litmus ) but all of them involve painful stuff like inline styling and duplicate code. After much painful research and experimentation, I’ve got a few tips to help set up AND maintain great looking emails in Rails. It relies on a few gems and some basic Rails functionality, but it’s guaranteed to make your email life a lot easier.

Step 1: Set up the mailers
The first thing you need to do is set up Mailers and Views for the email you’d like to send out. There are much better tutorials around this part than I can provide, and they are fairly straightforward to generate in Rails:

rails generate mailer name_of_email_campaign name(s)_of_email

Example_mailers

This will create a mailer model in your ‘app/mailers’ directory, and corresponding views (in text.erb) for the emails attached to that model. Since you’ll be using layouts, I recommend editing the text version first (to get the wording right) before setting up the .html.erb version of your email.

 

Step 2: Set up MailCatcher
Now that you’ve been messing with your text emails, you probably want to see what they would look like sent, right? No need to deploy and then execute actions to generate the emails (dangerous!) – using a gem called MailCatcher and Rails functionality, you can do this painlessly (and fast!).

Png

MailCatcher makes testing your Rails-based emails super easy. Install the gem (‘gem install mailcatcher’), run it (‘mailcatcher -f’), and then open a browser tab to localhost:1080 to start seeing mailer magic! More info on generating an email to show up here to come. You don’t need to add it to a gemfile, unless others in your team will be using it as well. You may need to make some configuration adjustments, so the emails end up in MailCatcher (check out their documentation for what might apply to your setup).

To send yourself an email for testing, fire up your Rails Console. The format for delivering an email through the console is:

MailerModel.email_name.deliver

In the case of Wistia emails, we deliver them to a specific account, so the function looks like MailerModel.email_name(account).deliver. The email_name corresponds to the function within your mailer model.

Changes made in views will appear if you run ‘deliver’ again, but any changes to the model will require you to re-start the console to take effect.

With MailCatcher, you can see the HTML and text version quickly, and also run analysis to see what devices won’t work with elements of your layout. It’s super useful.

Mailcatcher_snapshot

Step 3: Set up the layout
So now it’s time to get your email looking good. If you’re lucky like me, you’ve got one of the best designers around putting together your table-based layout. If not…my apologies, I haven’t found a good way around that step. If you have (found a way to translate div-based layout into tables) please respond in the comments. Otherwise, I’ll give you some time to get your table-based layout right.

Save it in your normal app/views/layouts directory ‘layout_name.html.erb’. In the spots where you want to add content, I recommend using yields (content_for in your view, see Rails Guides for more). We used yields in three spots: for the image at the top, text content in the body, and link (call-to-action) at the bottom of the email.

All set? Great. In the Mailer model, tell the system to use a layout for HTML emails (and leave the text emails as-is:

mail(to: 'foo@bar.org', subject: 'something important for you!') do |format|
  format.html { render layout: 'layout.html.erb' }
  format.text
end

If you haven’t created an html version of your mailer, you should do so now – same_name_as_text_version.html.erb. But instead of having to include the entire layout, you can just include the content you’d like to pass in. Ah, much better.

 

Step 4: Commence awesome styling
Ok, so you’re setting up great looking email, and testing it in MailCatcher (use their Fractal functionality as well – so cool to know what won’t work and on which device). What could be better? Well, you had to use inline styles to get things set up, and if you’re anything like me, that drives you just about batshit crazy. Luckily, the Roadie gem is here to rescue you!

Roadie makes using external stylesheets possible with emails. Previously, you had to include ALL styles inline – which was a real pain to look at and maintain. Now, you can use sass to keep track of the styles associated with your emails … wow! Add it to your gemfile (‘gem roadie’) and you’re good to go. Ryan Bates does a good screencast on getting set up with roadie (which is where I first heard about it).

I created a new stylesheet (cleverly called ‘mail.sass’) and moved all my inline styles from the table layout to it.  Then, add a link to your stylesheets at the top of the layout (ie. <link rel=”stylesheet” type=”text/css” href=”mail”> ) and elements in your layout and views will be styled through a stylesheet. So much cleaner.

Extra Notes
One hurdle we had to jump was in relation to images in email layouts. We encountered some real weirdness using ‘image_tag’ with just a link to the image. Instead, we ended up building the full URL using http://#{ ::AppConfig.asset_host }/path_to_image’. Might be helpful if you plan to tackle this project.

 





Interview an MBA: Contrarian Investing in People

4 06 2012

The prevailing thinking seems to be MBAs shouldn’t take part in this recent ‘startup fever’. As the thinking goes, MBAs are money-hungry robots that lust for power and drain culture from the startup environment. If they are given the reins of a startup, the bubble is sure to follow (strange duality, since many are saying the social media bubble has been defined by a company run by a college dropout). I remember reading sometime ago about a ‘rule of thumb’ for valuing startups: add one mill for each programmer, and subtract half that for each MBA. That is to say, the MBA adds negative value. The fact that investors would have a ‘rule of thumb’ that they actually follow or prescribe for investing is another matter for another time (I mean, this is your expertise, right? A rule of thumb??), but I attack the very notion that this could possibly be true.

Instead, I would argue that just like any other degree, the MBA doesn’t define the person underneath – aka ‘garbage in, garbage out’. I find it almost impossible to believe that only greedy, ‘gutless’ (Seth Godin’s words, not mine) people would sign up for MBAs. So then it must be while in school they turn into evil people. Let’s see, I can remember taking Accounting, Venture Capital, and Marketing…which classes taught us greed and overconfidence again?

The current stigma against MBAs is, in my opinion, pretty lazy thinking. Why waste time actually getting to know the person, if you can find a way to write them off? Our brains seek these heuristics all the time, but I find this one to be pretty destructive. Hiring and maintaining culture is hard, really hard. We’re collectively shooting ourselves in the foot if we ignore/deride an entire group of people.

In my opinion, lots of startups could use what MBAs do gain in school. Big picture thinking, business model evaluation, and a tireless work ethic can be invaluable assets. The ability to learn new concepts, to defend oneself in arguments, to evaluate other perspectives before making snap judgements – these are great skills to have in a startup employee. MBA grads just got out of a program working with brilliant and incredibly driven people – sound similar to a startup? You can’t get much done as a ‘shrinking violet’ in either environment, either.

While the case method isn’t exactly a silver bullet for business greatness, it does teach you to identify the right things to do from a long list of things you could be doing. The requirements of the MBA curriculum also forces more prioritization and focus than the typical undergraduate experience. These might not be the skills typically associated with MBAs, but they are incredibly important as a startup employee.

Jason Freedman has a pretty interesting take on MBAs: “Beware of MBAs!” and I don’t think he’s necessarily wrong. Startups are not smaller versions of normal companies, and the way they compete/grow/learn cannot be taught in a classroom. But knowing the ‘frameworks’ isn’t so destructive, it’s about how they are applied. Yep, that actually means MBAs can work in a ‘lean’ environment. Or a fat environment, or whatever becomes popular next.

You see, it’s not the degree that makes an MBA ineffective (or worse, negative) in a startup, or megacorp, or something inbetween. It’s the person underneath. There are folks from my MBA class that I would work with, and there are some I wouldn’t. No different at all from undergrad. Some people seem hung up on the idea that MBAs don’t listen to engineers or treat them like second-rate citizens. This is simply a matter of personal respect, not a degree-defining quality.

I’ve met a bunch of MBAs who work at startups during the last year and a half, and I’m always left impressed by their intelligence, experience, and depth of thought. I work with another MBA everyday, and his work ethic is pretty unstoppable (despite his dress code). I find it (again) impossible to believe together we contribute a negative valuation to the company. We’re both learners and builders, which we were long before we went to school.

Perhaps we’re an exception to the larger MBA rule. Totally possible. But here’s what I recommend: define your job openings, your salary range, and the qualities you want in a coworker. If MBAs apply for the position, interview them. Get to know the person, you may find them to be a great addition to the team (or you might not!) but it’s silly to exclude them because of the degree. Also, good news, right now might be the time to hire them.