I edited this html-only Codepen template to make an email signature for my office.
I tried to import my HTML email signature into Outlook — I opened my index.html file in Chrome, selected my code with Cmd + A, copied it with Cmd + C, and pasted it into the Outlook signature interface with 'Keep Source Formatting' selected — using supposedly the correct method to import html email signatures into Outlook with Mac OS. My signature looked all messed up and squished, like my index.html file from the /src folder.
My email signature in Outlook:
I tried the copy/paste method with the template's index.html file and there are some style changes from Chrome to Outlook, but the spacing remained solid.
Template email signature in Outlook:
Is there something I'm missing with my code? The only difference I can tell between my signature and the template is the fact that I have the entirety of my email signature in <table>, while the template only uses a table for the logo/social icons section. TYIA!
index.html code
Screenshot of my email signature's Chrome display:
<html lang="en">
<body style="color:#063059; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; font-family:Arial, Helvetica, sans-serif; line-height:1.5;">
<table width="350" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tbody>
<tr>
<td width="75">
<a href="https://example.com/"><img src="https://i.imgur.com/Bh7eDEg.png" width="65" height="64.5" alt="State of Illinois Seal"/></a>
</td>
<td width="275" heigh="100%">
<p>
<span style="font-weight:700; font-size: 16px;">John Smith </span><span style="font-size: 16px; font-weight:700">(He / Him)</span>
<br class="Apple-interchange-newline">
<span style="font-size:15px; font-weight:700;">Digital Media Specialist</span>
<br class="Apple-interchange-newline">
<span style="font-size:15px; font-weight:700;">Office of My Boss</span>
</p>
</td>
</tr>
<tr>
<td colspan="2" style="border-top: 1px solid black;">
<p>
<span style="font-size:14px;">Office: <a style="color:#1C6AB3; padding-right:6px;" href="tel:15162843300"><span> 516-284-3300</span></a><span aria-hidden="true">| </span><span style="font-size:14px; padding-left:2px;">Cell: <a style="color:#1C6AB3;" href="tel:15162843300"><span> 516-284-3300</span></a>
<br class="Apple-interchange-newline">
<span style="font-size:14px; padding-right:2px;">1234 W Monroe St </span><span aria-hidden="true">| </span><span style="font-size:14px; padding-left:2px;">Chicago, IL 60661</span>
</span></span></p>
</td>
</tr>
<tr>
<td colspan="2">
<a href="https://www.facebook.com/moreycreative"><img src="https://i.imgur.com/p9Od0MU.png" alt="Facebook Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
<a href="https://www.linkedin.com/company/moreycreative"><img src="https://i.imgur.com/fE7B4qo.png" alt="LinkedIn Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
<a href="https://www.instagram.com/moreycreative/"><img src="https://i.imgur.com/NRTdN9c.png/" alt="Instagram Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
<a href="https://twitter.com/MoreyCreative"><img src="https://i.imgur.com/aAi8ZLc.png" alt="Twitter Icon" width="25" height="25" style="padding-right:6px; vertical-align: middle;"></a>
<a href="https://www.moreycreative.com/inbound-and-down"><img src="https://i.imgur.com/kfXPUuX.png" alt="Podcast Microphone Icon" width="25" height="25" style="padding-right:3px; vertical-align: middle;"></a>
<span aria-hidden="true" style="vertical-align: middle;">| </span>
<a style="vertical-align: middle; color:#1C6AB3; font-weight:700; font-size: 14px;" href="https://example.com/">example.com</a>
</td>
</tr>
<tbody>
</table>
</body>
</html>
