docGuide d`intégration de courriels HTML
download 
Plainte Transcription
Guide d`intégration de courriels HTML
2016 Guide d’intégration de courriels HTML Téléphone sans frais : 1-866-395-7540 [email protected] L’UTILISATION DU HTML POUR L’ENVOI DE VOS COURRIELS privilégie l’usage des courriels HTML pour les envois marketing. En effet, le HTML permet d’organiser graphiquement l’information de manière à ce qu’elle soit structurée et plus agréable à l’œil. Le problème est que les logiciels avec lesquels les destinataires consultent leurs courriels sont variés et supportent le HTML différemment. De ce fait, l’affichage des courriels HTML est difficile à contrôler. Le guide suivant s’adresse aux intégrateurs HTML afin qu’ils puissent adapter leur code et ainsi obtenir un affichage uniforme pour tous les destinataires. Par contre, à cause des limitations techniques, le codage des courriels HTML ne va pas le sens du Web sémantique, c’est-à-dire d’utiliser les feuilles de style et structurer l’information pour la rendre le plus accessible possible. Ces courriels pourraient être difficiles à lire par des gens qui font bloquer par défaut l’affichage des images de leurs courriels et par ceux qui utilisent des logiciels de lecture spécialisés à cause de limitations physiques. Donc, ces courriels doivent être accompagnés d’une version textuelle. vous permet d’inclure à l’intérieur d’un même courriel une version HTML et texte. De cette façon, la version texte s’affiche seulement si le logiciel de courriels du destinataire ne supporte pas le HTML ou est configuré pour un affichage texte. Plusieurs destinataires lisent leurs courriels en utilisant des comptes courriels Web gratuits, tels que Hotmail, Yahoo Mail ou Gmail. Ces services affichent les courriels dans le navigateur Web de l’usager. Comme le code HTML du courriel est affiché à l’intérieur de celui de la page, cela tronque une partie du code du courriel afin qu’il n’entre pas en conflit avec le code de la page, rendant ainsi l’affichage du message difficile. Parmi le code tronqué, notons: Tout ce qui se trouve dans entre les balises <head></head>, effaçant ainsi toutes les feuilles de style internes (CSS) ou externes. La balise <body>, incluant tous ses attributs. Les JavaScripts. RECOMMANDATIONS POUR UNE INTÉGRATION SANS FAILLE Afin d’uniformiser l’affichage de vos courriels pour tous vos destinataires, nous avons dressé une liste de 14 recommandations qui, une fois appliquées, optimiseront vos courriels de façon à ce qu’ils soient vus tel que vous les avez créés par tous les comptes de courriels disponibles. Et pour ceux qui désireraient encore plus de fiabilité, offre une validation Litmus (tests sur chaque type de logiciel de courriels disponible) pour un coût minime. Héberger les images sur un serveur web Afin de diminuer le poids du courriel pour l’usager et la bande passante lors de l’envoi, il faut héberger les images sur un serveur Web et y référer par un URL. Cela évite que le courriel soit identifié comme un pourriel à cause des fichiers attachés. Téléphone sans frais : 1-866-395-7540 [email protected] Utiliser des adresses absolues Comme le message est lu à l’extérieur de la page Web, tous les liens HTML doivent être définis par des URL absolus et non pas relatifs afin d’assurer leur validité. Le code doit être valide selon le W3C Vérifier le code avec le validateur du W3C (http://validator.w3.org). Un code invalide diminue l’uniformité de l’affichage et augmente les chances que le courriel soit rejeté par un filtre antipourriel. vous offre une extension gratuite qui vous permet de tester votre code lors de la création de vos courriels. L’extension est disponible dans la section ‘marché’ de votre application. Éviter les feuilles de style (CSS) Les feuilles de style ne devraient pas être utilisées car le code entre les balises <head></head>, là où est située la feuille de style, est tronqué par les services courriels Web gratuits et n’est pas toujours bien supporté par certains logiciels de courriels. Chaque élément du texte doit être défini par un style (inline): <table width=”400” cellspacing=”0” cellpadding=”0”> <tr> <td style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; lineheight: 150%;color: red”> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Vivamus ut sem. Fusce aliquam nunc vitae purus.</p> </td> <td style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; texttransform:uppercase; color: black”>Vivamus ut sem. Fusce aliquam nunc vitae purus. </td> </tr> </table> Dans le même ordre d’idées, il est préférable de faire la mise en page à l’aide de la balise <table> pour obtenir un affichage uniforme. Les styles utilisés pour la mise en page ainsi que le positionnement étant généralement mal supportés par les logiciels de courriels. Ne pas définir d’attributs à la balise <body> Cette balise est généralement supprimée par les services de courriels Web gratuits. Ainsi, il faut éviter de donner des attributs tels que bgcolor ou background car ceux-ci seront ignorés. Si vous souhaitez définir une couleur ou une image de fond, il est préférable de créer une balise <div> qui englobe tout le code et applique les attributs désirés à cette balise. Définir une taille pour le texte Hotmail utilise par défaut la taille de texte 11 px, Yahoo Mail 12 px et Gmail 16 px. Ainsi, il est préférable de définir une taille de texte si vous désirez que l’affichage soit uniforme. Téléphone sans frais : 1-866-395-7540 [email protected] Définir les valeurs des attributs ALT et TITLE pour chaque image Pour les destinataires ayant des connexions à basse vitesse, l’absence d’attributs alt et title peut faire que votre courriel se retrouve dans la poubelle avant même que les images soient téléchargées. Certains destinataires font bloquer par défaut l’affichage des images de leurs courriels. Dans ces cas, ceux-ci doivent activer manuellement l’affichage des images. Ainsi, il est préférable de limiter l’utilisation d’images lors de la création de l’aspect esthétique du courriel car si celles-ci contiennent des informations importantes, elles pourraient ne pas être affichées. Définissez des valeurs pour les attributs alt et title. Ces derniers s’afficheront à la place des images, ce qui facilitera la compréhension de votre message et incitera les destinataires à activer l’affichage des images. Utiliser des balises <BR> plutôt que <P> Le nombre de retour de lignes généré par la balise <P> varie selon les logiciels de courriels utilisés. Ainsi, il est préférable d’utiliser la balise <BR>. Éviter les JavaScripts, DHTML et Flash Les JavaScripts sont désactivés dans la plupart des cas. De plus, ils peuvent augmenter les chances que votre courriel soit considéré comme un pourriel par les filtres. Donc, il est préférable de ne pas les utiliser. Le DHTML utilise une combinaison de JavaScripts et CSS, des éléments qu’il ne faut pas utiliser. Tout comme les JavaScripts, le Flash est généralement désactivé par les logiciels de courriels. Éviter les formulaires Les formulaires à l’intérieur des courriels sont généralement mal supportés. Par conséquent, il est préférable d’envoyer les gens les compléter sur un site Web. Par contre, si vous tenez à leur faire parvenir les formulaires par courriel, il est important de fournir une version alternative. Définir une largeur maximale Comme le logiciel de lecture de courriels affiche un menu qui occupe une partie de la largeur de la page, il est préférable de diminuer la largeur du courriel HTML par rapport à celle d’une page Web. Pour qu’un courriel s’affiche au complet dans un écran 1280 x 1024, la largeur doit être limitée à 900. Dans le cas d’un écran 1024 x 768, la largeur doit être limitée à 750 px. Comme nous ne savons pas la résolution de notre récipiendaire, la largeur optimale globale est de 550 px. Téléphone sans frais : 1-866-395-7540 [email protected] Avoir une version web de votre message Certains logiciels de courriels ont toujours de la difficulté à lire les messages HTML. Ainsi, faire une version Web de votre courriel avec un lien vers celui-ci au haut de votre message permettra à l’usager, d’afficher correctement votre message dans un navigateur. vous offre cette possibilité en insérant la balise [SHOWEMAIL] dans votre code HTML. Cette balise redirigera votre abonné vers une version web de votre courriel qui seras générée Automatiquement par . Voici un exemple de code à insérer: <td align="left" style="padding:10px 0 10px 10px; font--family:Arial, Helvetica, sans--serif; font--size:11px; color:#888888;">Difficulté à voir ce courriel? Consultez la <a href="[SHOWEMAIL]" style="color:#545454;">version en ligne.</a></td> Permettre le désabonnement Par la loi, vous êtes obligés d’inclure un lien de désabonnement pour chacun de vos courriels envoyés. a crée une balise [UNSUBSCRIBE] qui redirige l’abonné vers la page de désabonnement lorsque ce dernier clique le lien que vous aurez préalablement mis à son intention s’il désire ne plus recevoir de courriels de votre part. Voici un exemple de code à insérer: <td align="left" style="padding:20px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:11px;color:#888888;">Vous préférez ne plus recevoir de nouvelles de notre part? <a href="[UNSUBSCRIBE]" style="color:#545454;">Cliquez ici</a> pour vous désabonner.</td> Mettre votre adresse physique dans votre message À l’instar du lien de désabonnement, vous êtes également tenus par la loi d’indiquer votre adresse physique sur chacun de vos courriels. La balise [CLIENTS.ADDRESS] fait ce travail pour vous. Vous pouvez l’utiliser dans votre code HTML de la même façon que pour la balise du désabonnement. Voici un exemple de code à insérer: <td style="border-top:1px solid #d6d6d6; background-color:#f6f6f6; font-family:Arial, Helvetica, sansserif; font-size:12px; color:#666666; line-height:17px; padding:15px 0 15px 20px;"> <br />[CLIENTS.ADDRESS]<br /></td> Téléphone sans frais : 1-866-395-7540 [email protected]
