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:
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.
The method described below does not work for client-side signatures because Outlook breaks the HTML code of a signature on sending a message. Unfortunately, we do not have any control over this Outlook behavior.
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.
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.
Related products: | CodeTwo Email Signatures for Office 365 1.x, CodeTwo Exchange Rules 2007 4.x, CodeTwo Exchange Rules 2010 3.x, CodeTwo Exchange Rules 2013 2.x, CodeTwo Exchange Rules 2016 1.x, CodeTwo Exchange Rules 2019 1.x, CodeTwo Exchange Rules Pro 2.x |
Categories: | How-To |
Last modified: | 2021-12-17 |
Created: | 2016-05-23 |
ID: | 552 |