Adding custom html email signature in web Outlook

Question

So I have seen some tutorials (there are not many on this topic) on how to add custom html email signature in outlook (web). So I go to settings, and then compose and reply, and there i should inspect the page and paste there HTML code. here is my code: https://codepen.io/sonjaknezevic/pen/MWxwjza

`

    <div class="subcontainer">
        <div class="subcontainer-item">
            <span class="name">John Doe</span>
            <span class="role">Founder &amp; CEO</span>
        </div>
        <div class="subcontainer-item">
            <span class="contact">Email: [email protected]</span>
            <span class="contact">Mob: +300 00 000 000</span>
            <span class="contact">Website: <a class="link"  href="#">company.com</a></span>
        </div>
    </div>
</div>

`

Which looks like this when i open it in browser

Now I have copied and pasted code where I should in the inspect part, and saved the signature, but when I try to send an email it doesn't look as it should, here is also the image of how it looks when I want to send an email:

I have found other way around tho but it is not the solution i quite need i had to compromise some looks but this way it works. I have made a table template in Microsoft Word and filled it with what i need, but I need poppins font family and so on...

I would really appreciate it if someone could help! Also one more question, is there a way to make this dynamic? Since it is for company and I would have manually to go to every employee to set this signature up in web outlook for their names and so on.

Answer 1

Because most of the email clients are using the old version of the HTML and CSS rendering technique, so that you have to use the HTML table as layout in emails. Please find the below link to how you can achieve that step by step: https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a