Email Signature Issues

[HUnderwood1]

Despite following all suggestions and actioning previously posted issues my email signature is failing to show as it should (links have outlines or are cropped and images don't appear) in the following areas...

When setting up the signature in outlook...

After sending the signature recipients see it wrong in both outlook and gmail.

GMAIL-

 

OUTLOOK -

 

see below source code-

<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr><td style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr><td><h2 color="#000000" class="name__NameContainer-sc-1m457h3-0 jxbGUj" style="margin: 0px; font-size: 16px; color: rgb(0, 0, 0); font-weight: 600;"><span>Hannah</span><span>&nbsp;</span><span>Underwood</span></h2><p color="#000000" font-size="small" class="job-title__Container-sc-1hmtp73-0 ifJNJc" style="margin: 0px; color: rgb(0, 0, 0); font-size: 12px; line-height: 20px;"><span>Graohic Designer</span></p><p color="#000000" font-size="small" class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 12px; line-height: 20px;"><span>Veris Strategies</span></p></td><td width="15"><div></div></td><td color="#EE60A0" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 1px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-left-width: 1px; border-left-style: solid; border-left-color: rgb(238, 96, 160);"></td><td width="15"><div></div></td><td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr><td style="vertical-align: bottom;"><span color="#EE60A0" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(238, 96, 160);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#EE60A0" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(238, 96, 160);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:07305 018463" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>07305 018463</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr><td style="vertical-align: bottom;"><span color="#EE60A0" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(238, 96, 160);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#EE60A0" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(238, 96, 160);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="mailto:hannah.underwood@veris-strategies.co.uk" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>hannah.underwood@veris-strategies.co.uk</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr><td style="vertical-align: bottom;"><span color="#EE60A0" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(238, 96, 160);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#EE60A0" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(238, 96, 160);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="//www.veris-strategies.co.uk" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.veris-strategies.co.uk</span></a></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td height="30"></td></tr><tr><td color="#EE60A0" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 96, 160); border-left-width: medium; border-left-style: none; border-left-color: currentcolor; display: block;"></td></tr><tr><td height="30"></td></tr><tr><td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr><td style="vertical-align: top;"><img src="https://drive.google.com/uc?id=1rbOTTKisskqFls99ogDNxw_PKsQmVo4F" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut" style="display: block; max-width: 130px;"></td><td style="text-align: right; vertical-align: top;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="display: inline-block; vertical-align: -webkit-baseline-middle; font-size: small; font-family: Verdana;"><tbody><tr style="text-align: right;"><td><a href="https://twitter.com/verisstrat" color="#EE60A0" class="social-links__LinkAnchor-sc-py8uhj-2 hBVWAh" style="display: inline-block; padding: 0px; background-color: rgb(238, 96, 160);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png" alt="twitter" color="#EE60A0" height="24" class="social-links__LinkImage-sc-py8uhj-1 hSTSwA" style="background-color: rgb(238, 96, 160); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://www.linkedin.com/company/veris-strategies/mycompany/" color="#EE60A0" class="social-links__LinkAnchor-sc-py8uhj-2 hBVWAh" style="display: inline-block; padding: 0px; background-color: rgb(238, 96, 160);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#EE60A0" height="24" class="social-links__LinkImage-sc-py8uhj-1 hSTSwA" style="background-color: rgb(238, 96, 160); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://www.instagram.com/verisstrat/?customCtaColor=%2523EE60A0&amp;customCtaTextColor=%2523ffffff&..." color="#EE60A0" class="social-links__LinkAnchor-sc-py8uhj-2 hBVWAh" style="display: inline-block; padding: 0px; background-color: rgb(238, 96, 160);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" color="#EE60A0" height="24" class="social-links__LinkImage-sc-py8uhj-1 hSTSwA" style="background-color: rgb(238, 96, 160); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td height="30"></td></tr><tr><td style="text-align: center;"><span style="display: block; text-align: center;"><a target="_blank" rel="noopener noreferrer" href="https://futurefoodmovement.com/" color="#7075db" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: medium; border-style: none; border-color: currentcolor; display: inline-block; background-color: transparent; color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 1; font-size: 12px; border-radius: 3px;"><img src="https://drive.google.com/uc?id=12-j6C77MqH_G8h2Ztkuu6TRDrwQppIxL" role="presentation" class="cta__CtaImage-sc-sq0d6i-1 jaapdm" style="text-decoration: none; max-width: 728px;"></a></span></td></tr></tbody></table>

[Anton · Accepted solution]

Hi @HUnderwood1, 

a quick inside from the tech side: 
Outlook and GMail are the hardest clients to optimize for. 

Outlook will render emails completly different in the browser than in the "Desktop App". (At least for the most current version. I'd say that the next Desktop version will be better - we'll see

GMail rewrites the code of every email before delivering it to you/reciever and drop everything that is not the most basic HTML+CSS. Unless you have a perfect source code it will - most likely - look "different".

This means: 

• Use HEX instead of RGBA values for colors
• Don't use classes unless they have counterparts in the head-tag
• style-tags that are outside the head-tag will be erased and therefore won't be available
• background-colors on images can lead to unappealing renderings

Try this optimized code:

<table cellpadding="0" cellspacing="0"  style="vertical-align: middle; font-size: small; font-family: Verdana;">
  <tbody>
    <tr>
      <td style="vertical-align: middle;"><table cellpadding="0" cellspacing="0"  style="vertical-align: middle; font-size: small; font-family: Verdana;">
          <tbody>
            <tr>
              <td><h2 color="#000000"  style="margin: 0px; font-size: 16px; color: #000000; font-weight: 600;">Hannah&nbsp;Underwood</h2>
                <p color="#000000" font-size="small" style="margin: 0px; color: #000000; font-size: 12px; line-height: 20px;">Graohic Designer</p>
                <p color="#000000" font-size="small" style="margin: 0px; font-weight: 500; color: #000000; font-size: 12px; line-height: 20px;">Veris Strategies</p></td>
              <td width="15"><div></div></td>
              <td color="#EE60A0" direction="vertical" width="1" height="auto" style="width: 1px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-left-width: 1px; border-left-style: solid; border-left-color: #ee60a0;"></td>
              <td width="15"><div></div></td>
              <td><table cellpadding="0" cellspacing="0"  style="vertical-align: middle; font-size: small; font-family: Verdana;">
                  <tbody>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0"  style="vertical-align: middle; font-size: small; font-family: Verdana;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#EE60A0" width="11" style="display: inline-block; background-color: #ee60a0;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#EE60A0" alt="mobilePhone" width="13" style="display: block; background-color: #ee60a0;"></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td style="padding: 0px;color: #000000;"><a href="tel:07305 018463" color="#000000" style="text-decoration: none;color: #000000; font-size: 12px;">07305 018463</a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0"  style="vertical-align: middle; font-size: small; font-family: Verdana;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#EE60A0" width="11" style="display: inline-block; background-color: #ee60a0;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#EE60A0" alt="emailAddress" width="13" style="display: block; background-color: #ee60a0;"></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td style="padding: 0px;"><a href="mailto:hannah.underwood@veris-strategies.co.uk" color="#000000" style="text-decoration: none;color: #000000; font-size: 12px;">hannah.underwood@veris-strategies.co.uk</a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0"  style="vertical-align: middle; font-size: small; font-family: Verdana;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#EE60A0" width="11" style="display: inline-block; background-color: #ee60a0;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#EE60A0" alt="website" width="13" style="display: block; background-color: #ee60a0;"></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td style="padding: 0px;"><a href="//www.veris-strategies.co.uk" color="#000000" style="text-decoration: none;color: #000000; font-size: 12px;">www.veris-strategies.co.uk</a></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td height="30"></td>
    </tr>
    <tr>
      <td color="#EE60A0" direction="horizontal" width="auto" height="1" style="width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ee60a0; border-left-width: medium; border-left-style: none; border-left-color: currentcolor; display: block;"></td>
    </tr>
    <tr>
      <td height="30"></td>
    </tr>
    <tr>
      <td><table cellpadding="0" cellspacing="0"  style="width: 100%; vertical-align: middle; font-size: small; font-family: Verdana;">
          <tbody>
            <tr>
              <td style="vertical-align: top;"><img src="https://drive.google.com/uc?id=1rbOTTKisskqFls99ogDNxw_PKsQmVo4F" role="presentation" width="130"  style="display: block; max-width: 130px;"></td>
              <td style="text-align: right; vertical-align: top;"><table cellpadding="0" cellspacing="0"  style="display: inline-block; vertical-align: middle; font-size: small; font-family: Verdana;">
                  <tbody>
                    <tr style="text-align: right;">
                      <td><a href="https://twitter.com/verisstrat" color="#EE60A0" style="display: inline-block; padding: 0px; background-color: #ee60a0;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png" alt="twitter" color="#EE60A0" height="24" style="background-color: #ee60a0; max-width: 135px; display: block;"></a></td>
                      <td width="5"><div></div></td>
                      <td><a href="https://www.linkedin.com/company/veris-strategies/mycompany/" color="#EE60A0" style="display: inline-block; padding: 0px; background-color: #ee60a0;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#EE60A0" height="24" style="background-color: #ee60a0; max-width: 135px; display: block;"></a></td>
                      <td width="5"><div></div></td>
                      <td><a href="https://www.instagram.com/verisstrat/?customCtaColor=%2523EE60A0&amp;customCtaTextColor=%2523ffffff&..." color="#EE60A0" style="display: inline-block; padding: 0px; background-color: #ee60a0;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" color="#EE60A0" height="24" style="background-color: #ee60a0; max-width: 135px; display: block;"></a></td>
                      <td width="5"><div></div></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td height="30"></td>
    </tr>
    <tr>
      <td style="text-align: center;"><span style="display: block; text-align: center;"><a target="_blank" rel="noopener noreferrer" href="https://futurefoodmovement.com/" color="#7075db"  style="border-width: medium; border-style: none; border-color: currentcolor; display: inline-block; background-color: transparent; color: #ffffff; font-weight: 700; text-decoration: none; text-align: center; line-height: 1; font-size: 12px; border-radius: 3px;"><img src="https://drive.google.com/uc?id=12-j6C77MqH_G8h2Ztkuu6TRDrwQppIxL" role="presentation" style="text-decoration: none; max-width: 728px;"></a></td>
    </tr>
  </tbody>
</table>

and a Tipp:
create the social icons as a bulletproof-image in a graphic software like photoshop/illustrator with the desired colors and size and use this instead of the generated one.

If you need help with that, I can provide you some images

best, 

Anton

[LumenFlow]

How can I include a jpeg in my signature block?

My problem is similar and I hope much easier. I am trying to insert a JPEG image in my signature block. I go to the Gear, email, signature block and insert the image. It is saved and it is there when I look at my signature block I edited. 

However, when I open a task and create an email, it doesn't have the jpeg banner. I click on the pencil icon to edit my signature block and it won't let me add the jpeg that is saved. 

What are my options? 

[kvlschaefer]

Hi @HUnderwood1,

Thanks for reaching out to the Community and apologies for the delay here!

It looks like our automated spam system accidentally marked your post as spam. This is most likely due to the HTML coding. 

I wanted to invite our subject matter experts to see if they have any advice.

Hi @Anton, @Teun, @LMeert - Do you have any suggestions for @HUnderwood1?

Thank you! 

Best,

Kristen