c32hedge
c32hedge

Reputation: 820

How do I prevent an html signature from wrapping in Gmail for Android?

I need to finalize a company-wide signature form and want to make sure it looks good on most devices. The code below works well in Outlook (PC, Mac, iPhone, Android), Yahoo (iPhone, Android), and Gmail on iPhone. However, the lines in the address still wrap on Gmail for Android.

I have tried several suggested hacks I found for Gmail-specific problems that sounded similar, but with no success or observable change:

Does anyone know of a workaround for Gmail on Android to keep it from wrapping? Or a better solution? Surely other companies have developed signatures that look good on all platforms :)

Here is my current code (no hacks applied):

<html>
  <head>
    <meta charset="utf-8">
    <style>
      <!--
        table {
          border: none;
          padding: 0;
          margin: 0;
        }
        p {
          line-height: 1.4;
          font-size: 9.0pt;
          font-family: Arial, sans serif;
          letter-spacing: .1pt;
          color: black;
        }
        p.emphasis
        {
          font-weight: bold;
          margin-bottom: 1.0em;
        }
        span.name {
          color: #ED1C24;
        }
        .content {
      padding-left: 5px;
      white-space: nowrap;
    }
      -->
    </style>
  </head>
   <body>
    <table>
      <tr>
        <td>
          <a href="http://www.google.com"><img src="https://i.sstatic.net/P0eTy.gif" alt="Company Logo" width="325" height="81"></a>
        </td>
      </tr>
      <tr>
        <td class="content">
          <p class="emphasis"><span class="name">John Doe</span> |
            Chief Awesomizer<br/>
            Big Ideas Department</p>
          <p>a | 1234 Big Long Street Name S-11 Anytown, USA 55555<br/>
            o | 333.123.4567 &nbsp;&nbsp;&nbsp;f | 333.000.0000 &nbsp;&nbsp;&nbsp;m | these lines are wrapping on Gmail for Android!<br/>
            e | <a href="mailto:[email protected]">[email protected]</a> &nbsp;&nbsp;&nbsp;w | <a href="http://www.google.com">www.google.com</a><br/>
        </td>
      </tr>
     </table>
  </body>
</html>

Screenshot of Desired Rendering: iPhone 6S and elsewhere

Screenshot of Gmail on Android: Galaxy 3, also observed on Galaxy 6

I am creating these signatures in Microsoft Outlook 2010 (our company standard--any proposed solution must work sending from Outlook to be accepted) by rendering the html in IE 11, selecting all, and pasting it into the Edit Signature window (new E-mail Message -> Signature Dropdown -> Signatures... -> New -> Edit Signature). Note that pasting from Chrome did not bring over the image correctly.

Upvotes: 1

Views: 2176

Answers (0)

Related Questions