As you might have heard, Drop Calc is a new layout method for creating responsive emails. I invented it while I was working on one of the articles of the Modern HTML Email Tutorial. I am really happy that the community finds it to be useful, and I feel honored that I had the chance to talk about it at Litmus Live London last week.
I am going to publish a short article in next two weeks, recapping my experiences from the conference. Also, I want to include the video of my presentation, so hopefully it will be published by then. If you are interested in hearing about my experiences at the greatest email related conference, please subscribe below.
Drop Calc as a General Fallback Technique
A few days before the conference, my presentation was finished already. I rehearsed it in front of my colleagues. They provided me incredible feedback. Thank you guys. I also presented it to Jaina Mistry from Litmus, and her ideas were also very valuable.
BUT the following happened...
On the way to the airport I was reading my emails. One of our customers asked if it's possible to create equal height columns. Our usual answer is NO with capital letters, because if you stack those columns on top of each other on mobile devices, there will be lot of empty space, so you will have to scroll a lot.
But wait... Why don't we apply Drop Calc to the height property? - I asked myself.
Doing that can allow you to have equal height columns on desktop, and those columns will collapse on mobile, meaning that you won't have those disturbing empty spaces.
On top of that I thought that I could apply it to other properties as well.
I made some experiments a few hours before my presentation, and it turns out that Drop Calc method can be used on any property which can be calculated and which has an attribute version. (So we can fall back to something.)
Because of this, I decided to change my well-rehearsed talk. I hope it was worth it.
Recap of the Drop Calc method
Before talking about the new experiments, let's recap the most important parts of the Drop Calc method for creating responsive layouts or HTML emails.
There are two very, very important observations:
- The first is that the CSS
calcfunction is not supported in every email client. - The second is that there is a specific order of importance when it comes to width of tables: attribute < class < inline style < !important in class
Let's say that we use !important only in media queries.
Now, if you put calc in inline style, the following things can happen:
- if the email client supports the
calcfunction- and if it's a desktop client, then the calc in the inline style will be applied (which is the desktop version)
- and if it's a mobile email client, then the media query will be applied (which is the mobile version)
- if the email client does not support the
calcfunction- and does not support the style tag (thus classes), then the value of the width attribute will be applied (which is the mobile version)
- and it supports the style tag (thus classes), then the width in the class will be applied (which is the desktop version)
We are very lucky, because the desktop email clients which don't support the calc function support the style tag. The mobile email clients which don't support the calc function don't support the style tag either (so the attribute will be applied).
This way we can create robust responsive layouts which will be correctly rendered on almost every email client. If you want to check out a thorough example, please read my previous article.
Besides that, I suggest you to read my article about how to create wider than 600px email layouts, which also builds on the order of importance I mentioned earlier.
Experimenting With Height & Drop Calc
As I wrote previously, one of our clients wanted to have equal height columns on desktop and those columns had to collapse on mobile, so no unnecessary empty space would be shown when the columns are stacked on top of each other.
So let's apply the same principles to the height property of a table. It means that you have to add for example, calc(400px) in inline style and provide fallbacks in class for old desktop clients and in the height attribute for old mobile clients.
For mobile clients, the fallback is actually nothing. You don't need to put anything in the attribute, because we want to get back the default behaviour when we are on old mobile clients. It means that the default height (auto) will be applied.
For old desktop clients, you need to define the height in class without the calc function.
I created this example a few hours before my presentation at Litmus Live London (2017):
As you can see, there are three very famous people in this email from Litmus. But what's more important is that on desktop, our columns have the same 400px height.
Since it's an advanced topic I will let you, dear reader, discover the details of this experiment on GitHub.
If you are not that familiar with the Drop Calc method, you definitely should read the original article first.
Check out the Litmus previews.
Experimenting With Font Size & Drop Calc
After finishing the experiment with the height, I thought that we could use it for other numeric properties. I created another experiment with font size.
Luckily we have the good old <font> tag which has the size attribute. It means that there is an attribute to fallback to. We can use the font-size CSS property in inline style with the calc function, and we can use the same property without the calc function in class.
This way we have two different things to fallback to, which is the basis of the Drop Calc method.
I created the following experiment which you can check out on GitHub:
As you can see, the main goal is to increase the font size on mobile devices (also on old Androids). It definitely works, but there is one issue: you can't set the line-height with attributes! If anyone knows how to solve that problem, pleas let me know in the comments section below.
If you are okay with the fact that you won't be able to set the line-height on old Androids, then it's worth it to try the Drop Calc method with the font size property.
Check out the Litmus previews.
Further Opportunities
As you can see from the previous examples, Drop Calc is a general fallback technique. If you apply it to the width property, you can create robust responsive layouts for HTML Emails.
You can apply it to any numeric property which has an attribute version to fallback to. In this article you have read about two applications: height and font-size. Besides these you can think about any numeric property, for example the border width.
If you don't have an attribute to fall back to, that is not necessarily a problem. As you have seen in the height experiment, sometimes the attribute fallback can be omitted.
I was also thinking about using inherited values instead of attributes. This would mean that you could define some properties on a parent element, and you could override it with inline style (and calc) in a child element... This way you might be able to define fallbacks, but it's only an idea. I'm very curious if someone can come up with something like this.
My last thought is that you can play around with other CSS functions which are not supported everywhere. I'm not that familiar with CSS functions, but it would be awesome to create a fallback technique similar to Drop Calc, but with non-numerical values. (What about rgb, rgba or attr?)
