If you use Expert mode to create your Letsignit signature model, here are some of our best practices and advice to improve your model:
*Please note: your HTML code may be interpreted differently depending on the email client. The advice and tips below will allow you to achieve the model desired.
The general construction:
Insert your personal information and images in a table and apply a height/width
The maximum dimensions recommended for a banner are 600 x 200 px.
Don’t add the tags <head></head>; some tags don’t serve a purpose and are deleted by certain email clients.
Avoid using tags such as <em> and <strong>. Preferably, put a style in order to avoid the font and/or size from being modified in Outlook.
The attributes:
Surround each attribute with a double { } symbol as shown: {{NAME OF ATTRIBUTE}} please refer to the "display name" column under user attributes tab
Full name - name.fullName
Family name - name.familyName
Surname - name.givenName
Title - title
Service – department
Landline - phone.primary
Mobile phone - phone.mobile
Street - streetAddress
City – city
Zip code - postalCode
State or departement – state
Country - country
Company - companyName
Webpage – website
Email - email
To avoid the appearance of white lines in the case where the attribute is not filled, move the <br> at the end of the top line, to the prefix of the attribute in the line below.
Specify before each link the following protocol:"https://" so that each external link is active on all navigators
Because the styles of the links in the <a> tags are sometimes removed (example: the color of the link), it is necessary to add the <span> tag and put the link style within the <span> and surround it by the <a> tag.
Add the attribute name {{Email}} after the href in the tag <a></a> to make your emails clickable (and mostly to control the color of the link)
To clear the underscore of a URL link, surround the text with: <spanstyle="text-decoration: none"></span> in addition to text-decoration none in the link style in the <a> tag.
Applying a style:
Always consider the style in-line to limit the risks of misinterpretation by certain email clients.
Put the style in-line in the tags <table>, <td>, <span>, <p>
Always specify a font color, when it is not specified, certain email clients force a color by default (dark gray for example with Hotmail)
Indicate the hexadecimal values for the colors- Easily find your hexadecimal code by using a converter
Insert a height-line in the style to manage the interlines in the same cell
To limit the risks of misinterpretation, use the font systems or groups of font systems (the first will have the advantage)
The images:
Resize the images before storing them to avoid having deformed images when arriving to the receiver’s email box.
Specify the height and width of the image within the tag <img>
Verify the name of the images, they should not contain a space.
Tips :
Avoid blank if there is no information filled for a variable : use IF tag {{%if%}} {{%endif%}} including the <br> which is checking if there is an information filled
Please find example below :
{{name.fullName}} <br>
{% if phone.primary %}T. {{phone.primary}} <br> {% endif %}
{{title}} <br>
{{phone.primary}}
Insert prefix or suffix : use IF tag {{%if%}} {{%endif%}} which is checking if there is an information before or after the name of the variable
Please find example below :
{{name.fullName}} <br>
{% if phone.primary %}T. {{phone.primary}}{% endif %} <br>
{{title}}<br>
{{phone.primary}}
Below are a few useful links:
Converter RGB > Hexadecimal: https://www.w3schools.com/colors/colors_converter.asp
Converter pixel > point: http://www.endmemo.com/sconvert/pixelpoint.php
#HTML #Signature #Expert mode