Writing your own HTML
Every variable Signed understands, plus the handful of HTML rules that keep signatures intact in mail clients.
- Last updated
- 8 minute read
- Signatures
- Advanced
Signatures that survive Outlook are closer to a print layout than a web page. Tables, inline styles and no scripts. The HTML view gives you the markup Signed will actually send.
Variables
Anywhere you write a variable in double braces, Signed replaces it with the value for the person being signed. Empty values produce nothing at all, so optional fields do not leave gaps.
| Variable | What it fills in | Falls back to |
|---|---|---|
{{display_name}} | The person's full name | Their email address |
{{first_name}} | First name | Nothing |
{{last_name}} | Last name | Nothing |
{{email}} | Their email address | Nothing |
{{job_title}} | Job title | Nothing |
{{department}} | Department | Nothing |
{{phone}} | Office or main phone | Nothing |
{{mobile}} | Mobile number | Nothing |
{{company}} | Company name | Settings, company defaults |
{{website}} | Website | Settings, company defaults |
{{address}} | Office address | Settings, company defaults |
{{linkedin}} | LinkedIn URL | Nothing |
{{twitter}} | X handle or URL | Nothing |
{{photo_url}} | Profile photo | Initials, if the designer is using them |
{{logo_url}} | Company logo | Settings, organisation logo |
Tip: Wrap optional rows in a table row and test with someone who has no mobile number. Signed removes empty values but it does not remove the row they sat in, so a row that exists only for a mobile will collapse rather than disappear.
The markup rules that matter
- Build the layout from a table with
role="presentation", not from divs. Outlook renders tables reliably and lays out divs differently. - Put styles inline on every element. Mail clients strip
<style>blocks, and class names mean nothing to them. - Use
cellpadding="0" cellspacing="0"andborder="0"on the outer table so Outlook does not add its own spacing. - Set fonts in full, for example
font:bold 15px Arial. Individualfont-familyandfont-sizerules behave differently between clients. - Keep images under about 200 KB and never use an image for text that matters. Many people read email with images off.
- No scripts, no forms, no video. They are removed or ignored everywhere.
<table cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td style="font:bold 15px Arial;color:#0b1020">{{display_name}}</td>
</tr>
<tr>
<td style="font:13px Arial;color:#152c45">{{job_title}}, {{company}}</td>
</tr>
<tr>
<td style="font:12px Arial;color:#3a3f52">T {{phone}} | M {{mobile}}</td>
</tr>
</table>Testing your HTML
Use the preview beside the editor for the layout, then send yourself a real email. There is no substitute for seeing it in the client your customers use.
- Preview in Signed looks right
- Checked in a real email you sent yourself
- Checked with images switched off
- Checked on a phone
- Long email address does not wrap badly
Related articles
- Using the signature designerWhat every control in the designer does, and the order that gets you to something good quickly.
- Signatures look wrongLayout, images, fonts and spacing: what actually causes each one, and what to change.
- Photos, logos and imagesWhere each image comes from, what happens when one is missing, and how to keep signatures light.
Something here out of date, or a step that did not work? Tell us and we will fix the article. Every page is checked against the running product, so corrections are welcome.