Total Tool

The answer is the savant would never be drawn in by a divisive, spurious and click-baity article title.

This post documents a little left field coding trick for ‘responsive’ padding in email. I used it recently in a template promoting a notorious popular tool.

I have been coding emails mostly using the hybrid coding approach for a while but have come across other less verbose approaches that can render well - all be it with slightly different pros and cons.

One such email was one of Email On Acid’s simple free sample templates. It has a few limitations/inconsistencies in android gmail but uses very simple css and generally rendered pretty well so I tried a very similar approach when producing a set of modules for an email templating system.

I discovered I could use in line percentage padding which is quite useful and works nicely on mobile and older android OS (e.g. gmail app and non gmail account holders using gmail app) to maintain a more satisfactory elastic layout.

The problem is most versions of Outlook don’t seem to cope well with percentage padding. However, they can be targeted through some conditional css with a slight manipulation in the way it is written.

CSS

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
td.cellpad {
    padding-left: 34px !important;
    padding-right: 34px !important;
}
</style>
<![endif]—>
        

HTML

 <td class="cellpad" style="padding-top: 9px; padding-bottom:9px; padding-left: 5%; padding-right: 5%;" >

        

The result is Outlook ends up referencing the stable static values for padding which its turd in a box rendering engine can cope with.

The trick to making this work is the padding needs to be written in long form for Outlook to respond to the conditional statement. Also there can only be a single class declared in the element otherwise Outlook will overlook the class being referenced. So the following wouldn’t work:

HTML

 <td class="cellpad anotherclass" style="padding: 9px 5% 9px 5%;" >

        

It makes padding a bit more verbose but overall you get something that seemed to render well across versions of Android IOS gmail plus most popular clients and was generally less code heavy than a hybrid coded version.

The full code for the final email can be found here.