Outlook (client-side) signatures get too large margins in Gmail mobile apps
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.
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:
- Log in to the signature management app and open the affected client-side signature template by clicking Edit signature on the Design tab (Fig. 1.).
- 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.
- 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.).
- 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.).
- 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.
- 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">
- Next, locate table cell closing tags by using Find text once again and typing </td> (Fig. 6.).
- Now comes the simpler part: copy the code below and insert it directly before each </td> tag, as shown in Fig. 7.
- Click the Apply & Close button to save the changes you’ve made in the code and close the HTML source code view window.
- Next, save the template in the editor by clicking Apply & Close once again.
- Finally, remember to save the signature rule in the signature management app for the changes to take effect.
As of now, your 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.
If your other Outlook signatures are displayed incorrectly in the Gmail mobile apps as well, repeat the same procedure for them.