Si vous utilisez votre propre code HTML plutôt qu'un modèle Emarsys pour concevoir vos emails, les paramètres de campagnes, préférences email et utilitaires de test sont les mêmes, mais l'éditeur de contenu est différent.
Nous décrivons ici les principales fonctionnalités de l'éditeur HTML et offrons quelques lignes directrices en matière de bonnes pratiques pour créer des emails HTML.
Contenus:
L'éditeur HTML
L'éditeur HTML Emarsys est un éditeur standard avec un certain nombre d'options de formatage disponibles dans la barre d'outils.
Modifier le texte
Vous pouvez jongler entre l'éditeur WYSIWYG et le code source HTML d'un simple clic.
Vous pouvez aussi passer de la version HTML à la version Texte de l'email via les tableaux corresondants.
Pour saisir un lien dans la version texte, procédez comme pour la version HTML. Après avoir inséré une URL, n'oubliez pas d'ajouter une description au-dessus. Ceci s'applique aussi aux liens menant à des formulaires d'inscription et aux pages de fonctionnalités additionnelles.
Lier du texte
Pour insérer un lien soulignant un mot ou une phrase, sélectionnez la chaîne de texte et cliquez sur Insérer le lien. Cela vous mène à la fenêtre Insérer un lien , où vous pouvez définir les options du lien :
- Saisissez une description de lien interne
- Ajoutez le lien à une catégorie de lien (pour analyse et segmentation)
- Décidez quel type de lien est nécessaire. Pour les liens traçables, saisissez l'URL dans le champ correspondant. A partir du menu déroulant vous pouvez sélectionner http ou https (un SSL, "Secure Socket Layer").
Note : Tous les liens ajoutés de cette manière sont traçables, c'est-à-dire que chaque clic sur le lien est compté et affiché dans l'analyse email. Vous pouvez ajouter autant de liens traçables que vous voulez à votre email.
Pour lier un texte à une URL saisie au préalable, cochez Utiliser un lien existant et sélectionnez l'URL à partir du menu déroulant. Ce nom de lien interne demeure le même que lorsque vous avez utilisé ce lien pour la dernière fois (après tout c'est le même URL). Si vous voulez utiliser le même lien mais avec une description de lien différente, répétez les étapes sus-décrites.
Si vous souhaitez utiliser une page d'accueil, cochez Page d'accueil et sélectionnez-en une ou bien créez-en une nouvelle. Pour insérer un lien dans un formulaire d'inscription ou de contact, cochez Formulaires et sélectionnez un formulaire à partir du menu déroulant. La même chose s'applique si vous voulez fournir une fonctionnalité "en parler à un ami" ou de désinscription dans votre email. Veuillez noter que la fonctionnalité En parler à un ami transmet l'intégralité de l'email (et pas juste une section particulière).
Chaque email possède un "lien de navigateur" tout en haut. Cela assure que les contacts dont le service de messagerie est incapable d'afficher en HTML peuvent voir vos emails dans leur navigateur. Ils voient un court texte suivi par un lien vers la version en ligne de l'email. Lorsqu'il clique sur ce lien (ou le copie / colle dans le navigateur), le contact accède à votre email. Si vous voulez ajouter ce texte et le lien (en plus de celui existant en haut de votre email) à l'une des sections, vous devez sélectionner Version en ligneà partir du menu déroulant Fonctions additionnelles .
Si vous voulez ajouter un lien qui ne soit pas traçable, cochez Lien simple et saisissez l'URL dans le champ Insérer une URL , puis cliquez sur Insérer.
Au moment de saisir une adresse email, sélectionnez mailto à partir du menu déroulant et saisissez l'adresse email dans le champ de saisie de texte, puis cliquez sur Insérer.
Liens d'auto-traçage
La fonction Auto Track recherche les hyperliens ajoutés manuellement et les transforme en liens traçables. Cliquez sur Auto Track HTML pou rouvrir une fenêtre où les liens non tracés sont listés.
Tous les liens non-tracés trouvés dans la version HTML sont listés dans la partie supérieure de la fenêtre. Sur la gauche, vous pouvez décider quels liens doivent être convertis en liens traçables. Vous pouvez convertir tous les liens en cochant Sélectionner tout.
Note : Seuls les hyperliens complet (comprenant le préfixe http://) sont listés.
Tous les liens non-tracés trouvés dans la version texte sont listés dans la partie inférieure de la fenêtre. Cliquez sur Tracer pour commencer la conversion. Lorsque vous utilisez fréquemment la fonction Auto Track, les liens que vous aviez tracés avant ne sont plus listés. Si vous hésitez sur un lien, cliquez sur Voir l'emplacement du lien. Ceci ouvre un aperçu de la section en cours où chaque lien listé est mis en relief et identifié par un numéro adjacent (les mêmes nombres que dans la fenêtre Auto Track).
Cochez Vérifier les liens traçables à la sauvegarde, si vous voulez que le système recherche automatiquement les liens pas encore tracés à chaque fois que vous sauvegardez.
Utiliser des emojis
Les emojis ne sont disponibles que dans la ligne d'objet des campagnes HTML personnalisées composées dans l'ancien éditeur. Vous pouvez accéder ici à l'ancien éditeur, sous l'onglet Création de contenu :
Lignes directrices pour les emails HTML
Nous offrons ici quelques bonnes pratiques en matière de conception de contenu et de codage des email HTML. Nombre de ces règles correspondent simplement à l'adhésion aux spécifications HTML 3.2. Nous les avons récapitulées par écrit pour votre confort et que vous puissiez vous y reporter plus tard, de sorte que la création de votre campagne email se déroule aussi fluidement que possible du point de vue de la production.
Développer en HTML pour email nécessite plus de précision et d'adhésion aux lignes directrices que développer du contenu pour des sites Web, puisque le code peut être altérer par différents services de messagerie et sur différents navigateurs Web. Pour vous assurer de bien utiliser du code indépendant es balises spécifiques au navigateur, vérifiez votre modèle sur les dernières version de Microsoft Internet Explorer, Firefox, Chrome et Safari.
Par ailleurs, si votre entreprise utilise un service de messagerie non-standard, veuillez également vérifier le code HTML sur cette plateforme. Emarsys peut aussi fournir toute une gamme de services de test de plateforme. Veuillez contacter le Support Emarsys pour en savoir plus.
Mise en page
Pixels vs. Points
Pour concevoir des emails, nous vous conseillons de toujours utiliser px pour la définition des hauteurs et largeurs, plutôt que pt ou em or bien même rem.
Largeur maximum contenant le contenu Email
Certains services de messagerie et/ou configurations de matériel ne peuvent afficher que 600 pixels de largeur à la fois. Un email HTML sans largeur configurée peut avoir l'air bien sur Outlook Express et un moniteur à haute résolution, mais les utilisateurs les plus défavorisés ne pourront pas voir la largeur entière de l'email. La largeur maximum recommandée de tous les emails est de 600 pixels.
Un bon exemple :
<table width="600" align="left"> <tr> <td>[ contents of email ]</td> </tr> </table>Un mauvais exemple :
[ contents of email ] or <table align="left"> <tr> <td>[ contents of email ]</td> </tr> </table>CSS
De plus, un certain nombres de points s'appliquent quand vous utilisez CSS pour les versions bureau de l'email (les navigateurs mobiles sont différents à cause de leur support CSS plus avancé).
- Le CSS inline est supporté, mais limité à l'utilisation de styles et de taille de police et doit être inclus comme HTML au cas où le client n'en tient pas compte.
- CSS ne doit pas être utilisé pour le positionnement.
- L'utilisation de feuilles de style externes n'est pas supportée.
- L'utilisation de CSS pour référencer des images d'arrière-plan n'est pas supportée :
- Exemple :
background:#e76f00 url(im/btn_orange.gif) repeat-x center center
Tuyaux rapides
- La plupart des clients ne liront pas les balises
<head>,<meta>ou<title>. Toutefois, ces dernières peuvent être utiles si vous offrez une version en ligne de l'email. - N'utilisez pas les balises
<div>,<tbody>ou<p>. - N'utilisez pas les balises
<embed>. - N'intégrez pas de caractéristiques avec balises.
- Utilisez
<b>et<i>au lieu de<strong>et<em>. - Fermez toujours les balises.
- JavaScript a tendance à être dépouillé ou ignoré dans la plupart des navigateurs email.
- N'utilisez pas des balises
GÉNÉRATEURdans l'EN-TÊTEdu message, tels que les balisesMETA.
Un bon exemple :
<tr> <td align="left"> <font face="verdana, arial, sans-serif">Text goes here.</font> </td> </tr>Un mauvais exemple :
<div align="left" style="font-family: verdana;">Text goes here.</div>La balise < Body >
Certains services de messagerie peuvent modifier la balise body dans les emails, entraînant des problèmes de formatage. Vous ne devez intégrer à la balise body aucune caractéristique que vous souhaitez absolument voir s'afficher, puisqu'elles pourraient ne pas apparaître. Par exemple, si vous utilisez un texte clair sur un fond foncé, assurez-vous d'établir des valeurs telles que la couleur du fond dans la caractéristique bgcolor de la balise tableau.
Un bon exemple :
<table bgcolor="#ffffff" width="600"> <tr> <td align="left">[ contents of email ]</td> </tr> </table>Un mauvais exemple :
<body bgcolor="#ffffff"> [ contents of email ]Éditeurs WYSIWYG
Les éditeurs WYSIWYG ("What You See Is What You Get") créent souvent automatiquement un code HTML spécifique au navigateur ou non-standard d'une manière ou d'une autre. Si vous utilisez un éditeur WYSIWYG, veuillez supprimer le code HTML spécifique au navigateur et toute autre forme de code non-standard, puis vérifier le code dans un programme tel que Notepad ou Dreamweaver afin de s'assurer qu'il est conforme à nos lignes directrices.
Un bon exemple :
<center><br> <table bordercolor="#333366" cellspacing="0" cellpadding="0" width="730" align="center" bgcolor="#ffffff" border="8"> <tr> Un mauvais exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>HTML Codes - Table of ascii characters and symbols</title> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META http-equiv=PICS-Label content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.ascii.cl" r (n 0 s 0 v 0 l 0))'><link href="HTML Codes - Table of ascii characters and symbols_files/ascii.css" type=text/css rel=stylesheet> <META content=all name=robots> <META content=Global name=distribution> <META http-equiv=Content-Script-Type content=text/javascript> <META http-equiv=reply-to content=webmaster@10sites.com> <META content="MSHTML 6.00.2600.0" name=GENERATOR> <body text=#333366 vLink=#3300ccaLink=#cc0033 link=#cc0033 bgColor=#ffffff> <center><br> <table bordercolor=#333366 cellspacing=0 cellpadding=10 width=730 align=center bgcolor=#ffffff border=8> <tbody> <tr> Syntaxe
Toutes les valeurs de caractéristique doivent être définies entre guillemets et utiliser une syntaxe correcte telle que "#" avant les caractéristiques de couleur et ";" après les éléments de style.
Un bon exemple :
<td align="center" bgcolor="#000000" valign="middle">Un mauvais exemple :
<td align=center bgcolor=000000 valign=middle>Caractères spéciaux
Nombre de services de messagerie sont incapables de rendre correctement les caractères en 8 Bit bruts. Vous devez par conséquent les encoder avec leurs entités numériques correspondantes (Codes de caractère ASCII ou codes HTML). Par exemple, le symbole copyright doit s'écrire © ou bien ©.
Un bon exemple :
Copyright © 2014 Emarsys.Un mauvais exemple :
Copyright 2014 Emarsys.Les cartes d'image
La cartographie d'image correspond à l'action de redéfinir la zone liée à l'intérieur d'une image. Ceci est réalisé à l'aide de la balise HTML <map>. Lorsque vous utilisez Cartes d'Image, assurez-vous que chaque carte séparée est contenue dans sa propre <td>, puisque de multiples cartes dans la même <td> peuvent provoquer des problèmes sur certaines plateformes (actuellement sur Apple Mail et Outlook 2007). Les cartes d'image sont une excellente technique de design pour obtenir un message marketing plaisant au plan visuel, à partir du moment où on l'utilise correctement. Veuillez aussi noter que les cartes d'image impliquent beaucoup de code et ont donc un impact sur la taille de votre message.
Cryptage
Le codage optimal pour un email est UTF-8 dans la plupart des langages. UTF-8 jouit d'une très large compatibilité et, à l'exception de certains langages multi-octets, devrait être le codage par défaut pour les actifs créatifs.
Support de tableau
General
Certains navigateurs et programmes email peuvent rencontrer des problèmes avec un contenu qui existe en dehors des balises <td>. Assurez-vous que tout le contenu destiné à l'email est contenu dans les balises de cellule de tableur (<td>s). Assurez-vos qu'une largeur a été assignée à tous les <td>s et que cette largeur n'est pas "0".
Un bon exemple :
<table bgcolor="#ffffff" width="250"> <tr> <td width="200"> Here is some text.<br /> <img src="images/spacer.gif" width="200" height="12" vspace= 0 hspace= 0 border="0" style="display:block;"><br /> Here is some more text. </td> </tr> </table>Un mauvais exemple :
<table bgcolor="#ffffff" width="250"> Here is some text.<br /> <tr> <td width="200"> <img src="images/spacer.gif" width="200" height="12" border="0"><br /> Here is some more text.<br /> </td> </tr> </table>ROWSPAN et COLSPAN
Utilisez rowspan et colspan au strict minimum car ils limitent la flexibilité du modèle. De plus, certains services de messagerie ne les interprètent pas correctement, entraînant des lignes et de bordures entre différents
s et . Dans certains cas, des options telles qu'inclure une <table> à l'intérieur d'une autre cellule de <table> constituent une meilleure solution.
Un bon exemple :
<table border="0" cellpadding="0" cellspacing="0" width="130"> <tr> <td width="130"> <img height="20" width="130" vspace= 0 hspace= 0 src="magnolia.gif" border="0" style="display:block;"> </td> </tr> <tr> <td width="130"> <table border="0" cellpadding="0" cellspacing="0" width="130"> <tr> <td width="60"> <img height="1" width="60" src="magnolia.gif" border="0"> </td> <td width="70"> <img height="1" width="70" src="magnolia.gif" border="0"> </td> </tr> <tr> <td width="60" valign="top">text goes here</td> <td width="70"> <table border="0" cellpadding="0" cellspacing="0" width="23"> <tr> <td width="70" valign="top"> Text goes here</td> </tr> <tr> <td width="70" valign="top"> Text goes here</td> </tr> </table> </td> </tr> </table> </td> </tr> </table>Un mauvais exemple :
<table border="0" cellpadding="0" cellspacing="0" width="130"> <tr> <td colspan="2"> <img height="20" width="130" src="magnolia.gif" border="0"> </td> </tr> <tr> <td width="60" rowspan="2" valign="top">Text goes here</td> <td width="70">Text goes here</td> </tr> <tr> <td width="70">Text goes here</td> </tr> </table>Largeurs et hauteurs
Définir une largeur exacte dans tous les éléments du tableur ajoute de la stabilité à votre design, permettra sans doute un rendu plus cohérent sur les divers services de messagerie et peut accélérer le rendu de l'email. Paramétrer la largeur totale du tableur à 100% est important pour les modèles mobiles, afin de vous assurer que le tableur utilise l'affichage plein écran. Assurez-vos qu'une largeur a été assignée à toutes les colonnes et que cette largeur n'est pas "0". S'assurer que les colonnes ont une largeur de pixel déterminée aide à garantir la structure du tableur. De plus, ne mélangez pas les largeurs de pourcentage avec les largeurs de pixel lorsque vous définissez les largeurs de colonne.
Un bon exemple :
<td width="250" height="100"> <img src="logo.gif" width="250" height="100" vspace= 0 hspace= 0 alt="Company Name" border="0" style="display:block;"/> </td>Un mauvais exemple :
<td width="100%"> <img src="logo.gif"/> </td>Cellules de tableur vides
Les vieux navigateurs rencontrent des problèmes avec les cellules de tableur vides (<td>s). Assurez-vous de remplir chaque cellule du tableur. L'insertion d'une image A 1 transparente dans la cellule de tableur vide résout ce problème. N'utilisez pas pour le remplissage. D'autres balises vides peuvent aussi poser problème. Une fois qu'un design est complété, c'est toujours une bonne idée de réviser et nettoyer le code pour éviter tout autre problème par la suite.
Un bon exemple :
<td width="200"> <img src="images/spacer.gif" width="200" height="1" vspace= 0 hspace= 0 border="0" style="display:block;"/> </td>Un mauvais exemple :
<td width="200"> </td> - <td width="200"></td>Espacement vertical du texte
Les balises <p> ont un rendu incohérent suivant les emails, avec l'ajout fréquent de plus ou moins d'espace que souhaité. Désigner la quantité d'espace vide avec une image "spacer.gif" réglera l'espacement sur une valeur exacte et procure une expérience plus cohérente à l'utilisateur final. Pour les grandes quantité de texte, utilisez des balises <br /> pour réaliser l'espacement entre les blocs de texte.
Un bon exemple :
<tr> <td width="200">Here is some text.<br> <img src="images/spacer.gif" width="200" height="12" vspace= 0 hspace= 0 border="0" style="display:block;"><br /> Here is some more text. </td> </tr>Un mauvais exemple :
<p>Here is some text.<p/> <p>Here is some more text.</p>L'espacement entre des éléments
Pour réaliser l'espacement entre éléments, éviter d'utiliser cellpadding, cellspacing ou margin padding, qui ne sont pas universellement compatibles. A la place, utilisez des gifs transparents à l'intérieur d'une structure de tableur pour plus de précision.
Un bon exemple :
<tr> <td width="200" height="10"> <img src="images/spacer.gif" width="10" height="10" vspace= 0 hspace= 0 border="0" style="display:block;"> </td> </tr> <tr> <td width="200">Here is some text. </td> </tr>Un mauvais exemple :
<tr> <td width="200" style="margin-top: 10px;">Here is some text.</td> </tr> - or - <table width="640" cellspacing="10" cellpadding="2">Définir les couleurs
Lorsque vous définissez des couleurs, la couleur spécifiée en nombre hexadécimal à six chiffres doit être référencée.
Un bon exemple :
<font color="#7bc618">email</font>Un mauvais exemple :
<font color="green">email</font>Couleur de fond
Certains packs de logiciel suppriment les valeurs apparaissant dans le balise body. Définir la couleur dans le tableur assure que les paramètres de couleur apparaissent de manière cohérente.
Un bon exemple :
<td bgcolor="#9c7bbd">Un mauvais exemple :
<body bgcolor="#9c7bbd">Alignement
Paramétrer la valeur de l'alignement dans les éléments du tableur ajoute de la stabilité, car les valeurs par défaut sont susceptibles de ne pas rendre correctement dans tous les services de messagerie.
Un bon exemple :
<table width="600" align="center"> <tr> <td align="left" valign="top" width="600">Text goes here</td> </tr> </table>Un mauvais exemple :
<table> <tr> <td>Text goes here</td> </tr> </table>Formatage de balise
Casse de balise
Toutes les caractéristiques doivent être soit en majuscules, soit en minuscules. Ne mélangez pas les deux.
Un bon exemple :
<b>say something bold</b>Un mauvais exemple :
<b>say something bold</B>Imbrication de balise
Assurez-vous que toutes les balises soient imbriquées correctement (c'est-à-dire que si plusieurs balises sont utilisées, elles devront être fermées dans le bon ordre).
Un bon exemple :
<i> <b>say something bold and exciting</b> </i>Un mauvais exemple :
<i> <b>say something bold and exciting </i> </b>Mettre les valeurs entre guillemets
Toutes les valeurs de caractéristique doivent être définies avec des guillemets.
Un bon exemple :
<td align="center" bgcolor="#000000" valign="middle">Un mauvais exemple :
</td> <td> <td align=center bgcolor=#000000 valign=middle>Type et taille de police
Tous les utilisateurs n'ont pas toutes les polices dans leur système. Spécifier plusieurs polices vous permet de choisir les polices dont vous préféreriez que l'utilisateur fasse usage. Si les polices ou types de polices spécifiés sont introuvables, le texte apparaîtra dans la police par défaut de l'utilisateur. Les tailles de polices standards (1, 2, 3 ) apparaîtront assez différemment en fonction des différents navigateurs et plateformes email. Emarsys suggère comme solution de contournement d'utiliser aussi une balise de style en ligne, avec une taille définie en pixels pour une apparence plus cohérente. style="font-size:12px;"
Un bon exemple :
<font face="arial, helvetica, sans-serif" style="font-size:12px;" size="2">email</font>Un mauvais exemple :
<font face="arial" size="2">email</font>Images
Taille
La meilleure pratique est de maintenir la taille de l'email en dessous d'un total de 49KB, car sinon les temps de téléchargement augmenteront et les messages auront des taux de réponse plus bas. Le contenu email et les images doivent être optimisés pour une taille de fichier minimale. La taille combinée des fichiers images référencés ne doit pas excéder 500KB.
Bordure
Les images liés dont la caractéristique de bordure n'est pas réglée sur zéro afficheront une ligne bleue en gras sur les bords, ce qui n'est pas du meilleur effet avec certains modèles et peut déséquilibrer la structure du tableur. Assurez-vous de faire le réglage border="0" pour toutes les images afin d'empêcher cela.
Un bon exemple :
<img src="image.gif" width="1" height="1" vspace= 0 hspace= 0 alt="Descriptive text here" border="0" style="display:block;">Un mauvais exemple :
<img src="image.gif" width="1" height="1" alt="Text here">Hauteur et largeur
Incluez toujours les caractéristiques de hauteur et de largeur pour toutes les images. Désigner les caractéristiques de taille pour une image affectera le temps qu'un email met à se télécharger. Si aucunes caractéristiques de hauteur ou de largeur ne sont déterminées pour une image, cette dernière doit se télécharger complètement avant que l'interprète HTML du service de messagerie puisse rendre le reste de la page. Pour une vitesse de téléchargement optimale, réglez les caractéristiques de hauteur et largeur de toutes les images sur des valeurs absolues pour les versions de bureau (vous pouvez continuer d'utiliser des pourcentages pour les versions mobiles). Les images doivent être utilisées à leur taille effective. Le redimensionnement d'une image vis les propriétés HTML ne sera pas pris en compte par les services de messagerie tels qu'Outlook 2007 et entraînera probablement des erreurs dans la structure du tableur.
Un bon exemple :
<img src="image.gif" width="10" height="10" vspace= 0 hspace= 0 alt="text here" border="0" style="display:block;">Un mauvais exemple :
<img src="image.gif" alt="Text here" border="0"> - or - <img src="image.gif" width="50%" height="50%" alt="Text here" border="0">Texte alternatif
En regardant les emails HTML hors ligne, les utilisateurs verront une image brisée ou une balise d'image plutôt que l'image destinée à l'affichage en ligne. Pour faciliter la vue de l'email, assurez-vous de saisir une description de l'image dans la balise alt. Veuillez rendre la description de la balise alt compréhensible au destinataire (c'est-à-dire "Fleurs à seulement 9.99" plutôt que "image de fleur 22"). Notez que tous les services de messagerie n'affichent pas le texte alternatif, certains montrent leurs propres messages d'erreur à la place (par exemple Outlook).
Un bon exemple :
<img src= headline1.gif width= 1 height= 1 vspace= 0 hspace= 0 alt= Save today on Airline tickets! border= 0 style= display:block; >Un mauvais exemple :
<img src= image.gif width= 1 height= 1 border= 0 >La dénomination d'image
C'est toujours une bonne idée de donner une appellation intuitive aux images, ne serait-ce que pour votre propre gestion media. Nous conseillons d'utiliser un seul mot, des noms en minuscules, sans soulignement, pour toutes les images.
Un bon exemple :
<img src= magnolia.gif width= 50 height= 50 vspace= 0 hspace= 0 alt= Magnolia Bouquet border= 0 style= display:block; >Un mauvais exemple :
<img src="image.gif width="50" height= 50 border= 0 >Le blocage par défaut des images par divers FAIs
Pour l'essentiel, on ne peut pas faire grand chose en matière de codage pour remédier au problème des FAIs qui bloquent les images par défaut. Nous suggérons d'incorporer les bonnes pratiques suivantes : Fournissez des balises-alt informatives pour les images, de sorte qu'elles s'affichent si les images venaient à être bloquées.
- Utilisez une mise en page / un modèle propre pour une dégradation efficace de l'email.
- Placez du verbiage "Ajoutez au carnet d'adresse" en haut des emails pour les messages de bienvenue ou bien un lien "Vous avez du mal à voir cet email" dans les autres emails.
GIFs animés
Nombre de nos clients font usage de GIFs animés. Toutefois, il faut surveiller avec attention la taille du ficher, car les GIFs animés peuvent devenir lourds en termes de taille du fichier et affecter le temps de téléchargement. Par ailleurs, certains navigateurs tels qu'Outlook 2007 ne les rendent pas proprement et n'afficheront que la première du GIF. La première image doit donc être assez pertinente pour bien s'intégrer au message.
Images de fond
Les images de fond ne jouissent pas d'une compatibilité universelle avec tous les services de messagerie, tels qu'Outlook 2007. Il est recommandé de ne pas utiliser du tout les images de fond pour les emails HTML, mais si elles sont incorporées à un design elles doivent être utilisées de sorte que si elles n'apparaissent pas cela n'affectent pas beaucoup le design, ni ne perturbe la compréhension du message affiché. Si un texte est affiché en haut d'une image de fond, il est bon de remplir aussi la cellule avec une couleur de fond, qui apparaîtra lorsque l'image n'apparaît pas. Une autre solution de contournement consiste simplement à créer une image qui intègre le fond et le texte, et de la placer à l'intérieur de la cellule du tableur.
Un bon exemple :
<td background= images/red_pattern.gif bgcolor= #ff0000 > Hurry! Sale Ends Saturday!</td> - or - <td width="100" height="50"> <img src="sale.gif" width="100" height="50" vspace= 0 hspace= 0 alt="Hurry! Sale ends Saturday!" border="0" style="display:block;"/> </td>Un mauvais exemple :
<td background="images/red_pattern.gif"> Here is some text.</td>HTML personnalisé et optimisé pour mobile.
Cette section décrit comment adapter le code HTML d'un email de sorte qu'il se comporte de la même manière que les modèles prêts pour le mobile créés par Emarsys.
Approche technique
Si vous voulez envoyer un email prêt pour le mobile à vos clients, la manière la plus simple est de concevoir une mise en page de colonne unique et d'utiliser une feuilles de style pour apporter des modifications spécifiques aux appareils mobiles. Cela permet un affichage sélectif du contenu, sur la base de la manière dont le service de messagerie accède au contenu. On peut faire ça en plaçant une section de requête media à l'intérieur de l'élément <style> dans votre code HTML :
@media (max-device-width:400px) and (-webkit-min-device-pixel-ratio:1.1) { /* MOBILE CSS GOES HERE */ }Tout ce que vous mettez entre les accolades ne sera visible que sur les appareils mobiles. Ici vous pouvez :
- Définissez une largeur d'email adaptée aux appareils mobiles (bien que nous recommandions d'utiliser
largeur :100%plutôt qu'une valeur fixe en pixels, à cause de la très grande variété des tailles d'écran disponibles aujourd'hui. - Cachez ou montrez de manière sélective des sections de l'email.
- Agrandissez la taille de la police, des boutons et des liens par défaut.
- Ajustez la largeur des images à la taille de l'écran.
- Remplacez les images par d'autres images spécifiquement pour l'affichage sur mobiles.
Vous trouverez ci-dessous un exemple de code HTML contenant une requête media et un CSS mobile, avec des commentaires dans le code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <title></title> <meta name="viewport" content="initial-scale=1, user-scalable=yes"> <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]--> <style type="text/css"> /* Media Query - Breaking point: 400px CSS width - for more details please have a look at the device list on http://mydevice.io/devices/ - To force iPhone 6(S) Plus / 7 Plus to show the mobile version, this value needs to be changed to 414px */ @media only screen and (max-width:400px) { /* Stretches the container that contains the content to 100% */ .fw { width:100% !important; min-width:0 !important; } /* Hide content in mobile version */ .mh { display:none !important; } /* Class that's needed if a desktop image gets replaced by an alternative image in mobile version */ .mhi { display:none !important; max-height:0; } /* Stretch image to full available width */ .image { width:100% !important; height:auto !important; } /* Center align text - Applied on td tags (Caution: this is not working with tables or images! - For this case please use class .comt) */ .com { text-align:center !important; } /* Left align text - Applied on td tags (Caution: this is not working with tables or images! - For this case please use class .lomt) */ .lom { text-align:left !important; } /* Center align block elements - Examples: table, img */ .comt { margin:0 auto !important; } /* Left align block elements - Examples: table, img */ .lomt { margin:0 auto 0 0 !important; } /* Default font size on mobile (Caution: this is just applied on font tags!) */ font { font-size:17px !important; } /* Other font sizes that can be used in mail (headlines, etc. for example - either in td or in font tag) */ .h1 { font-size:24px !important; } .h2 { font-size:20px !important; } .small { font-size:15px !important; } .xsmall { font-size:13px !important; } } <!-- /* Color values of the following CSS can be changed */ body { margin:0; padding:0; width:100%; background:#cccccc; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } a, a:active, a:visited, .yshortcuts, .yshortcuts a span { color:#000000; text-decoration:none; font-weight:normal; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .ReadMsgBody { width:100%; } .ExternalClass *, .b-message-body { line-height:100%; } .ExternalClass { width:100%; } table th { padding:0; Margin:0; border:0; font-weight:normal; vertical-align:top; } --> </style> <!--[if gte mso 9]> <style type="text/css"> /* Styles needed for Outlook 2007 to 2016; the additional XML code can improve the display of the mails when using 120dpi display mode */ table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0; } table td, table th { border-collapse:collapse; font-size:1px; line-height:1px; } .lh { line-height:normal !important; } <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </style> <![endif]--> </head> <body> <!-- Main background color (bgcolor attribute of the following <table>-tag can be changed) --> <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" bgcolor="#cccccc"> <tr> <td width="100%" align="center" valign="top"> <!-- Width of content (variable) --> <table cellspacing="0" cellpadding="0" border="0" width="600" style="width:600px; min-width:600px;" bgcolor="#ffffff" class="fw"> <tr> <td align="center" class="h1"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">CONTENT</font></td> </tr> <!-- For hiding elements in mobile version please use class "mh" --> <tr class="mh"> <td align="center"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text won't be displayed in mobile version</font></td> </tr> </table> </td> </tr> <!-- This <div> is needed for Gmail app to avoid the display of a shrunk pseudo mobile version --> <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div> </table> </body> </html>
Paramétrer la largeur de l'email
Si vous utilisez le code basique fourni sur cette page, une largeur de 600px est déjà paramétrée pour le contenu. Cette valeur peut être modifiée, mais nous vous recommandons de rester entre 550px et 650px de largeur (cette dernière valeur n'est destinée qu'à la version de bureau).
<table cellspacing="0" cellpadding="0" border="0" width="600" style="width:600px; min-width:600px;" bgcolor="#ffffff" class="fw">Pour les versions mobiles, la classe "fw" définie étire le contenu jusqu'à 100% de l'espace d'écran disponible. Cette classe a déjà été définie dans la Requête Media du bloc CSS, si vous utilisez notre code basique :
.fw { width:100% !important; min-width:0 !important; }Montrer et cacher des sections
Vous pouvez ajouter une classe CSS "mh" (caché sur mobile) qui s'applique aux éléments que vous voulez cacher aux utilisateurs mobile (cette classe est déjà définie dans le code basique ci-dessus) :
.mh { display:none !important; }EXEMPLES
<tr class="mh"> <td align="center"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text won't be displayed in mobile version</font></td> </tr> <font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="mh">This text won't be displayed in mobile version</font> <img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" border="0" style="display:block;" class="mh">Formatage mobile
Vous pouvez ignorer le design de bureau du message en ajoutant une règle à la section CSS mobile. De manière générale, vous pouvez ignorer n'importe quel style ici. Nous recommandons d'utiliser la balise <font> pour établir le style d'éléments textuels (la taille de police et les classes par défaut pour la version mobile sont déjà définies dans le code basique sur cette page).
Code CSS mobile :
font { font-size:17px !important; } .h1, .h1 font { font-size:24px !important; } .h2, .h2 font { font-size:20px !important; } .small, .small font { font-size:15px !important; } .xsmall, .xsmall font { font-size:13px !important; }EXEMPLES
<font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text has a font size of 14px in desktop and 17px in mobile version.</font> <font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="h1">This text has a font size of 14px in desktop and 24px in mobile version.</font> <font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="small">This text has a font size of 1Taille de police et formatage
div[class="yfix"] p { font-size: 14px; /* Bigger text */ color: blue; /* Changing color / text-align: left; /* Always align paragraph to left */ line-height: 20px; /* Define the height of the lines */ }
Liens
div[class="yfix"] a { border: 1px solid blue; background: silver; color: #fff; font-size: 16px; text-decoration: none; }
Modifier la taille d'une image
Ajoutez class="image" à la balise <img> référencée pour appliquer les modifications. La classe "image" est déjà disponible dans le code basique :
.image { width:100% !important; height:auto !important; } <img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" border="0" style="display:block;" class="image">Remplacer des images
Pour remplacer une image dans la version mobile, il y a besoin d'une classe CSS supplémentaire dans la Requête Media.
Note : Cette technique a été testée dans beaucoup de services de messagerie email et fonctionne bien avec la plupart d'entre eux. Mais comme les fournisseurs de webmail tels que Gmail, Yahoo, Outlook.com, etc. changent le traitement du code HTML en permanence, nous ne pouvons garantir que cela marche à tous les coups.
.mhi { display:none !important; max-height:0; }La première balise <img> insère l'image de bureau. Si le mail est affiché sur un appareil mobile, l'image de bureau est cachée et l'image mobile (définie dans la seconde balise <img>) apparaîtra à la place. La balise de lien autour de l'image est facultative.
<tr> <td align="center"> <a href="http://www.emarsys.com/" target="_blank"> <img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" width="580" border="0" style="display:block;" class="mhi"> <!--[if !mso 9]><!--><img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/mobile.png" style="mso-hide:all; width:0; height:0; display:block;" border="0" class="image"><!--<![endif]--> </a> </td> </tr>