Articles in this section

See more

Creating responsive signatures in the On-Premise Solutions

Avatar
Exclaimer Support
  • Updated
Follow

Related Products: Signature Manager Exchange Edition | Signature Manager Outlook Edition | Template Editor

WARNING! From 1st April 2021 Exclaimer will no longer be renewing any Software Maintenance Agreement (SMA) for Mail Disclaimers.

Please be assured that the Exclaimer Support team will provide support until your SMA is active.

However, we recommend that you contact the Exclaimer Sales team to discuss your requirements for an upgrade to Signature Management Exchange Edition or Exclaimer Cloud - Signatures for Exchange.

Scenario

You wish to have your signature design in different sizes, whether it is for a desktop computer, laptop, mobile device or tablet.

Resolution

Warning: The method described below is not 'Responsive' in terms of the current web standards. It simply creates a signature that would change the layout based on the window size - this may not work on all mobile devices and mail clients.

This article explains how to set this up and it requires good knowledge of HTML code.

Also, please see below a table of the tried and tested mobile devices and mail clients.

 

Clients / Devices Working
Android Mail ✔
G-Mail ×
G-Mail for Android ✔
G-Mail for iOS ✔
Apple Mail for iOS ✔
Apple Mail for Mac ×
Outlook 2016 ✔
Outlook for Android ✔
Outlook for iOS ✔
Yahoo ✔

To create responsive signatures within the On-Premise solutions, you will need to use Microsoft's IF MSO statements. This means that if the mail client does not support these statements, it will display the 'Mobile' version of the signature template.
Example:

Desktop Signature

image_001.png

Mobile Signature

image_002.png

Note: All work done here is done within the Source tab.

image_011.png

  1. Create the base for the signature template using <div> tags. You will need to use style="float:left" to keep these sections in line with each other:

    image_004.png

  2. Insert your logo into the first div tag as displayed below and add width to the first div tag around 10px larger than your logo:

    image_003.png

  3. Insert the required fields into the second div tag and add a width value to this. You may need to adjust this as you go - to ensure you have enough space for the signature. Create return lines using <br/> tags:

    image_005.png

  4. Apply styles to the fields as required by clicking on each field and using the Properties window located on the right-hand side:

    image_006.png

  5. Once you have completed this, you should be able to go to the preview and see the signature appearing similar to this:

    image_007.png

  6. Now, go back to the Source tab. Add the IF statements here.

  7. Begin by adding the following code above the first div tag in your signature template. Change the width to be the required size for your logo.

    <!--[if gte mso 9]> <TABLE class=ImprintUniqueIDTable style="WIDTH: 100%; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0> <TBODY><TR><TD style="WIDTH: 60px; VERTICAL-ALIGN: top;"><![endif]-->


    image_008.png

  8. Add the following code below the first div tag but above the second tag:

    "border: solid 1px #808080; background-color: #efefef; border-radius: 5px; padding: 10px; font-family: 'Courier New', Courier, monospace;"> Insert code here </div>

    image_009.png

  9. Next, add the following below the second div tag:

    <!--[if gte mso 9]></TD></TR></TBODY></TABLE><![endif]-->

    image_010.png

    Note: Once this has been completed, you shouldn't see any difference in the signature template. It should look exactly as you left it, in the preview of the design. This is because Exclaimer template designer supports the <div> tags in the signature and should not have any issues. However, when you save the template and start testing, you will start to notice that some clients will display the signature in a line and some will display them stacked.

    The clients that display them stacked - are the mobile devices, which are unable to understand the <!–[if gte mso 9]> and the <div style="float: left"> rules which causes them to stack on top of each other.

Related articles