Creating responsive signatures in the On-Premise Solutions

Relevant Products: Signature Manager Exchange Edition | Signature Manager Outlook Edition | Signature Manager Office 365 Edition | Mail Disclaimers | Template Editor

Scenario

The signature design requires to be different sizes whether it is a desktop computer, laptop, mobile device or tablet.

Resolution

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

Desktop Signature

Mobile Signature

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

Insert your logo in the first div tag like below, add a width to the first div tag around 10px larger than your logo.

Insert the required fields into the second div 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.

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

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

Go back to the Source  tab, here will begin to add the If statements.

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.

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

Next, add the following below the second div tag

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