Last updated
Signature Design Best Practices
- Keep the signature width under 600px to avoid horizontal scrolling on mobile
- Use table-based layouts, not CSS flexbox or grid, for Outlook compatibility
- Always use inline styles — email clients strip external stylesheets
- Link phone numbers with tel: URIs for one-tap calling on mobile
- Use hosted image URLs rather than embedded images to keep email file size small
- Test the signature in Outlook, Gmail, and Apple Mail before rolling out company-wide
The Email Signature Generator on TechConverter.me produces clean, cross-client-compatible HTML signatures with all the elements you need, along with step-by-step instructions for adding them to every major email client.
Examples
Example 1: Standard Professional Signature
A typical professional signature with name, title, company, and contact details:
<table cellpadding="0" cellspacing="0" border="0"
style="font-family: Arial, sans-serif; font-size: 14px; color: #333333;">
<tr>
<td style="padding-right: 16px; border-right: 2px solid #0066cc; vertical-align: top;">
<img src="https://company.com/logo.png" alt="Company Logo" width="80" height="80"
style="display: block; border-radius: 50%;">
</td>
<td style="padding-left: 16px;">
<p style="margin: 0; font-size: 16px; font-weight: bold; color: #111111;">
[Full Name]
</p>
<p style="margin: 4px 0; color: #555555;">Senior Software Engineer</p>
<p style="margin: 4px 0; color: #0066cc; font-weight: bold;">Acme Corporation</p>
<p style="margin: 8px 0 4px;">
📞 <a href="tel:+15551234567" style="color: #333333; text-decoration: none;">
+1 (555) 123-4567
</a>
</p>
<p style="margin: 4px 0;">
✉️ <a href="mailto:[email]" style="color: #0066cc;">[email]</a>
</p>
<p style="margin: 4px 0;">
🌐 <a href="https://company.com" style="color: #0066cc;">company.com</a>
</p>
</td>
</tr>
</table>
This table-based layout renders consistently in Outlook, which does not support flexbox or CSS grid in email signatures.
Example 2: Signature with Social Media Icons
Adding social media links with icons is a common requirement. The generator produces linked icon images:
<table cellpadding="0" cellspacing="0" border="0" style="margin-top: 8px;">
<tr>
<td style="padding-right: 8px;">
<a href="https://linkedin.com/in/[username]" target="_blank">
<img src="https://cdn.techconverter.me/icons/linkedin.png"
alt="LinkedIn" width="24" height="24" style="display: block;">
</a>
</td>
<td style="padding-right: 8px;">
<a href="https://github.com/[username]" target="_blank">
<img src="https://cdn.techconverter.me/icons/github.png"
alt="GitHub" width="24" height="24" style="display: block;">
</a>
</td>
<td>
<a href="https://twitter.com/[username]" target="_blank">
<img src="https://cdn.techconverter.me/icons/twitter.png"
alt="Twitter" width="24" height="24" style="display: block;">
</a>
</td>
</tr>
</table>
Example 3: Minimal Signature for Internal Emails
A lightweight signature for internal team communications:
<table cellpadding="0" cellspacing="0" border="0"
style="font-family: Arial, sans-serif; font-size: 13px; color: #555555;">
<tr>
<td>
<p style="margin: 0; font-weight: bold; color: #222222;">[First Name]</p>
<p style="margin: 2px 0;">Engineering Team</p>
<p style="margin: 2px 0;">
<a href="tel:+15559876543" style="color: #555555; text-decoration: none;">
ext. 4321
</a>
</p>
</td>
</tr>
</table>