Responsive email template for mobile apps, native mobile apps and outlook

Responsive email template for mobile apps, native mobile apps and outlook

Email template development is a headache, especially when it comes to optimizing it for all the various devices out there (and by devices, I mean desktop computers, mobile devices, mobile native apps, as well as email apps such as Gmail app). Also we can’t forget Microsoft with the agenda of making the lives of developers miserable (why make their lives easy? Let’s make them sweat to death).

In this blog post, I’ll try to give you some guidelines for making the best email templates, increasing your mail open rate and conversion rate, and some general tips (written with blood) that I gathered along the way. I’m not a content guy, so I won’t talk about how to create good content, or how to raise your email conversion rate by making good content.

Remember: Web Development != Email Development.

tip #1: Use tables

Think like it’s ‘98 all over again. Writing your HTML template with tables is the most bullet proof way to do it today (Outlook’s rendering engine is Microsoft Word’s rendering engine).  That is why you won’t see crazy HTML+CSS templates with animations and cool stuff. You can’t ignore Outlook, unfortunately. The Radicati Group counted 730 million business email inboxes worldwide in 2010, 25% of all email accounts. That was in 2010; today in 2016, the numbers have grown exponentially. Google Apps claims that over five million businesses are using their tools, and that means that the other 725 (again, according to the year of 2010) use Microsoft’s solution (not all of them, but over 90%). Conclusion: we have to use a format that supports Outlook’s rendering engine.

Here are some general tips for writing HTML templates for Outlook:

  • No Background image support
  • No div’s – outlook strangely replace them with paragraphs
  • No position or float (we have some hacks for that – later)
  • Poor support for padding and margin (simple solution for padding for a button – later)
  • No animated GIFs
  • Use old attributes (bgcolor, width, height, valign, align etc) specially with table cells and images
  • As for outlook 2010 read this article by Litmus to get a overall view about rendering and optimizing for outlook
  • All block elements such as H1, P, should become table cells (td’s) or be included inside table cells.
  • Break your email templates into sections and treat them as table cells, for example:

When you get used to it, it is not that difficult to write HTML with tables.

tip #2: Be mobile, be responsive

It is not a secret that we are in a mobile oriented era. People use their cell phones or tablets as the main (or one of their main) work devices. While there was a small drop (1%) in the email open rate, mobile devices still rule the open rates with around 50% – twice the  open rate of desktop users.

Take a look at Email client market share for more information.

The problem is that there are so many mail apps, and each one of them has its own rendering engine. Fortunately, we know how to deal with those restrictions (although we need to use some tricks).

We’ll take the Gmail app for Android for example. Did you know that Gmail for Android strips the <style> tags (especially the tags that are in the HEAD section) out of your email? That is not good news; forget about using media queries.

A great blog post I read about Gmail First Strategy for Responsive Emails will get you through all of steps you need in order to get the perfect responsive email template. Julie Ng’s post helped me to create a great template at work that looked good with the Gmail mobile app as well as Outlook – and believe me, it is not trivial. There are also some good tools she developed to get some automation at work.

tip #3: Be ready, save templates

Too many times I’ve found myself writing the code for pretty much similar templates. Do a list for yourself with screenshots and dummy “Lorem Ipsum” text and save it. It takes time to write those HTML templates, and especially to run tests over all browsers and email clients. I’ve made some mistakes, so you won’t need to make the same ones. Here are 2 templates I wrote and tested over the most popular clients:

  1. 2 columns template
  2. 1 column template

More tips:

  • Follow the CSS rules each email client supports
  • Be mobile and Outlook oriented
  • use the <!– [if mso] > tags for outlook
  • Use ‘align’ attributes instead of ‘float’, specially when working with tables
  • some email clients ignore the cellspacing attribute a
    simply add to the table those styles:
    style=”border-collapse: separate; border-spacing: 10px 50px;
  • See resources attached below