Knowledge Base

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.).

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

Before you start

This article requires basic HTML and CSS knowledge. If you're not familiar with specific tags or properties, you can always consult an online guide such as W3Schools.com.

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>

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]-->

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>
<span style="clear: both;"></span>
<!--[if gte mso 9]>    
</td></tr></table>
<![endif]-->

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

iPHoneResponsiveSignature
Fig. 3. The same signature viewed on iPhone.

Important

If you want to add another DIV element and place it below the two DIV elements described in this article, make sure that the new DIV container includes the clear: both; CSS property. Otherwise, it will appear beside the other elements instead of below them.