Responsive Email

Email is an important communication line for many businesses. With the ever increasing use of mobile devices it’s important a company’s message is delivered with a professional look and feel no matter what the screen size is.

But, if you have ever had to make an HTML email you understand that this is one of the more painful experiences that can take place in front of a computer screen. Then having to go a step further to make the email responsive can you make you feel like you choose the wrong profession. In order to help you not feel like that, ZURB has created some responsive HTML templates called Ink, to help jump start your development process.

I recently used a some of the Ink templates as starting points to build out a couple of responsive email templates, and it basically saved my life. I started out with what they are calling the “Sidebar Hero” template. You can also view screenshots of the emails in the Litmus testing environment, which provides you with some security that these designs have been tested.

The template was set up very nicely with a sensible class system and good use of CSS in the header. The media queries were clearly labeled and it was a very manageable piece to work with. This provided me with a nice base to shift the emails into a design format that was needed for these templates. Of course naturally as I adjusted the template I broke things and had to go back and fix, make adjustments, write custom code, media queries, and CSS.

Here are the two templates that I created:
left-template right-template

I have changed the custom information so that you can feel free to download them and use them however you want. There is not a terrible lot of difference between the two templates. But for what I was creating, and more than likely the best practice for email design is to keep it simple and to the point.

These templates were tested in Litmus for the following email clients:

  • Apple Mail 6
  • Lotus Notes 8
  • Outlook 2000, 2002, 2003, 2007, 2010, 2011, 2013
  • Thunderbird
  • Android 2.3, 4.2
  • Gmail Mobile App
  • Blackberry 5 OS (This could still use some work)
  • iPhone 4, 4s, 5, 5s
  • iPad Mini
  • iPad
  • Windows Phone 8
  • AOL (Explorer, Firefox, Chrome)
  • Gmail (Explorer, Firefox, Chrome)
  • Outlook (Explorer, Firefox, Chrome)
  • Yahoo (Explorer, Firefox, Chrome)

One of the best features I found with using Ink was the inliner tool. This guy was awesome. Because it allows you to write all of CSS in the header of you HTML file, then once you plug it into this system it inlines all of your code. Emails love having your code inline with your HTML. This tool lets you write CSS in a way most people are more accustomed, and then takes all of that code and makes it HTML inline friendly.

Responsive HTML email can be a dark scary place. But, with a framework like Ink to boost some of the testing curves it helps to shine a light on the scariness.

Be the first to leave a reply!

Leave a Comment

* required