All Collections
Designer
Expert Mode : Advice and tips to improve your signature model in the Expert mode
Expert Mode : Advice and tips to improve your signature model in the Expert mode

Discover Letsignit’s advice to optimize the results of your HTML code

Georges avatar
Written by Georges
Updated over a week ago

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:

#HTML #Signature #Expert mode

Did this answer your question?