How to create a responsive signature

Problem:

You would like to create a responsive signature, which displays correctly on mobile and desktop mail clients.

Solution:

In most cases, a responsive signature consists of blocks that are displayed differently depending on the end device: in one line on desktop clients and in one column on mobile devices (Fig. 1.).

Fig. 1. Differences in the signature appearance on desktop and mobile email clients.

A responsive signature of the type presented above includes two DIV elements that have the float: left; property assigned:

<DIV style="float: left;">
            BLOCK A
</DIV>
<DIV style="float: left;">
            BLOCK B
​</DIV>

<!-- clears the alignment -->
<DIV style="clear: both;">​</DIV>

Thanks to this property, the two elements appear in one line on the desktop clients. On mobile devices and narrow screens these elements collapse, making the signature easy to read.

However, Microsoft Outlook does not support the float: left; property, hence parts of the signature will always be collapsed. To work around this problem, you can use a table that will be displayed only in Outlook, by using these special directions:

<!--[if gte mso 9]>
    <table><tr><td>
<![endif]-->
<DIV style="float: left;">
            BLOCK A
</DIV>
<!--[if gte mso 9]>
    </td><td>
<![endif]--><DIV style="float: left;">
            BLOCK B
​</DIV>
<!--[if gte mso 9]>    
</td></tr></table>
<![endif]-->

<!-- clears the alignment -->
<DIV style="clear: both;">
​</DIV>

The sample code below shows a signature created using the above-mentioned method. The results are illustrated in the figures.

<!--[if gte mso 9]>
    <table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
            <strong>{Display name}</strong><br>Phone {Phone}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{E-mail}</a>
</div>
<!--[if gte mso 9]>
    </td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
            <strong>Company.com</strong>
​</div>
<!--[if gte mso 9]>    
</td></tr></table>
<![endif]-->

<!-- clears the alignment -->
<DIV style="clear: both;"> ​</DIV>

Fig. 2. A sample responsive signature viewed in Outlook.

Fig. 3. The same signature viewed on iPhone.