Outlook (client-side) signatures get too large margins in Gmail mobile apps

Problem:

When someone opens a message from you in Gmail for Android or Gmail for iOS, the signature you added to the message in Outlook for Windows (client-side signature) is displayed incorrectly with too much whitespace between individual signature elements.

Solution:

Modern signatures with photos, banners, etc. use the HTML language – the same one that lets you create websites. Usually, a signature’s design is based on a table (with borders that are invisible to the end-user) to ensure all the elements are aligned properly.

Unlike web browsers which process HTML websites in a more or less standardized way, processing in email clients might differ from one to another. On sending a message, Outlook for Windows processes it in its specific way, adding, for example, the paragraph tag pair (<p></p>) to each ‘invisible’ table cell. When the message is opened in a mobile Gmail app, the app applies its own style to the paragraph tags, adding a margin of 14 pixels. As a result, spaces between individual elements of your signature become greater than intended and your signature layout is broken.

To avoid the problem, you need to proactively insert the paragraph tag pair to each table cell and set the margin value to, for example, 0.1px for each opening paragraph tag (<p>). Setting the value to 0 is not an option, because Outlook will remove such a value from the code. Proceed as follows:

1. Sign in to the signature management app and open the affected Outlook (client-side) signature template by hovering your mouse over the signature preview in the apps main window and clicking Edit signature. You can achieve the same result by selecting your signature and proceeding to the Design step in the pane that opens (Fig. 1.).

Fig. 1. Opening the Outlook (client-side) signature which is displayed incorrectly in the Gmail mobile apps.

2. In our sample signature, there are five table cells, as highlighted in Fig. 2. In other words, we’ll need to add the paragraph tag pair (<p></p>) with the margin value (0.1px) to our code five times.

Fig. 2. Five table cells which our sample signature consists of.

3. To access the HTML code of the signature, click the HTML source button on the editor’s ribbon (see the top portion of Fig. 2.).
4. Once the HTML source code view window opens, you need to locate the opening tag of each table cell. A good way to do it is to use the Find text option on the ribbon and type <td into the search box – that way each opening tag will be highlighted and thus easy to locate (Fig. 3.).

Fig. 3. Highlighted table cell opening tags – as expected, there are five opening tags in our signature.

5. In fact, <td is not the entire table cell opening tag. It is followed by a number of style definitions and ends with the > character (greater than/angle bracket), as shown in Fig. 4.

Fig. 4. Highlighted table cell opening tags – they’re quite long.

6. Now that you know where a table cell opening tag actually ends, you can copy and insert the following code immediately after it but before the <span> tag (that follows), as shown in Fig. 5. Repeat it for each table cell.

   <p style="margin: 0.1px">

Fig. 5. Inserting the code between each table cell opening tag and <span> tag.

7. Next, locate table cell closing tags by using Find text once again and typing </td> (Fig. 6.).

Fig. 6. Highlighted table cell closing tags.

8. Now comes the simpler part: copy the code below and insert it directly before each </td> tag, as shown in Fig. 7.

   </p>

Fig. 7. Inserting the code directly before each table cell closing tag.

9. Click the Apply & Close button to save the changes you’ve made in the code and close the HTML source code view window.
10. Next, save the template in the editor by clicking Apply & Close once again.
11. Finally, remember to click Save & Publish for the changes to take effect.

As of now, your Outlook (client-side) signature should be displayed properly in Gmail for Android and Gmail for iOS, as shown in the right portion of Fig. 8. below.

Fig. 8. Signature with too big margins (left) and signature with correct margins after applying the solution above (right).

If your other Outlook signatures are displayed incorrectly in the Gmail mobile apps as well, repeat the same procedure for them.

See also:

• Good practices for preparing an email signature
• Images in email signatures – linked or embedded?