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