responsive_email_templates_20copyIt is almost imperative in the recent times, that the emails that we send out these days are expected to be responsive with heavy number of users preferring to read emails from their mobile devices. To find the perfect sweet spot that aids in not only developing fully responsive emails, but also to do it quickly and easily is vital. There are lot of factors that should be taken into account both from a business perspective and from a developer standpoint. I am listing them here (in no particular order)

  1. Responsive design – works consistent across all the devices from mobile layout to the most stringent Outlook Email client.
  2. The UI should be consistent with ways to freeze the Headers, Footers and should follow a proper template similar to Rails Action View Layouts.
  3. Should be able to easily test in developer mode with support for Plain text view besides supporting HTML View.
  4. Avoiding hardcoding of styles in each and every HTML tag. Hardcoding styles in the email has been the norm in Rails community and other web frameworks as well.
  5. Should be easily testable in all types of browsers. Even a minor modification/tweak should be tested quickly instead of painfully sending email again and again.

The following may seem a short list, but believe me – to satisfy all the criterions I had to go through a lot of differnet phases with varied learning curves. To attack all the above problems – I would suggest the following tools and libraries to make our lives super simple.

  1. Zurb’s “Foundation for emails” (previously called Ink) that provides with ready-made available templates to kick start and later customise on top of it to our heart’s content.zurb ink
  2. Premailer-Rails – A wonderful Rails pre-processor that makes the email design entirely stylesheet driven as opposed to hardcoding styles directly in the tag. Not only does it removes the pain of having hardcoded styles, it also provides a packages view to render the Plain text automagically – with 0 amount of code required from the developer.
  3. Letter Opener – A classical tool by Ryan to quickly preview the emails in development mode.
  4. Litmus – If you are into Responsvie email design, you have no reason not to subscribe to Litmus as they provide a comprehensive way to template, design and test your email in in-numerous email clients.

That is it! Combine these tools and with a slight learning curve, you can claim yourself as a fully responsive e-mail designer. There are some gotcha’s when it comes to designing responsive emails.

Cheers!
Braga