How to ensure the html email signature looks good on different email programmes?

Question

I have an issue with an email signature I created in HTML with inline styling. When I paste the ready signature into Outlook the signature looks completely wrong (image is bigger than it should be, the icons are missing and more...), whereas when I copy it into Apple's Mail it looks perfectly fine. Could you please help me identify the reason for it?

I tried to adjust the code but it yielded no satisfactory results.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stopka </title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://kit.fontawesome.com/2c0654d9c2.js" crossorigin="anonymous"></script>
</head>

<body>
  <table style="font-family: helvetica; font-size: 9px; width: 400px;">
    <tr>
      <td rowspan="6" style="width: 150px; height: 150px; padding-right: 10px;"><img style="width: 150px; height: 150px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/logo.jpg"></td>
      <td style="color: #081A45; font-size: 18px;">Lorem Ipsum</td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td style="padding-top:10px;"><img style="width: 10px; height: 10px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/phone.svg"> <a style="color: black; text-decoration: none;" href="mailto: ">+44 123 123 123</a></td>
    </tr>
    <tr>
      <td><img style="width: 10px; height: 10px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/envelope.svg"> <a style="color: black; text-decoration: none;" href="mailto: ">email@email.eu</a></td>
    </tr>
    <tr>
      <td id="contact-end"><img style="width: 10px; height: 10px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/globe.svg"> <a style="color: black; text-decoration: none;" href="">www.google.com</a></td>
    </tr>
    <tr>
      <td style="color:#081A45; font-weight: bold;">Większość moich klientów pochodzi z rekomendacji. Bardzo dziękuję za każde Państwa polecenie.</td>
    </tr>
  </table>
  <hr style="width: 400px; margin-left: 0px; border: 0.5px solid #081A45;">
  <table style="font-family: helvetica; font-size: 9px; width: 350px;">
    <tr>
      <td>Google jest partnerem:</td>
    </tr>
    <tr>
      <td><img style="width: 40px; height: 40px; margin-right: 10px;" src=""> <img style="width: 40px; height: 40px; margin-right: 10px;" src=""> <img style="width: 40px; height: 40px; margin-right: 10px;" src=""> </td>
    </tr>
  </table>
</body>

</html>

Impossible to tell. You have an external style sheet that likely does not exist on the client. Also you load an external fontawesome which likely will be blocked by an email program - what are you even using it for?. Instead of SVG, use unicode for your phone, envelope and globe — mplungjan, May 11 '23 at 09:37
The reason for this is plain and simple: Browsers display HTML and CSS still different from E-Mail-Clients. Please google for this topic, there are a lot of articles and tutorials on this out there. You can use https://www.caniemail.com/ to search for whats safe to use in E-Mails and whats not. — rx2347, May 11 '23 at 17:55
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, May 11 '23 at 17:56

score 0 · Answer 1 · answered May 12 '23 at 00:15

As others have commented, HTML email is not like designing for browsers. Use caniemail to see what is available.

More specifically, you cannot have linked styles. First, inline your styles. You should only need styles in the head for things like media queries.

Scripts and webfonts don't work in (many) email clients. So instead of fontawesome, use a graphic (jpg/png) or a unicode icon.

For image widths in Outlook, use the width and height attributes. I.e. <img width="15" height="15" style="..." />. You can have different width and height parameters in the style="..." part for everything else (e.g. for doing width:100% if you needed to make it responsive). Outlook just looks at the attributes, but the style part will override it, if you need something different for everything else.

How to ensure the html email signature looks good on different email programmes?

1 Answers1