The Drop Calc Method to Create Responsive HTML Emails

by Gyula Németh

Originally I was going to write an article about the different techniques which you can create responsive HTML emails with. While I was researching the existing methods, I figured out a new way to create responsive HTML emails which works in almost all of the email clients.

I call it The Drop Calc Method.

There are only a few clients where this technique does not work correctly - which I write about in the drawbacks section -, so I decided to share it with the community. I hope email coders will find it useful. If you find any drawbacks or a way to improve it, please let me know in the comments section below.

The main inspiration was Rémi Parmentier's FAB four technique which uses the CSS calc() function. This function is not supported in old browsers and email clients. I thought that this could be an opportunity and could benefit from this somehow. You may have guessed that indeed we can.

The Basic Idea

So what happens if we put width: calc(50%) in an inline style?

Well, if the email client supports it, then the calculated value will be applied. If it does not support it, then something else will be applied, for example, the width="100%" attribute. (This very scenario happens with those email clients which strip out the style tag from the HTML.) It means that we can support old Android & Gmail clients, but it's still not enough.

Another scenario is that the style tag is supported, but the calc function is not. In this case, the width: calc(50%); in the inline style will also be dropped, so the width from the class will be applied.

This is why I call it The Drop Calc Method.

The basic rule in HTML & CSS is, that an attribute on a tag is weaker than the same property in a class, which is weaker than the same property in inline style which is weaker than the !important property in the class. This rule is not true when we are talking about images, but it's a good rule of thumb when we are dealing with width and tables.

attribute < class < inline style < !important in class

Combining it with the fact that some clients drops the width: calc() we can actually support many, many email clients.

Let's take width as an example, which actually will be the basis of our multi-column pattern.

<!DOCTYPE html>
<html>
<head>
	<style>
		.drop-calc {
			width: 50%;
		}

		@media all and (max-width: 599px) {
			.drop-calc {
				width: 100% !important;
			}
		}
	</style>
</head>
<body>
<table width="100%" class="drop-calc" style="width: calc(50%);">
	<tr>
		<td width="100%">
			The Drop Calc Method
		</td>
	</tr>
</table>
</body>
</html>

If you think about it, you will figure out what I summarized in the table below.

Email client type width attrib width prop in class width: calc() in inline style !important width prop in class
Modern clients winner >= 600px winner < 600px
Old desktop clients winner
Old Android / Old Gmail App winner
Web based without style * winner
If you use a gte IE9 browser. On IE8 or older, the mobile view will be applied. *

The table above covers most of the cases, but there are a few more things which we have to keep in mind.

  • If an email client does not support the calc function and the style tag, then the mobile version will be displayed.
  • Also, if it does support the calc function but does not support the style tag (and media queries), then the desktop version will be displayed.
  • If an email client does not support the calc function but supports the style tag and does not support media queries, then the desktop version will be displayed.

The rules above will be applied no matter you check it on a desktop or a mobile client. I will give you more details in the drawbacks section.

The Drop Calc Responsive Multi-Column Pattern for HTML Emails

In this section I will give you a simple example for a two column pattern, where the columns' widths are equal. You will be able to use this pattern generally for any kind of multi-columns. You can add extra columns and you can even create asymmetric layouts.

Let's jump into it and check the example below:

<style>  
  .col50 {
    width: 50%;
  }
  
  @media all and (max-width: 599px) {
    .reorder {
      width: 100% !important;
    }
  }
</style>

<!--[if gte mso 9]>
    <style>
        .ol {
          width: 100%;
        }
    </style>
<![endif]-->

...

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td width="100%" valign="top" style="min-width: 100%;">
      <!--[if gte mso 9]><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="50%" valign="top"><![endif]-->
      <table class="ol col50 reorder" width="100%" align="left" style="width: calc(50%);" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="100%" valign="top">
            ###LEFT_CONTENT###
          </td>
        </tr>
      </table>
      <!--[if gte mso 9]></td><td width="50%" valign="top"><![endif]-->
      <table class="ol col50 reorder" width="100%" align="left" style="width: calc(50%);" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="100%" valign="top">
            ###LEFT_CONTENT###
          </td>
        </tr>
      </table>
      <!--[if gte mso 9]></td><</tr></table><![endif]-->
    </td>
  </tr>
</table>

The basis of this pattern is the table align method. It means that we have two tables in another table. The inner tables are aligned to the left or right, so they line up next to each other.

I tweaked it with two things. The first is that I used width="100%" and width: calc(50%) in the style tag for the inner tables (columns). It means that the email clients which do not support the style tag will apply the attribute, so the table will be 100% wide. Old Androids and old Gmail clients fall into this category. Most of the webmails on modern browsers will apply calc(50%).

Older email clients which support the style tag will apply the .col50 class. IE based Outlooks and Lotus Notes (version >= 8) fall into this category.

The final category we have to deal with is Word based Outlooks. As I observed, these email clients don't support the align attribute on tables. Luckily we can use conditional comments for these email clients.

I added a wrapper table with the conditional comments, but thanks to it, we have to stretch the tables within to 100% on Word based Outlooks. We can do it with conditional CSS.

You can observe that the first class on the columns is .ol. You have to define it in the conditional CSS part, so it will be only defined on Word based Outlooks. Thanks to the fact that these Oulooks only apply the first class on elements, the other classes will have no effect on Word based Outlooks. Yay! This is the second drawback that we could exploit!

UPDATE: Rémi Parmentier reviewed my article and revealed that the conditional style tag is not needed, and the code will still stay functional.

Why? Because Word-based Outlooks apply the first class only. If the class is not defined, then the width from the attribute will be applied.

Thanks Rémi for the feedback!

You can also reverse the order of the cells so you will be able to create zig-zag columns described in a previous chapter of this series. First, you have to change align="left" to align="right" on the column tables. This will reverse the order on all of the desktop clients except Word based Ourlooks. For those, you have to add dir="rtl" to the conditional wrapper table and dir="ltr" to its tds to compensate the effect of the previous dir setting.

If you don't want the columns to be stacked on small screens, then use a simple table instead of this pattern.

I included examples for the zig-zag columns and the non-stacking columns in the example later.

The Drop Calc Responsive Multi-Column Pattern with Centered Containers

If you want to use the Drop Calc Multi-Column Pattern, then you will have to use it together with the following centered container column, otherwise it will just collapse on old Androids. The pattern below follows the very same logic which was described previously.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Calc</title>
    <style>
      .container600 {
        width: 600px;
      }
      
      .col50 {
        width: 50%;
      }
      
      @media all and (max-width: 599px) {
        .container600 {
          width: 100% !important;
        }
        .reorder {
          width: 100% !important;
        }
      }
    </style>
    <!--[if gte mso 9]>
        <style>
            .ol {
              width: 100%;
            }
        </style>
    <![endif]-->
  </head>
  <body>
    <center>
      <!--[if gte mso 9]><table width="600" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
      <table class="container600" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:calc(600px);margin: 0 auto;">
        <tr>
          <td width="100%" style="text-align: left;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100%;">
              <tr>
                <td width="100%" style="min-width:100%;">
                  ###CONTENT###
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!--[if gte mso 9]></td></tr></table><![endif]-->
    </center>
  </body>
</html>

I don't include a detailed description here, I think you will be able to figure out the details based on what you have read already.

If you replace ##CONTENT## with the pattern from the previous section, you will already have a working example.

A Complete Example of the Drop Calc Method

There are four multi-columns in this example. The first has two columns and the rest has three. In the three column part you can see that the multi-column in the middle is reversed. The last one is will not be stacked on mobile devices.

You can check out the full source code of this step on Github.

If you check the desktop and the mobile view, you can see what to expect on different email clients. I used the two major email testing services: Litmus and Email on Acid.

Except Lotus Notes 7, every result looks great on the Litmus tests.

On Email on Acid tests there are some other - exotic - email clients which display the template in a weird way. The worst example for that is T-Online.de. Poor email coders who have to support that email client!

Drawbacks

If you checked out the tests above, you might have realized that this method does not work on some of the email clients. Based on the tests there are few email clients on which it's a disaster:

  • Lotus Notes 7 and older
  • T-Online.de
  • Naver

There are three email clients where you will see the mobile version although you should see the desktop version:

  • SFR.fr
  • Telstra/BigPond

Besides the ones above, every web based email client which strips the style tag from your HTML will display the mobile version when you use IE8 or older. An example for this is Mail.ru.

Similarly, when a webmail does not support the style tag, but you check it in a modern browser on your mobile device, then the desktop version will be displayed.

The biggest problem is, that the Gmail App on iOS showed the desktop version. It seems that calc does work on iOS. It does not work on old Androids and that was one of the core concept of this method. If you need to support the iOS Gmail App, then you can use the FAB Four technique in inline style, since there calc is supported.

Gmail announced that they will support the style tag and media queries. On my Nexus5, my Gmail App already supports media queries and I hope it will be the same with iOS Gmail App as well. When it happens the Drop Calc method will be enough to support all of the major email clients. Until then, you have to combine it with inline FAB Four.

If you know any other drawbacks of this method, please let me know in the comments section.

Summary

The basic idea of the Drop Calc method is that there are some email clients that don't support the calc CSS function. The basis for the Drop Calc responsive columns pattern is the table align method.

If you put for example width: calc(50%) in the inline style then these email clients ignore it. Older Androids apply the width attribute instead. If you use width="100%" then the actual element is stretched across the screen on these email clients.

Desktop email clients that support the style tag (Outlooks, Lotus Notes) will use the width that you declared in a class. You need to use conditional comments to fix the layout in Word-based Outlooks.

We have already started to implement this method in our email HTML generator's experimental mode. If you register to our app you will be able to play around with it in the near future.

Also, you will be able to use it if you integrate our editor.

I really hope that this method will continue to evolve and will be useful to the community. The whole idea came when I was reading about the FAB Four technique, so thank you Rémi Parmentier for the inspiration!