Problem with html css code email signatures

Question

Hello, nice to greet you community.

I have a problem that I can't solve.

In the company where I work, we use Outlook and Microsoft Azure, they have asked me to create an email signature in HTML, respecting a design that the designer has made for email signatures.

I have managed to replicate the signatures perfectly in html and css, but when adding them to the emails, the design is deformed, and although I have modified the code and css styles several times, I cannot get it to look perfect as in the html file.

I can't find the solution to my problem, since in the email signatures the code included does not look the same as in the html files.

I share the image designed by the designer, and the html files that I have made, in case anyone knows how I can solve my code problem.

Thank you so much!

1- Signature designed in IMAGE

Image of the design: https://meranol.com.ar/wp-content/uploads/2024/firmas/firma%20grande.jpg

2- HTML Design 1

https://meranol.com.ar/wp-content/uploads/2024/firmas/index.html

3- HTML 2 Design

https://meranol.com.ar/wp-content/uploads/2024/firmas/index-copy2.html

4- HTML 3 design

https://meranol.com.ar/wp-content/uploads/2024/firmas/index-copy.html

Answer 1

Hi @Oscar Zalazar

Welcome to our forum!

Does the issue occur on the Outlook desktop client? If so, to further confirm if the issue is more related to Outlook desktop client, please log in to your web mail and do the same operation to check if the issue persists. 

As for the links you provided, I cannot open them, could you provide a screenshot of them? (In order to avoid privacy leakage, please remember to hide your personal information.)

In addition, you can refer to this link to try to add the signature again.

If this does not work, considering font differences and image distortion, it is recommended that please contact the designer to ask for specific fonts and individual pictures, and then add them individually and manually. More information: Create and add an email signature in Outlook - Microsoft Support

Hope it helps! 

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".  

Note: Please follow the steps in our [documentation] to enable e-mail notifications if you want to receive the related email notification for this thread. 

Answer 2

Here are the key changes and considerations:

1. Table-based layout: I've used a table structure that is more reliable across email clients.
2. Inline styles: All styles are inline to ensure they're applied correctly in various email clients.
3. Simplified structure: The layout is simplified while maintaining the essential elements of your design.
4. Web-safe fonts: I've used Arial as the font, with a sans-serif fallback.
5. Responsive considerations: While not fully responsive, this design should adapt reasonably well to different screen sizes.
6. Image URLs: Make sure to replace the image URLs with the actual hosted URLs of your images.
7. Social media links: Add the appropriate URLs to the social media icon links.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif; width: 500px; border: 1px solid #2a6bbb; border-radius: 50px 50px 0 0;">
  <tr>
    <td style="width: 150px; padding: 20px; vertical-align: top;">
      <img src="https://meranol.com.ar/wp-content/uploads/2024/firmas/logo-metanol.png" alt="Meranol Logo" style="width: 110px; height: 110px;">
    </td>
    <td style="padding: 20px; vertical-align: top; color: #2a6bbb;">
      <p style="font-size: 24px; margin: 0;">
        <span style="font-weight: normal;">%%FirstName%%</span>
        <span style="font-weight: bold;">%%LastName%%</span>
      </p>
      <p style="font-size: 18px; margin: 10px 0;">%%Title%%</p>
      <p style="font-size: 12px; margin: 5px 0;">%%UserPrincipalName%%</p>
      <p style="font-size: 12px; margin: 5px 0;">%%MobilePhone%%</p>
      <p style="font-size: 12px; margin: 5px 0;">%%StreetAddress%%</p>
      <p style="font-size: 12px; margin: 5px 0;">%%City%%, %%StateOrProvince%%, %%PostalCode%%, %%CountryOrRegion%%</p>
    </td>
  </tr>
  <tr>
    <td style="padding: 0 20px 20px;">
      <img src="https://meranol.com.ar/wp-content/uploads/2024/firmas/logo-iso.png" alt="ISO Logo" style="width: 70px; height: auto; margin-right: 10px;">
      <img src="https://meranol.com.ar/wp-content/uploads/2024/firmas/logo-pcrm.png" alt="PCRM Logo" style="width: 70px; height: auto;">
    </td>
    <td style="padding: 0 20px 20px; vertical-align: bottom;">
      <a href="#" style="text-decoration: none; margin-right: 10px;">
        <img src="https://meranol.com.ar/wp-content/uploads/2024/firmas/icono-instagram_1.png" alt="Instagram" style="width: 24px; height: 24px;">
      </a>
      <a href="#" style="text-decoration: none; margin-right: 10px;">
        <img src="https://meranol.com.ar/wp-content/uploads/2024/firmas/icono%20linkedin_1.png" alt="LinkedIn" style="width: 24px; height: 24px;">
      </a>
      <a href="#" style="text-decoration: none;">
        <img src="https://meranol.com.ar/wp-content/uploads/2024/firmas/icono%20web_1.png" alt="Web" style="width: 24px; height: 24px;">
      </a>
    </td>
  </tr>
  <tr>
    <td colspan="2" style="height: 15px; background-color: #2a6bbb; border-radius: 15px 0 0 0;"></td>
  </tr>
</table>