Comprendre les règles importantes

Afin de garantir le bon fonctionnement de votre e-mail, certains bonnes pratiques et recommandations doivent être prises en compte.

Editeur Actito

Certaines bonnes pratiques sont strictement enforcées par l'éditeur HTML Actito.

De ce fait, il ne sera pas possible d'importer un fichier HTML ou de le coder directement si les contraintes suivantes ne sont pas respectées.

Ces contraintes s'appliquent également lors de la réalisation d'un template personnalisé par nos équipes.

Contraintes business

Pas de liens relatifs

Les liens définis par l'attribut href d'une balise HTML <a> ne peuvent pas être insérés sous forme de liens relatifs.

Tous les liens doivent être des URLs absolues, commençant par http(s)://, ou une personnalisation syntaxiquement correcte (${variable}).

Il est possible de combiner une personnalisation avec un chemin relatif, par ex. : "${variable}/fe/actito-documentation-client/campaign/en/ACTITO_Documentation.html" (voir Mettre en place les liens dans vos e-mails pour plus d'infos), mais les liens purement relatifs ne sont pas autorisés, pas plus que les URLs sans http(s):// (par ex. : "www.actito.com").

images/download/attachments/650477689/image2021-5-5_16-20-44.png

Exemple de code erroné
<a href="www.actito.com">Bad link</a>

Maximum 255 caractères dans le titre des liens

L'attribut HTML title d'un lien (balise <a>) ne peut contenir que maximum 255 caractères.

L'attribut title a pour rôle d'apporter une information supplémentaire à l’intitulé du lien. Il s'agit pas d'une description exhaustive. Il se doit donc d'être concis, sans quoi il empêchera l'import d'un fichier HTML.

images/download/attachments/650477689/image2021-5-5_16-20-10.png

Exemple de code erroné
<a title="Zijdezacht satijn, borduurwerk met mysterieuze bloemen: ontdek onze nieuwe lingeriecollectie ge&#239;nspireerd op de verrukkingen van de Tuin van Eden. Trek deze weelderig bedrukte neglig&#233; aan en laat de delicate visnetten uw rondingen sublimeren. Bij ons draait alles rond orde en schoonheid, luxe, rust en wellust." href="https://www.actito.be/nl_BE/bh-s-hot-now-essentials-1" target="_blank">

Pièce jointe manquante

Comme expliqué dans la fenêtre de l'import HTML, les images utilisées dans les e-mails peuvent être référencées

  • soit via des liens absolus (images hébergées sur un serveur tiers) et dans ce cas il suffit de charger un fichier HTML seul

  • soit en incluant un dossier contenant les images dans un fichier zippé contenant également le fichier HTML (un par langue)

Dans le deuxième cas, les images peuvent être référencées de manière relative (ex. src="nom_Dossier/nom_Image.jpg").

Si l'HTML fait référence à une image qui n'est pas dans le dossier image (ou dans un autre dossier, ou nom de l'image/du dossier incorrect), vous rencontrerez une erreur de type "pièce jointe manquante" avec la référence de l'image manquante.

images/download/attachments/650477689/image2021-8-18_16-32-55.png

Exemple de code erroné
<img src="img/640x125.png" width="640" border="0"
style="width: 640px; display: block; border: 0;" data-actito-img="" class="act-img">

Contraintes CSS

Pas de liens relatifs

Les feuilles de style externes référencées dans les balises HTML <link> ne peuvent pas être définies sous forme de liens relatifs.

Tous les liens doivent être des URLs absolues, sans quoi la ressource sera considérée comme absente.

images/download/attachments/650477689/image2021-5-5_16-21-11.png

Exemple de code erroné
<link rel="stylesheet" href="/build/actito-style.aaae10e3.css">

Astuce

Les images utilisées dans l'e-mail peuvent bien être référencées sous forme de lien relatif et stockées dans un dossier du fichier zippé contenant l'HTML (voir règle précédente).

En revanche, il s'agit bien ici des feuilles de style dans les règles CSS, où seuls les liens absolus sont autorisés.

Erreur de format d'une règle CSS

Les règles CSS présentes dans les balises <style> doivent être formattée correctement. Une règle CSS consiste en un sélecteur et une déclaration. Le sélecteur pointe vers un élément HTML, la déclaration contient le nom de la propriété et la valeur associée (ex.: property: value;).

Si une règle CSS n'est pas valide, le token erroné sera signalé par le validateur Actito, et les possibilités de notation valides seront présentées.

A savoir

Le numéro de ligne en erreur signalé se rapporte à la balise <style> dans laquelle se trouve la règle erronée, pas à l'ensemble de l'HTML.

S'il y a plusieurs balises <style> dans le <head> de l'HTML, les lignes sont comptées séparément pour chacun d'entre eux.

Dans l'exemple suivant, le td à la ligne 21 (ce cette balise <style> spécifique) .root.one-cols>tbody>tr>td>{width:660px} ne doit pas être fermé et provoque une erreur.

La syntaxe correcte est .root.one-cols>tbody>tr>td{width:660px} .

images/download/attachments/650477689/image2021-5-5_18-50-51.png

Exemple de code erroné
<style type="text/css" id="editor_required_emailwidth" ee-render="inline">.email-full-width{width:100%}
.email-body{min-width:100%}
.email-width{max-width:660px}
.row{max-width:660px}
.row.one-cols{max-width:auto}
.row .row{max-width:100%}
.row .row .row-inner{border-width:0;padding:0 0}
.row .row .row-inner.ee_basketcontent,.row .row .row-inner.ee_productcontent{padding:10px}
.ee_dynamic .row-inner.element-pad{padding:0 10px}
.col-inner{border-width:0;padding:0}
.sub-sub-col-inner{border-width:0;padding:0}
.element-pad{padding:10px}
.element-pad.root-element-pad{padding:10px 20px}
.el-pad{padding:10px}
.el-pad.root-el-pad{padding:10px 20px}
.row-inner{border-width:0;padding:0 10px}
.row-inner.ee_basketcontent,.row-inner.ee_productcontent{padding:10px}
.element-bord{border-width:0}
.el-bord{border-width:0}
.one-cols>tbody>tr>td>.no-stack-column,.one-cols>tbody>tr>td>.stack-column{width:100%;min-width:100%;max-width:640px}
.root.one-cols>tbody>tr>td>{width:660px}
.two-cols>tbody>tr>td>.stack-column{max-width:50%;min-width:100%;width:50%}
.two-cols>tbody>tr>td>.no-stack-column{min-width:50%;max-width:50%;width:50%}
.three-cols>tbody>tr>td>.stack-column{max-width:33.333%;min-width:100%;width:33.333%}
.three-cols>tbody>tr>td>.no-stack-column{min-width:33.333%;max-width:33.333%;width:33.333%}
.four-cols>tbody>tr>td>.stack-column{max-width:25%;min-width:100%;width:25%}
.banner-padding{padding:0 0}
.hero-image-padding{padding:0 0}
.background-image-txt-mso{width:680px;height:175px;background-position:center center!important}
.bg-img-txt-width{max-width:500px}
.bg-img-txt-text{padding:0 0}
.col-font-reset,.ee_element,.font-reset{min-width:100%}
.button-wrapper{min-width:auto}</style>

Contraintes de parsing

Erreur de type "caractère inattendu"

Un caractère inattendu au milieu des balises HTML peut bloquer le rendu de l'email.

Un caractère inattendu peut-être compris à la fois comme :

  • un caractère en trop dans le code. Par exemple, 2 doubles guillemets l'un à la suite de l'autre peuvent décaler le parsing de l'email.

  • à l'inverse, des guillemets manquants vont également décaler le parsing de l'e-mail.

  • ou un caractère manquant dans le code. Si dans le fragment href="https://www.actito.com", le signe "=" est manquant, le guillemet situé juste après le href sera considéré comme inattendu.

images/download/attachments/650477689/image2021-8-18_15-44-51.png

Cet exemple indique une erreur suite à un caractère erroné à la ligne 243. La colonne indique la position du caractère en question dans la ligne.

On remarque que le signe "=" est manquant après le href, ce qui fait que la notation du lien n'est pas valide.

Exemple de code erroné
<h2 align="center" style="color: #000000;font-family: Arial;font-size: 20px;mso-line-height-rule: exactly;line-height: 114%;font-weight: bold;font-style: normal;text-transform: none;margin-top: 0.5em;margin-left: 0;margin-right: 0;margin-bottom: 0.5em;text-align: center;"><font color="#ffffff"><a data-order-id="28" target="_blank" style="color: #FFFFFF;font-family: Arial;font-size: 18px;font-weight: bold;font-style: normal;text-transform: none;text-decoration: none;" href"https://actitoservices.krxd.net/click_tracker/track?kxconfid=spqyu44mp&kxcampaignid=cliente&clk=${URL1}">CALCULA TU PRECIO</a> </font></h2>

Attribut en doublon

Un attribut en double dans une balise HTML peut bloquer le rendu de l'e-mail.

images/download/attachments/650477689/image2021-8-18_16-0-42.png

Dans l'exemple suivant, on constate que la balise img comporte deux fois l'attribut title, ce qui provoque une erreur.

Exemple de code erroné
<a href="https://actito.com/go/171365e3a997376117" target="_blank"><img align="center"
border="0"
class="center autowidth fullwidth"
src="https://img.actito.com/repo-images/product/345846/01.jpg"
alt="Actito Easy, le vitrage facile à nettoyer" title="Actito Easy, le vitrage facile à nettoyer" style="outline: none;
-ms-interpolation-mode: bicubic; clear:
both;height: 100%; float: none; width: 100%;
max-width: 1100px; display: block;
border-radius: 6px;"title="Image"
width="168" height= "137"/></a>

Compatibilité e-mail

Certaines pratiques sont à proscrire de vos HTMLs car elles ne sont pas compatibles avec une partie ou tous les clients e-mail utilisables par vos profils.

Ainsi, les éléments suivants ne sont pas supportés :

Liste des interdits car non supportés par tous les clients mails

  • L’utilisation de javascript

  • L’utilisation de feuilles de style externes

  • L’utilisation de formulaires

  • Les images au format png, bmp, tiff, pjpg

  • L’utilisation de Flash

  • L’utilisation de sons

  • L’utilisation des Map Area

Liste des éléments supportés par certains clients mails

  • L’attribut ‘Rowspan’ sur les ‘td’

  • Les images de fond (‘background-image’)

  • Le tag ‘style’ dans le head