Minifying the mailers.

Our UX Engineer tells you how you can minify your mailers, with Inky and Foundation.

Coding table layout for mailers is a pretty painful task. Using table inside a table inside a table is going to frustrate you.

And email clients are not going to let you write your emails like you code your normal html layouts. No external style-sheets are compatible and you will be inlining each and every style. Re-usability of code is limited, and easily a mailer can consume 200loc.

Bores you, isn’t it? This is how you can reduce the LOC that goes into mailers with foundation-inky mailers.

Before that, here’s a quick sneak peek into normal mail layout coding.

Here’s how it looks in the browser.

Now lets see the code of the same layout in foundation inky.

A 117 line mailer shrunk into 59 LOC! Simple and neat, isn’t it?

And the most awesome part it, Foundation-Inky supports external css and scss. You don’t have to fiddle with inlining anymore. It is compatible even with outlook. Media queries are supported as well. The gulp task run by inky parses the inky-html into normal html when it is rendered in the browser.

Lets now see what corresponds to what in Inky mailers.

- The parent table that contains everything in it.
— A table that gets nested in the <td> of the <containter> tag.
— This is going to be <th> or <td> which will be nested in the <row>. 

You can specify the space or width that each column should occupy, with large-# and small-#.

Installing and Using Foundation Mails

Here’s how you can download and initialize foundation inky in your mailers

npm install --global foundation-cli

foundation new --framework emails

If you already have a project with foundation installed, you will just have to give the second command inside the project directory. It will generate you foundation-email.css file where all your css will have to go.

Foundation mails recently announced a ruby on rails gem to minimise the efforts put into mailers. When you’re using foundation-inky with ROR, this is what you should do. Put the following into your gemfile.

gem ‘inky-rb’, require: ‘inky’ 
 
gem ‘premailer-rails’ 

Then do,

bundle install
rails g inky:install

“rails g inky:install” will install you all that you need. Rename all the html.erb files to html.inky. For instance, welcome_mail.html.erb => welcome_mail.html.inky

The premailer-rails gem will inline and parse the css file into your inky html layout when it is rendered. Inky will also be parsing its layout into native table layout in the mail browser. You can use media queries to customise the look and feel of mails in browsers.

Happy mailing. :)

Up next