Responsive Emails in Rails with Ink

Why Responsive?

These days, a lot of users read their emails through their mobile devices (about 48% according to this statistic) and if you want to provide a good user experience to your subscribers you should consider responsive email design.

There are several ways to approach this. You could build the emails yourself from scratch and use media queries to cater for different screens or you could use premium and non-premium templates that are available online and modify them to suit your needs. The problem with these solutions is getting a consistent look of your emails in all email clients. One email client that is especially hard to work with when it comes to responsive emails is Outlook because of its limited CSS support.

What is the Solution?

Zurb, the same company that came up with the Foundation framework released an Email framework named Ink. According to them, Ink enables you to ‘Quickly create responsive HTML emails that work on any device & client. Even Outlook.’. And that is what we will work with in this tutorial. We are going to create a Rails application that sends an email to a user after they sign up for an account.

First we’ll create a new application called rails_ink.

rails new rails_ink

For demonstration purposes, we won’t be building a large application. I used the scaffold command to generate a User model and its related views and controllers.

rails generate scaffold user name:string email:string

Migrate the database after that.

rake db:migrate

Next we’ll generate the mailer.

rails generate mailer UserMailer

This will create a mailer class, view directory, and a test file.

Next, we’ll add a configuration file to the config/initializers directory. This will hold the mailer configuration settings. For testing, we’ll be using Gmail’s smtp server. In production, you might be using another delivery method, like sendmail with your local server.

Create a file called mailer_settings inside the config/initializers directory and insert the following code, making changes as necessary.

ActionMailer::Base.smtp_settings = {
  :address => "smtp.gmail.com",
  :port => 587,
  :user_name => ENV['GMAIL_USERNAME'],
  :password => ENV['GMAIL_PASSWORD'],
  :authentication => "plain"
}

We need to add a method called registration_email to the app/mailers/user_mailer.rb file. This method will send an email to a user who registers. The method will take in a User object and assign it to an instance variable so that it’s available to our view. Since our email will have an image in the banner, we have to include this as an inline attachment in mailer.

class UserMailer < ActionMailer::Base
  default from: 'example@sitepoint.com'

  def registration_email(user)
    @user = user
    attachments.inline['banner.jpeg'] = File.read("#{Rails.root}/app/assets/images/banner.jpeg")
    mail(to: user.email, subject: 'Registration Confirmation')
  end
end

We now need to create a view file for our email. This will be located in the app/views/user_mailer directory and has to have the same name as the corresponding method in the UserMailer class.

Create a file named registration_email.html.erb inside app/views/user_mailer.

We are going to use one of the templates on the Ink website. I am using the Basic template for this demonstration.

For simplicity, during testing, I prefer just working with the HTML and CSS, running it directly in the browser instead of running it from the Rails application. When I am done, I will then transfer the code to my Rails app.

You can link the ‘ink.css’ file in the email but this should only be done for testing purposes. When you are satisfied with the result, copy the css and paste it into the HTML document between style tags. Then you should run your email content through an inliner. An inliner brings all your styles inline, which is important, as some email clients tend to strip out the CSS in the style tag. There are several online inliners, but we’ll use the Ink Inliner.

Don’t place any ERB code in the HTML file because the inliner won’t understand it and, thus, won’t output the correct HTML. We’ll have to search for and replace the static text with the necessary variables. Here I will be replacing the banner image and the name of the recipient (Susan Calvin) with the name of the registered user.

Once we have the email output, paste this code into the mailer view template app/views/user_mailer/registration_email.html.erb and insert any needed variables. Here, we will search for the string Susan Calvin and replace it with the following:

<%= @user.name %>

Now, search for the img tag to the image we want to replace and insert the corresponding image_tag. Be sure to include the css styles and attributes that the inliner inserted in the tag.

I changed it from this:

<img src="http://placehold.it/200x50" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left" />

To this:

<%= image_tag attachments['banner.jpeg'].url, :style => "outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;", :align=>"left" %></td>

In the UsersController, after saving the user, we call UserMailer.registration_email and pass it the User object.

def create
  @user = User.new(user_params)

  respond_to do |format|
    if @user.save
      UserMailer.registration_email(@user).deliver
      format.html { redirect_to @user, notice: 'User was successfully created.' }
      format.json { render action: 'show', status: :created, location: @user }
    else
      format.html { render action: 'new' }
      format.json { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end

The UserMailer.registration_email(@user).deliver sends our email.

And that’s it. Register a user and test out the email on different clients.

Conclusion

If you want to send responsive emails to your users without spending money on a template or writing the code from scratch, give Ink a try. It can be used with any language you choose for your app and it also works well with Email Service Providers like Mailchimp and Campaign Monitor.

Frequently Asked Questions on Responsive Emails in Rails with Ink

How can I ensure my emails are responsive on all devices?

Ensuring your emails are responsive across all devices involves using a responsive email framework like Ink. This framework allows you to create HTML emails that work on any device and email client. You can use the grid system provided by Ink to structure your email content. It’s also important to use media queries to adjust the layout based on the screen size. Always test your emails on different devices and email clients to ensure they display correctly.

What is the role of Action Mailer in Rails?

Action Mailer in Rails is a framework for designing email services. You can use Action Mailer to receive and send emails from your Rails application. It provides advanced email functionalities like sending emails asynchronously, adding attachments, and handling multipart emails. Action Mailer integrates seamlessly with the Rails framework, allowing you to generate views and templates for your emails.

How can I code a responsive email from scratch?

Coding a responsive email from scratch involves designing the email layout, writing the HTML and CSS code, and testing the email on different devices and email clients. You can use a responsive email framework like Ink to simplify the process. Ink provides a grid system and a set of components that you can use to structure your email content. You also need to use media queries to adjust the layout based on the screen size.

What are some good templates or examples for Action Mailer email?

There are many resources online where you can find templates and examples for Action Mailer email. The official Ruby on Rails guides provide a basic example of how to use Action Mailer. You can also find more complex examples on GitHub and other coding websites. These examples can help you understand how to structure your emails, add attachments, and handle multipart emails.

How can I design HTML emails for mobile devices?

Designing HTML emails for mobile devices involves using a responsive design approach. This means your emails should adjust to fit the screen size of the device they are viewed on. You can use a responsive email framework like Ink to simplify the process. Ink provides a grid system and a set of components that you can use to structure your email content. You also need to use media queries to adjust the layout based on the screen size.

What are the differences between the versions of Action Mailer?

Different versions of Action Mailer come with different features and improvements. For example, newer versions of Action Mailer support sending emails asynchronously, which can improve the performance of your Rails application. Always check the official Ruby on Rails guides for the latest features and changes in Action Mailer.

How can I add attachments to my emails?

You can add attachments to your emails using the attachments method provided by Action Mailer. This method allows you to attach files to your emails by specifying the file path. You can also specify the content type and filename of the attachment. Remember to test your emails to ensure the attachments are sent correctly.

How can I handle multipart emails?

Handling multipart emails involves creating different versions of your email for different content types. For example, you can create a text version and an HTML version of your email. Action Mailer provides a way to handle multipart emails by generating different views for each content type. You can specify the content type of each view using the format method.

How can I test my emails?

Testing your emails involves checking how they display on different devices and email clients. You can use email testing tools like Litmus or Email on Acid to simplify the process. These tools allow you to preview your emails on different devices and email clients. You should also test the functionality of your emails, like sending and receiving emails, adding attachments, and handling multipart emails.

How can I improve the performance of my email service?

Improving the performance of your email service involves optimizing your email code and using advanced email functionalities. For example, you can send emails asynchronously to avoid blocking the execution of your Rails application. You can also use caching to improve the performance of your email views. Always monitor the performance of your email service to identify any issues and opportunities for improvement.